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;
}
Related
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;
}
#
}
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'm trying to make a menu in the webpage I'm actually developing, and I've noticed that the css for the menu ul doesn't update as I change code.
It doesn't update in Chrome 37.0.2062.124, but it does in Firefox 32.0.1 when I clear cache (of course, I've tried Ctrl+F5 at Chrome, too). Maybe it's interesting to know that IE 11.0.10 has the same problem than Chrome.
At this point, I want to reduce the text indent from 2.75 to 0.75, to fit text.
Here is the jsfiddle (where it seems to update changes):
jsfiddle
The problem seems to be at
#menu ul,
#menu ul ul {
margin: 0;
padding: 0;
list-style: none;
display: block;
line-height: 2.75em;
text-indent: 0.75em;
}
So I don't know if that is probably an issue caused by Chrome, Apache (I'm using XAMPP 3.2.1 for W7) or any other silly stuff...
Thanks to everyone.
Here is a similar question about apache caching. And here also good article.
Try adding version postfix to your css file, it should force browser to take latest version from server.
<link rel="stylesheet" type="text/css" href="style.css?v=1" />
Or you can add timestamp instead of version.
You can try to use Ctrl+F5, this refreshes the page without using your browsercache.
I really like how the FAQ page/questions look on the site I'm building using Squarespace. The only issue is that because of this structure, it also leads to a cumbersome drop down menu when you hover over the FAQ tab on the main navigation.
Here's a link: http://www.officialjerky.com/faq-1/
While it's certainly possible to set up anchored links in another FAQ page, I'm also sure there's a solution that will allow me to keep the structure of the page(s) and get rid of the drop down. Perhaps a bit of custom CSS that could make the drop down invisible?
There was a similar help thread that asked how to change the spacing between the items in the drop down, and the custom CSS input solution was: .primary-nav .folder-links-wrapper li { line-height: 0em; }.
Any guidance or input is really helpful. Thanks.
It's controlled by JS, so you may need a mini sledgehammer to override it. Try this in your CSS:
.subnav {display: none !important;}
Ideally, remove the script that is causing the behavior.
Regarding the + on small screens, on line 9865 of the stylesheet there is this:
#sidecarNav .folder label:before {
content: '+';
padding-right: .25em;
width: .75em;
display: inline-block;
}
You could either remove that code, or just add this to the stylesheet:
#sidecarNav .folder label:before {
display:none !important;
}