Docs

[Benjamin H]

1. On lvbaptist.org I am trying to get the logo and the nav button to look like this http://prntscr.com/cs4w57

However it looks on my phone like this http://prntscr.com/cs4x2w

2. Also, on the desktop version, the site when resized looks like this http://prntscr.com/cs4xca

I would like it to never look like this, but when it runs out of space to convert to the Nav Button

Thank you!
Benjamin

[Thai]

Hi There,

Please add the following CSS:

@media (min-width: 980px) and (max-width: 1200px){
    .x-navbar .desktop .x-nav>li>a:not(.x-btn-navbar-woocommerce) {
        padding-left: 0;
        padding-right: 0;
    }
}
@media (max-width: 400px){
    .x-brand img {
        width: 200px;
    }
}

Hope it helps 🙂

[Benjamin H]

Thank you! Unfortunately it’s still not working :-/

Any other suggestions?

[Jade]

Hi Benjamin,

Please try this code:

@media (min-width: 980px) and (max-width: 1037px) {
    .x-navbar .desktop .x-nav>li>a {
        margin-left: 0;
        margin-right: 0;
        font-size: 13px;
    }

    .x-brand {
        width: 25%;
    }

    .x-brand img {
        width: 100%;
    }
}

@media (max-width: 430px) {
    .x-brand {
        width: 80%;
    }
    
    .x-brand img {
        width: 100%;
    }
}

Hope this helps.

[Benjamin H]

1. Unfortunately the logo is still not becoming smaller to make room for the nav button

2. And as you can see from this screenshot, you can see that the nav bar is not turning into the nav button before dropping down a line… http://prntscr.com/ctc4r6

[Joao]

Hi There,

Add the following code instead:

@media (min-width: 769px) and (max-width:1250px) {
.x-navbar .desktop .x-nav>li>a:not(.x-btn-navbar-woocommerce) {
    padding-left: 5px;
    padding-right: 5px;
}

.x-brand img {
    width: 180px;
    margin-top: 20px;
}
}

Akternatively you can make your navbar turn into a button earlier if you prefer, in that case use the following code instead:

@media (max-width: 1250px) {
    a.x-btn-navbar {
        display: inline-block;
        float: right;
    }
   .x-nav-wrap.mobile.collapse.in {
      display: block;
    }
   .x-nav-wrap.desktop {
    display: none;
   }
}

Hope it helps

Joao

[Author]

Posts