Navigation Menu doesn't keep width on smaller resolution

  • Resolved JamesEMCS

    (@jamesemcs)


    10 years, 2 months ago

    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;
}

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter JamesEMCS

    (@jamesemcs)

    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?

    Thread Starter JamesEMCS

    (@jamesemcs)

    … 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?

    Thread Starter JamesEMCS

    (@jamesemcs)

    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%;
}
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Navigation Menu doesn't keep width on smaller resolution’ is closed to new replies.