Mobile menu bar

Blocks
1

Hi

How do you force the bootstrap navbar to only show the mobile menu?

2

If you mean across all breakpoints, have a look through some of these about overriding via custom classes (or search similar). You could also do a custom build of Bootstrap if you wanted I suppose. But by overriding via custom classes, would perhaps offer easier flexibility if needed however.

3

Team effort on this one as I’m not taking any credit! but following what @Pinegrow_User posted, visit this link:

Copy and paste the following code into your notepad

@media (max-width: 2000px) {
    .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;
    }
}

save as mybootstrap.css

Open Pinegrow, load the stylesheet, attach the stylesheet and this should be the result

Selection_002.jpg1189×171 13 KB

There may be a simpler way to achieve this but you would need to explore further, however at least you have one solution.

4

Actually that css is quite useful as I haven’t needed to look into this until now but change this line to the px you want the hamburger menu to appear

 @media (max-width: 2000px)

So if you want the mobile menu to appear at 1000px, just change the value, which is useful for when you have a crammed nav bar.

5

@Pinegrow_User weird when I click the link you posted it just loads the google homepage but no search results! What sort of crazy magic is that! When I hover over the link I can see what the url is meant to be but it just refuses to load!

6

@Paul there’s some info about it here as well Bootstrap Navbar

1 Like
7

Thank you, I’ll give that a shot.