Nav Bar "fills page" on some computers

Support
#1

Some visitors to our X-Theme based website and writing to tell us they can’t see the top 1/3 - 1/2 of the page content because the navigation bar covers it.

Everything looks fine on every device I have (phone, tablet, laptop, desktop, PC, Mac) so I’m afraid I can’t do more than describe what people are telling us. Also, one reader said she’s on a newer desktop PC running Windows 10 on a 22" monitor and the nav bar issue happens to her until she plays with her browser’s “View” sizing.

Any suggestions you have will be much appreciated.

Thx

Website: https://awakeningclaritynow.com
Wordpress: V 4.9.5
X Theme: V 6.0.4

#2

Hey There,

This particular situation is simply a matter of reworking your content to properly fit the physical limitations presented by the theme (this is a consideration that must be taken into account with all themes and designs). It is the same principal applied to filling up a room with furniture—there is only so much that can fit into a given space. The following should be considered in these situations:

  1. Logo Size – longer logos will conflict with navigation items as you size your site down. If you are noticing a conflict, you may need to implement some CSS to size down your logo as viewports get smaller.
  2. Shorter Names – you should always shoot to have your top-level navigation links be as simple as possible. For example, if your link is “Learn About My Company,” Try using “About” instead. It conveys the same idea and will save you a ton of real estate.
  3. Rearrange – sometimes we want to put all of our links in the top-level navigation, but not all pages are created equally. Pages of lesser importance that pertain to a parent link might work well as a sub-menu instead.
  4. Less Links – even on more “complex” websites with lots of pages, there are always ways to combine information together to make things simpler, which also ensures that your user doesn’t have to click around for every granular piece of information. For example, you might have two top-level links called “About” and “Contact,” which could possibly be combined into one. This eliminates the need for extra links and makes things much simpler for your users to navigate. Less is more in information architecture.
  5. Appearance – fortunately X features plenty of options for adjusting the appearance of elements throughout your site, and the navbar is one of the more flexible elements. Try using a smaller font size if possible to save on a little real estate.

Thanks!

#3

Uh, hi Thai . . . did you even bother to visit the site?

I don’t want to sound confrontational, but you provided nothing more than an incredibly general almost-answer to a very specific situation.

I rarely ask for help from you guys and when I do I try to provide as much specific and relevant info as i can because I value your time. It would be great to see some of that love reciprocated.

And as far as: “this is a consideration that must be taken into account with all themes and designs” Uhhh, this consideration has never happened with the previous themes we’d been running for the past 5+ years on this site.

Again, I’m not trying to get nasty, but please don’t tell me that this specific issue happens on all themes when I can assure you it has NEVER happened on the previous 100+ websites I’ve launched.

I’m not blaming the theme. I may have messed-up CSS or it may be the viewer’s own problem. I’m keeping an open mind and searching for a solution to a problem that has (as yet) only made itself known when using X-Theme on this particular site (meaning I’ve got more than one license of X and it has performed admirably on the other sites).

Let’s take another look at the issue and maybe provide me with some site-specific suggestions.

#4

Hi again,

Thank you for the detailed write-up! I checked your site and I believe you’re referring to this:

This is indeed the issue of more menu items than the available space. You can try couple of fixes to get rid of double navbar issue:

  • You can adjust the menu items spacing and font size in different screens using custom CSS, try adding the following CSS code in the Theme Options > CSS: 
@media screen and (min-width: 1250px) {
    .x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
        padding-left: 10px !important;
        padding-right: 10px !important;
        font-size: 17px;
    }
    .x-navbar .x-container.max.width {
        width: 96%;
    }
    .x-brand img {
        width: 200px !important;
    }
}

@media screen and (max-width: 1249px) {
    .x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
        padding-left: 6px !important;
        padding-right: 6px !important;
        font-size: 16px;
    }
    .x-navbar .x-container.max.width {
        width: 96%;
    }
    .x-brand img {
        width: 150px !important;
    }
}

@media screen and (max-width: 1170px) {
    .x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
        padding-left: 5px !important;
        padding-right: 5px !important;
        font-size: 14px;
    }
    .x-navbar .x-container.max.width {
        width: 96%;
    }
    .x-brand img {
        width: 120px !important;
    }
}
  • Or you can enable burger menu in large screens to avoid such situation, to do this please add the following CSS code in the Theme Options > CSS: 
@media screen and (min-width: 1250px) {
    .x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
        padding-left: 10px !important;
        padding-right: 10px !important;
        font-size: 17px;
    }
    .x-navbar .x-container.max.width {
        width: 96%;
    }
    .x-brand img {
        width: 200px !important;
    }
}
@media screen and (max-width: 1300px) {
  a.x-btn-navbar {
    display: block;
    float: right;
  }

  nav.x-nav-wrap.desktop {
    display: none;
  }
  .x-nav-wrap.mobile:not(.x-collapsed) {
    display: block !important;
  }
}

Now you’ve two options, either use custom CSS to adjust menu items or enable mobile button in desktop screens to fix this issue.

However the previous suggestion still applies to your specific case, you can also benefit from the previously given suggestions to handle this more effectively.

Hope this helps!

#5

Hi Nabeel,

So are we saying that the navigation bar (and contents) are not natively responsive?

#6

Hi there,

I have gone over the thread and I believe @thai gave a very comprehensive explanation about why your site’s menu drops and covers some contents of your pages and @nabeel proactively introduced some suggestions which you can try as a workaround your site’s issue.

X is a responsive theme. By default, the navigation area is set up to display a desktop version of the menu for screen sizes 980px and above and it will show the burger icon for screens 979px and below. This happens to your site so technically, the responsive nature of the menu works.

However, you have a limited space for the navigation menu area to display on one line for screen’s 980px above.

X is a responsive theme. The theme’s menu setup is that it will show a desktop version of menu for breakpoints 980px and above and will show the mobile menu below that breakpoints.

If your header layout is set as inline in X > Theme Options > Header > Logo and Navigation > Layout, in a proper design perspective, the entire header area content should display inline/one line having the site logo to the left and the main menu to the right. That is why there is a setting in X > Theme Options > Header > Navbar > Navbar Top Height (px) where you could set a fixed height for the header.

Currently, your site’s Navbar Top Height is set to 90px but since you have a lot of menu items in a limited space, your actual menu content exceeds that causing the header to cover some of the page contents as shown here:

So for this setup, there are some workarounds you can apply including what Nabeel suggested which is either to override the theme’s default behavior where the mobile button will show earlier or to have the menu item font size smaller in order for the header to accommodate them in one line.

Another thing you can try is to override X’s default setting where it sets a specific height to the navigation area which is the Navbar Top Height option that I mentioned previously to auto which means that the header area’s height will automatically adjust to the header content’s/ However, that setting only accepts a px because of what I previously about the inline layout of the header. To override this setting, you can add this custom CSS:

body.x-navbar-fixed-top-active .x-navbar-wrap {
    height: auto !important;
}

The result will then be like this:

If you apply this workaround, your content area will always start below the header area regardless of how many lines the main menu fills the header as the screen width decreases until the mobile menu will show up.

Also, you mentioned:

I believe you have misconstrued what was initially explained for the issue.

It was not mentioned that this happens for all themes but rather ‘By the theme’ meaning, X. So since this is a default setup for X, you will have to apply some workaround in order for your setup to display correctly.

Hope this sheds light on your questions about why you are having this display issue on your site.

Cheers!

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.