Docs

[johnpromotes]

This reply has been marked as private.

[Paul R]

Hi,

To fix it, you can add this under Custom > Edit Global CSS in the Customizer.

body .x-navbar {
   padding-bottom:0;
}

body .x-brand.img {
   padding-top:10px;
}

body .x-navbar .desktop .x-nav > li > a {
    padding-top: 25px !important;
    padding-bottom: 20px;
    line-height: 25px;
    height:auto !important;
}

Hope that helps.

[johnpromotes]

Hey there,

yes it worked and thank you very much!! lastly, when inserting this new code, the logo is not centered vertically when viewed on a mobile device.. I tried a few variations of .x-btn-navbar code for the image but no success.

thanks again for all your help.

[Joao]

Hi There,

Please add the following code to Appereance > Customizer > Custom > CSS

@media (max-width: 480px) {
.x-brand img {
    padding-top: 10px;
}
}

Hope that helps

Joao

[johnpromotes]

Hello there,

thank you very much.. that did the trick.. I realized tho that I had not checked the site with a laptop or ipad… I just did and I see that the logo and menu items do not line up as they should when compared to a desktop with a wider screen, or a mobile device with a smaller screen.. my apologies for not checking earlier… can you please help me with this last edit..thank you again for all of your help.

[Joao]

Hi There,

Please add the following code to Appereance > customizer > Custom > CSS

@media (max-width: 1240px) {
.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
    padding-right: 10px;
}
.x-navbar .desktop .x-nav > li > a > span {
font-size: 21px;
}
}

Hope that helps

Joao

[johnpromotes]

Hey there,

I am sorry, not sure if it worked.. if you look at my site now on a laptop or even a desktop and take the cursor and shrink the image size, you will see that the navbar stacks the logo on top of the menu items. This same effect can be see with an ipad… when you open the page it looks fine, but when you tilt the ipad to its side the logo goes on top of the menu items.. I added this code to the custom css but it didnt help.. I added this code because maybe I thought there were too many menu items on the navbar and that was causing the issue.. the code worked, but the i had some space to the right of the navbar i didnt want … i then tried to add the social media icons but that too didnt work. What do you recommend is the best course of action… taking one menu-item out and adding the social media icons, or can we add a code to the current navbar so that the look doesnt change when shrinking the image size???

.masthead-inline .desktop .x-nav {
display: block;
float: left;
}

thanks again for all your help.

[Paul R]

Hi,

We can make the mobile button appear earlier.

You can add this under Custom > Edit Global CSS in the Customizer.

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

.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 !important;
}
}

Hope that helps.

[Author]

Posts