Make Menu Button Appear Sooner

Sparkling
1

How do I make the menu button appear at 992px, instead of 768px?

2

Hi @packerlandwebsites,

I hope you are well today and thank you for your question.

You can try achieving this by adding the following CSS code in the Custom CSS option of the latest version of Sparkling theme on the below path.

Admin Area -> Appearance -> Customize -> Sparkling Options -> Other -> Custom CSS

@media (min-width: 768px){
.navbar-toggle {
    display: block;
}
.navbar-collapse.collapse {
    display: none!important;
}
.navbar-header {
    float: none;
}
}
@media (min-width: 992px){
.navbar-toggle {
    display: none;
}
.navbar-collapse.collapse {
    display: block!important;
}
.navbar-header {
    float: left;
}
}

Best Regards,
Movin

3

@movin
This almost works. The button displays at the right time, but when it’s click on between the sizes of 768px and 992px, the menu displays, and just as quick disappears. Here is the site: http://341.f47.myftpupload.com/

4

The code is just to display the button, if you want to also make mobile menu work till the screen size 992px then you have to develop more custom code.

Developing custom code for custom functionality is beyond the scope of support that we provide here.

If you are not a developer then you can consider hiring a developer to develop it for you. You can hire a developer from any freelance site. Colorlib recommends the developer https://www.upwork.com/freelancers/~011652ffec8865c6d5

5

Just in case someone else is interested in doing the same, here is the css needed to display the mobile navigation at 992px.

@media (max-width: 992px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }
}
6

Thanks for sharing it here in this forum.

Your help here is really appreciated.