Navigation Menu doesn't keep width on smaller resolution
-
Hello. For some bizarre reason when going to a smaller screen resolution on the customizr theme; the navigation menu seems to indent itself causing some of the links to move themselves down to a new line.
My screen resolution is 1920×1080; the navigation menu looks how I expect with the width being slightly larger than the header image (the “navbar-inner” being 1122px). However, when testing the site on a notebook @ 1280×1024 the navigation menu is indented and the “navbar-inner” is only 741px.
The header image is 1024px on my larger screen and scales down to 1010px on the smaller screen, I don’t know if that effects the navbar is some way.
Is there a CSS fix that I can use? I’ve tried to center it via this code but it just indented the whole sidebar to the right.
.navbar-wrapper .navbar.resp ul.nav.tc-hover-menu { display: block; float: none; width: 100%; margin: 0 10%; } .navbar-wrapper .navbar.resp .nav { float: none; width: 100%; text-align: center; } .navbar-wrapper .navbar.resp .nav > li { float: none; display: inline-block; } .navbar-wrapper .navbar.resp .nav > li .dropdown-menu li { float: left; width: 100%; text-align: left; } .navbar-wrapper .navbar.resp .navbar-inner { margin: 0px 0px; padding: 0px 0px; }
-
I’ve narrowed it down to the following code in the “black.css” file
.row-fluid .span9 { width: 74.46808511%; *width: 74.41489362%; }
Changing this width to 100% fixes the issue on the small screen but moves the sidebar to the right on a larger screen. Is there a way I can make the element to stay inline with the header image?
… AND
.tc-no-sticky-header .logo-centered .navbar-wrapper { float: none; }
Changing this to left with the above width being 100% will fix the issue on a small screen, but shift the bar to the left (as would be expected) on the larger screen.
This seems to me to be quite a big bug in the Customizr theme, and after nearly 3 days nobody seems to want to help.
Is there no fix for this issue?
I think a series of @media queries would fix it, but to what sizes and elements?Well… After all this support I’ve fixed the issue myself!
In case anybody else has this trouble; this is the fix;
body { max-width: 1135px; /* The max-width of your body content */ } .tc-no-sticky-header .logo-centered .navbar-wrapper { float: left; width: 100%; }
- The topic ‘Navigation Menu doesn't keep width on smaller resolution’ is closed to new replies.