NavBar / Header cutting off half of screen at certain screen size

Support
#1

My NavBar/Header is cutting off half of the screen when it reaches a specific screen dimension. As shown on the picture of a normal ipad in landscape mode it takes away half of the screen along with the sticky side menu icons. I keep the NavBar sticky on desktop and mobile so people see it all the time.

It also does this on small screens such as 13 inch or 15 inch laptops with 1080 resolution. This is a problem because sometimes you don’t see the header on some pages or other important info at the beginning. Everything looks fine when I edit the page in X and try all 4 different screen sizes/devices. It’s a different matter using the actual device though.

What’s the best way to circumvent this?

MicrosoftTeams-image
MicrosoftTeams-image1920×2560 453 KB

#2

Hello Ivee,

That happens because at some point the space for the header area is not enough to accommodate the site’s logo and the menu items in one line that is why the menu items fall below the logo.

A workaround would be to adjust the text side of the menu items in some devices width accordingly to have them display in one line.

These codes should help you get started:

@media (min-width: 1175px) and (max-width: 1318px) {
    .x-navbar .desktop .x-nav > li > a {
        font-size: 15px;
    }

    .masthead-inline .desktop .x-nav {
        float: right;
    }
}

@media (min-width: 1022px) and (max-width: 1174px) {
    .x-navbar .x-container {
        width: 95%;
    }

    .x-navbar .desktop .x-nav > li > a {
        font-size: 13px;
    }
}

@media (min-width: 980px) and (max-width: 1021px) {
    .x-navbar .desktop .x-nav > li > a {
        font-size: 11px;
    }

}

Please add the code above in X > Theme Options > CSS:

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

#3

Thank you very much! I will look into it with a developer since this is more advance for my knowledge.

#4

You’re always welcome Ivee!

Cheers.

#5

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