I have a website which was created by someone else and I have been tasked with taking over. On this website there was a sandwich style menu and a search bar in the navigation.
I have since created a mega menu (WordPress Plugin). Now the older icons are redundant and useless therefore I have applied a display: none; rule to the CSS to remove them from the frontend.
This works correctly on Safari and Chrome on Mac however it seems as though Windows users on Firefox and Chrome as well as users of Firefox on Mac can still see the icons.
Can anyone help? The website is www.quanser.com. You will see the icons in the header to the right.
header.site-header .badge-links {
display: none !important;
}
I'm using Firefox on Windows and still can see the Search and Hamburger menu icon (my first time visiting your site), this means this has nothing to do with cache. Though usually working with Wordpress, you should clear the cache after changing some CSS.
So far, I've inspected the CSS and see that this CSS block is repeated 3 times, which the last block will look like:
.header.site-header .badge-links {
position: absolute;
top: -3px;
right: -.625rem;
}
Try to find this block in your CSS, and add something like this:
.header.site-header .badge-links {
position: absolute;
top: -3px;
right: -.625rem;
display: none;
}
You don't need to `!important` in your CSS in this case.
There is a pretty efficient way for solving this:
header.site-header .badge-links {
z-index:-100;
}
#media screen and (max-width: 992px) {
header.site-header .badge-links {
z-index:100;
}
#
}
Related
I was looking for a nice themed html5 video player and beside jwplayer, I found the project Videre on Github https://github.com/Hipady/Videre
I forked the code and removed some stuff I don't need. But I wasn't able yet to get fullscreen working with my custom video controls.
Here's a test page: https://onny.project-insanity.org/files/videre-html5-videoplayer-test/index.html
Here's the source code: https://git.project-insanity.org/onny/web-videre-diet
And here's a screenshot showing the issue:
Unfortunately I cannot figure out how to vertically center the video in fullscreen :(
The issue could be related to this part of the CSS:
.vid-wrapper {
position: relative; }
[...]
.vid-wrapper .vid-html5 {
position: relative;
z-index: 1; }
.vid-wrapper .vid-html5 video {
display: block;
background-color: black; }
Firefox and Chrome seem to behave differently in this case and it seems that only Firefox has this issue.
Best regards,
Jonas
Currently working on http://getfitquick.co.uk/ but have come into an issue, when the menu is viewed on Tablets/Mobile the menu is currently active with the toggle constantly on, would really like to remove this so that the user is able to click menu and allow the menu to appear as opposed to it always being active.
Would also like to mention for reference that on http://getfitquick.co.uk/shop/ the menu is actually appearing how I want it to, however I am a bit unsure how I did this,
Is there anything anyone could suggest? Maybe something I may have done wrong within the process?
Thanks for reading,
On the homepage there's a css code that runs display: inline-block !important; for .menu .nav
#media (max-width: 768px) (index):251
.menu .nav {
position: relative;
background-color: #000000;
left: 0px;
border-color: #e51d25;
display: inline-block !important;
}
that code will override the default behavior of the mobile nav
at the top of that code, there's a comment that says
/*
The following CSS generated by Yellow Pencil Plugin.
http://waspthemes.com/yellow-pencil
*/
So I'm not quit sure if that CSS is directly generated from that plugin option on the homepage or if its from a custom CSS code assign to that homepage,
the best way to fix that is to look for that code, its should be somewhere in the Yellow Pencil Plugin
The second option though is really a bad idea is to modify and override it
CSS Override
header .menu .nav {
display: none !important;
}
header .menu.active .nav {
display: block !important;
}
then add active when the button is click and remove it when click again,
jQuery
(function( $) {
$('header').on('click', '.menu .toggleMenu', function() {
$(this).parent().toggleClass('active');
});
})(jQuery);
I'm having some cross browser styling issues with a site I've just loaded up onto a wordpress html5blank child theme.
For example, here's an image layout as it is showing in Chrome -
And this is in Firefox & Safari (how it should look) -
The style code is set correctly as display: inline-block; but Chrome isn't having it.
I also have issues in Safari and Chrome regarding font-weight (showing much lighter than is set) and font-size (smaller than it should be). Is there some method and/or plugin that stops all the compatibility issues?
UPDATE -
I've placed the code on a codepen here
With some help from the responses to this, I figured it out -
.staff .brick {
display: flex;
}
You just need to add
.brick { float: left;}
I tested it in your code pen, and when I inspected the element float: left; was greyed out for some reason. Then I just added the above to your code, and it worked.
Add this to target firefox
#-moz-document url-prefix() {
.brick {
float: none;
}
}
I have a Wordpress website built using the Sterling theme and I'm having issues with the menu displaying vertically instead of horizontally in Internet Explorer. I asked about it before here and ended up focusing on jquery errors that didn't fix the problem.
Here's a screenshot of how its showing up on IE9 for me.
Since then I tried changing the doctype to force the site to display properly but I've now realized that all the computers at work have IE9 permanently set to compatibility mode and changing that would mean going through the IT department.
I can't exactly tell my company the website looks wrong on your computers but right everywhere else and I do want to avoid errors for people using old versions of IE since the target market isn't tech savvy people, so could anyone offer advice on how I can get my menu to work right in quirks / compatibility mode?
I don't care if other aspects of the site aren't perfect but its practically unusable with the menu like that. I basically just need it to display horizontally instead of vertically, which I'm assuming is related to the CSS somehow.
EDIT: Added my CSS
The original code in the stylesheet is this
nav > ul > li {
display:inline-block;
position:relative;
}
nav > ul > li+li {
margin-left:28px;
}
And then I customised it slightly in the site options part of the theme (basically means my changes won't get overwritten when I update the theme) and my customization is:
nav > ul > li+li {
font-size:14px;
margin-left:10px
}
I think its something to do with display:inline-block; but nothing I've tried seems to make the menu horizontal again.
What css properties have you used for that ? You should do something like
#menu li {
display: block;
float: left;
width: 200px;
height: 40px;
}
#menu {
overflow: hidden;
}
Background: I'm currently bringing my Tumblr blog, with a (lightly) customised Bootstrap theme, over to Octopress.
Tumblr site: http://eatsleeprepeat.net/
Octopress site (WIP): http://stark-autumn-3851.herokuapp.com/
Github: https://github.com/elithrar/octopress/tree/master/.themes/eatsleeprepeat (see sass/ for the stylesheets)
The biggest problem right now is the way the hero-unit that contains the individual posts is not conforming (from what I can see) to the #media statements in the _bootstrap_responsive.css file, which is loaded at the bottom of screen.css on the site itself (via Octopress).
The HTML structure is identical (as far as the hero-unit div is concerned), and Web Inspector in Chrome isn't telling me anything useful (read: that I can understand).
If there's someone with some good CSS-fu and a few minutes to spare, I'd very much appreciate it.
Update: I've resolved the issue with the hero-unit (horizontally), so it now respects the page size. It was due to a really obvious error: "id" instead of "class" for container.
However, saying that: I still have an issue with the vertical alignment of the hero-unit underneath the navbar navbar-fixed-top div; there's no spacing between them.
You may need to add these CSS rules:
.container::before, .container::after {
display: table;
content: "";
}
.container::after {
clear: both;
}
.container::before, .container::after {
display: table;
content: "";
}
I've fixed this by adding the following:
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>