Docs

[Nuera]

Perhaps you can help me. I’ve tried every format to increase my mobile nav text size, but I just cannot get it to work. Here are all the formats I have tried so far, unsuccessfully:

.x-navbar .x-navbar-inner .x-nav-collapse .sub-menu a{
font-size:1.5rem;
}

@media (max-width: 979px) {
    .x-navbar .x-navbar-inner .x-nav-collapse a{
       font-size:1.5rem!important;
    }
}

@media (max-width: 979px) {
    .x-navbar .mobile .x-nav li>a {
       font-size:15px !important;
    }
}

ul.sub-menu li a {
font-size: 20px;
}

@media screen and (max-width: 480px) {
   ul.sub-menu li a { font-size: 18px; }
}

[Nuera]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for writing in! Here goes the right selector for mobile menu and submenu :

.x-navbar .mobile .x-nav li > a {
  font-size: 18px;
}

.x-navbar .mobile .x-nav .sub-menu a {
  font-size: 16px;
}

Hope this helps.

[Thai]

Hi There,

Please try with this CSS instead:

@media (max-width: 979px){
    .x-navbar .x-nav-wrap .x-nav > li > .sub-menu a {
        font-size: 18px;
    }
}
@media (max-width: 767px){
    .x-navbar .x-nav-wrap .x-nav > li > .sub-menu a {
        font-size: 16px;
    }
}
@media (max-width: 480px){
    .x-navbar .x-nav-wrap .x-nav > li > .sub-menu a {
        font-size: 14px;
    }
}

Hope it helps 🙂

[Nuera]

This reply has been marked as private.

[Rad]

Hi there,

I don’t see it added on that site, and you also added a javascript within your custom CSS.

Please remove this

/*  Prevent Scroll on Lightbox Form  */
$('a.x-btn.x-btn-rounded.x-btn-large.lightbox-selector').on('click', function( e ){ alert('test');
$('html, body').stop();
});

Thanks!

[Nuera]

I had removed the code because it wasn’t working. I have added it now if you’d like to check it again.

Thanks for catching the script I had accidentally left in there!

[Rue Nel]

Hello There,

Thanks for the updates! The code is not working because you are referring to the submenu and there is none on the page. Please update the code and use this instead:

@media (max-width: 979px){
    .x-navbar .x-nav-wrap .x-nav > li > a {
        font-size: 18px;
    }
}
@media (max-width: 767px){
    .x-navbar .x-nav-wrap .x-nav > li > a {
        font-size: 16px;
    }
}
@media (max-width: 480px){
    .x-navbar .x-nav-wrap .x-nav > li > a {
        font-size: 14px;
    }
}

Hope this helps. Please let us know how it goes.

[Nuera]

That did the trick, thanks so much!

[Joao]

Glad to hear it,

Let us know if we can help with anything else.

Joao

[Author]

Posts