How to change the resolution for mobile menu switching

francus641

Hi all,

As you know the template has three different layouts depending on the resolution.
It start from the vertical menu with high resolution, at around 1680px it switch on to the horizontal top menu and finally at around 990px it switch to the mobile menu.

I'd like the transition to the mobile menu to occur at a higher resolution, for example 1100 px (instead of 990px), is this an issue that can be solved with custom css?

My problem is that the menu is too long and spans two lines if it switch at 990px.

Thanks in advance,

Francus

dominic

Hi francus641,

You can create the following folder and file: /templates/ja_mason/local/css/custom.css And add the following CSS code to this file:

@media (max-width: 1100px) {
    .navbar-collapse.collapse {
      display: none !important;
    }
  
    .t3-mainnav .t3-navbar-collapse.in {
      display: block !important;
      overflow: auto !important;
    }
        .navbar-toggle {
        display: block !important;
    }

    .navbar-nav .open .dropdown-menu {
        position:static;
        float: none;
        width: auto;
        margin-top: 0;
        background-color: transparent;
        border: 0;
        box-shadow: none
    }

    .navbar-nav .open .dropdown-menu > li > a,.navbar-nav .open .dropdown-menu .dropdown-header {
        padding: 5px 15px 5px 25px
    }

    .navbar-nav .open .dropdown-menu > li > a {
        line-height: 24px
    }

    .navbar-nav .open .dropdown-menu > li > a:hover,.navbar-nav .open .dropdown-menu > li > a:focus {
        background-image: none
    }
    
}

Hope this help!

francus641

dominic

Many thanks, it works perfectly!

Best regards

Francus