Docs

[powrider686]

Hello,
On my site, filanthrope.wpengine.com, I’m having some problems with how the navbar displays on different size screens.

On my laptop (Retina Macbook) all looks good, by on my clients laptop(Macbook) and iPad, the navbar and logo are on two different levels, and don’t resize properly, nor does the menu show a mobile menu on the tablet in landscape mode.

I attached two screenshots so you could see what I’m seeing. Those are both from a laptop.

How can I make it resize only as small as can fit on one line, then it turns to the mobile menu? I’d like for it to be seamless between the two, and not display all of the white space.

Thanks for the help!

[powrider686]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for providing the information. To adjust the menubar when viewed on a smaller screen, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

@media(min-width: 980px) and (max-width: 1300px){
    .site .x-navbar .desktop .x-nav>li>a>span {
        padding: 5px 7px !important;
        font-size: 11px;
    }

    .site .x-brand img{
        width: 180px;
    }
}

Please let us know if this works out for you.

[powrider686]

Thanks for the help!

I put in that code but it doesn’t seem to be helping. There are actually some problems on the computer now as well.

I have attached screenshots so you can see what I’m seeing. It appears to cut off on full screen view on the laptop and all other viewport sizes.

Also the prompt elements of Cornerstone are cutting off as well. I attached a screenshot of that too.

Thanks, I appreciate it!

[Jade]

HI there,

Please try this code:

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

Hope this helps.

[powrider686]

Replacing the other code?

[powrider686]

I replaced the first part of the other code, it didn’t seem to change anything. Then I deleted the .site .x-brand part and that didn’t seem to change anything.

Here is what is currently in the global css customizer:
.x-navbar {
background-color: #ffffff;
}
.x-topbar {
background-color: #d0db97;
}
footer..x-colophon.top, footer.x-colophon.bottom {
background-color: #7b6b43;
}
.x-nav-tabs, .x-nav-tabs > li {
border: none;
}

/* Active Tab Menu */

.x-nav-tabs > .active > a {
-webkit-box-shadow: none;
box-shadow: none;
background: #3a7d44;
color: white;
}

/* Active Tab Menu Hover */

.x-nav-tabs > .active > a:hover {
background: #69b578;
color: white;
}

/* Inactive Tab Menus */

.x-nav-tabs > li > a {
background: #d0db97;
color: #ffffff;
}

.x-nav-tabs > li > a:hover {
color: #3a7d44;
}

/* Transparent Tab Content Background */

.x-tab-content {
border: none;
background: transparent;
}
@media (min-width: 979px) and (max-width: 1057px) {
.x-navbar .x-navbar-inner .x-container {
width: 95%;
}
}

Thanks for the help!

[Rue Nel]

Hello There,

Thanks for posting the code. Just an explanation why your navbar is in two rows. That is because the width of your logo plus the width of the menu is more than the site container width which is up to 1200 pixels. If you want to have an inline logo and a menu, please rearrange your menu by having at least 4 parent menu items and the others can be as a sub menu. The second issue was cause by the navbar top height. You have set it in the customizer with 100 pixels only and because there are two rows, the height is already 200 pixels covering the top of your page. If you just want to use the current navbar setting (with the logo and menu in different rows) but resolve the content behind the navbar, please go to the customizer, Appearance > Customize > Header > Navbar and set the “Navbar Top Height (px)” to 200 pixels. “Navbar Top Height (px)” must still be set even when using “Fixed Left” or “Fixed Right” positioning because on tablet and mobile devices, the menu is pushed to the top.

Hope this helps.

[powrider686]

Got it. Thanks for the explanation on that. I knew it was along those lines but couldn’t quite get it.

One more piece of that explanation: Is the menu font sized fixed, is that what is determining how big each menu item is? I was guessing that those font sizes and the size of the menu items would get a bit smaller as you resized and that the menu items would resize until they turned to the mobile menu but that doesn’t seem to be the case.

Thanks for the help and explanation!

Marcus

[Christopher]

Hi there,

Menu items font size is fixed and it won’t get resized on different screen sizes. If you want to change its size you should use media query rule.

e.g:

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

Thanks.

[Author]

Posts