Docs

[Simon T]

Hey guys, my website snaposweb.com.au looks fine on a computer, but on my Mac the Navbar items are dropping off. Any suggestions?

[Rupok]

Hi there,

Thanks for writing in! You can add this under Custom > CSS in the Customizer.

@media only screen and (min-width: 980px) and (max-width: 1500px) {
.x-brand img {
  width: 350px;
}

.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
  font-size: 14px;
  padding-left: 10px;
  padding-right: 10px;
}

.x-navbar .desktop .x-nav > li > a {
  padding-top: 45px;
}
}

@media only screen and (min-width: 980px) and (max-width: 1169px) {
.x-brand img {
  width: 220px;
}
}

Hope this helps.

[Simon T]

Hi Rupok,

That did help, but not quite there. Please see screenshot below:

http://prnt.sc/c4o3y9

[Rupok]

Hi there,

It seems you are checking below the screen size 1024px. Let’s add this as well then :

@media only screen and (min-width: 980px) and (max-width: 1023px) {
.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
  font-size: 12px;
}
}

Hope this helps.

[Simon T]

This reply has been marked as private.

[Christopher]

Hi there,

Please update this code :

@media only screen and (max-width: 1500px) and (min-width: 980px){
.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
    font-size: 14px;
    padding-left: 10px;
    padding-right: 10px;
}
}

To :

@media only screen and (max-width: 1500px) and (min-width: 980px){
.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
    font-size: 13px;
    padding-left: 10px;
    padding-right: 10px;
}
}

Hope it helps.

[Simon T]

Hi Christopher,

Nope, still doesn’t work. Surely there is a way to have the header scale to any size?

[Paul R]

Hi Simon,

This method will require a lot of adjustments and media queries.

What we can do is to make the mobile button appear earlier.

Kindly replace the codes provided above with this.

@media (max-width: 1575px) {
.x-nav-wrap.desktop {
    display:none;
}

.masthead-inline .x-btn-navbar {
    display: block;
    float: right;
}
.x-nav-wrap.mobile {
   display:block;
}

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

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

Hope that helps.

[Author]

Posts