Docs

[ldollard]

Hi Guys,

When I shrink my page, there is a huge amount of blank space between the logo and the navbar, then furthermore the navbar gets pushed into my slider and dissapears before shrinking the page further and getting the mobile menu icon.

http://alchemy-of-eros.com/

Thats the site.

Can you tell me what i need to do to remove the extra space, so the logo either:

a) removes inline with the navbar
or
b) stacks, but stacks directly above without that huge blank space and the navbar being pushed into the slider area.

If you go to my site and resize the screen on a desktop, you’ll see what i mean.

thanks so much.

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> CSS :

@media (max-width:1301px) and (min-width:979px){
.x-navbar .x-nav-wrap .x-nav > li > a {
    letter-spacing: normal;
}
}
@media (max-width:1203px) and (min-width:1140px){
.x-navbar .desktop .x-nav > li > a {
    font-size: 12px;
}
}
@media (max-width:1140px) and (min-width:1090px){
.x-navbar .desktop .x-nav > li > a {
    font-size: 11px;
}
}
@media (max-width:1140px) and (min-width:1036px){
.x-navbar .desktop .x-nav > li > a {
    font-size: 10px;
}

}

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

}

Hope it helps.

[ldollard]

Hi Christopher,

Thanks for helping. That code helped to a point, but when the screen gets to

(min-width:1090px)

The menu does the same thing and the menu gets pushed into the slider. Only when its gets to

(min-width:980px) does it flip over to the mobile menu.

I think thats prob the most CSS can do, so an additional solution.

In addition the CSS you gave which does work, how do i force the theme to switch to the mobile menu at 1090px instead of 980px?

thanks so much

[Rue Nel]

Hello There,

Thanks for the updates!

To force the theme to switch to the mobile menu at 1090px, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

@media(max-width: 1090px){
  .masthead-inline .x-btn-navbar {
    display: block;
    float: right;
  }

  .x-nav-wrap.desktop {
    display: none;
  }

  .x-nav-wrap.mobile.collapse {
    display: none;
  }

  .x-nav-wrap.mobile.collapse.in {
    display: block;
  }
}

Please let us know how it goes.

[Author]

Posts