Force Nav Bar Full Width for Entire Site

Support
#1

I looked online but couldn’t come up with the right answer.

How do I force the Nav Bar to be full width for all pages on the site? I know - only one page now - but more on the way.

Dev site is realhdr.com. Admin info below.

Thanks again.

#2

Hello There,

Thanks for writing in! Do you want something like this?

If that is the case, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

@media(min-width: 980px){
  body.x-navbar-fixed-top-active .x-navbar-wrap {
    margin-left: calc( (-100% - 1200px) /2 );
    margin-right: calc( (-100% - 1200px) /2 );
  }
}

Hope this helps. Please let us know how it goes.

#3

Looks like IE11 issue:

While documenting what follows, I found the issue in the second screenshot to happen in IE11, but the navbar behaves normally in Chrome, Firefox and Opera. I cleared the IE cache and even relaunched the browser and the problem persists

My fault for not being more explicit in my question. The site’s max width is 1200px. When scrolled all of the way to the top of the page, the navbar looks as it should and covers the full or scaled width of the image:

But as soon as the Rev Slider scrolls off the top of the page, x-navbar-inner becomes only a percentage of the image’s width and the navbar becomes less wide than the image:

The only control I find to have any effect is the Layout and Design > Site Width (%) slider. With it set to 100%, the navbar is as wide as the 1200px page, but text also goes completely to the edge. The problem also happens when I turn off the Rev Slider above the masthead.

Thanks again.

Alan

#4

Hello Alan,

Upon checking, navbar behaves normally in IE11 like on Chrome. See this: https://screencast-o-matic.com/watch/cbQqVHIYp1
It is will fullwidth and doesn’t fall short on edges when I tried to scroll. Can you clarify if this is now sorted out?

#5

Hi Lely,

I overlooked something in my troubleshooting and discovered it after I read your reply. The issue is the way the navbar reacts to the viewport width of ANY browser.

The navbar becomes too small after the desktop window reaches some particular size. It isn’t related to whether the browser is maximized or in a window because my second display is 1280x1024 and the menu bar is broken even when the browser is maximized. The video looks a little soft because I have my 2560x1440 display set to 1920x1080 so that I can design to what most people use.

Thanks for introducing me to screencast-o-matic! I signed up so that I could record this video to show you exactly what happens. Site admin credentials follow.

Thanks, and I apologize for the earlier misinformation.

#6

Hi There,

You could fix it by changing the navbar links font-size to 18px. It will still look good and this will be avoided.

You can change font size on Theme Options > Header

Hope it helps

#7

I just tried everything from 10 to 30px and get the same result.

#8

Hi There,

I have changed your navbar links font size to 18px and it worked.

Hope it helps!

#9

You might be looking at it full screen on a 1080p display, and it’s fine there. In a window on a 1080 display, or full screen on a 1280x1024 desktop, or full screen on a 1366x768 laptop is when the navbar does not cover the width of the site like it should. Navbar font size makes no difference.

Ths video shows what happens as window size changes. Navbar font size is at 18px at the beginning of the video like you set it, then I changed it all the way down to 10px to show the same symptoms, then back up to 18px.

http://screencast-o-matic.com/watch/cbQrYaIZiT

#10

The css you sent to try and force the logo image to stick at the top is too rough-looking to use for a professional site, but I was able to use the

/* Force navbar to full width */
.x-navbar.x-navbar-fixed-top.x-container.max.width {
  width: 100%;
}

from it to fix the problem with the navbar shrinking. I’ll leave the above and the video up in case it might help someone else with a shrinking navbar.

I guess we’re done on this one. Thanks.

#11

You’re welcome.