change navbar collapse breakpoint

  • Resolved phillystyle123

    (@phillystyle123)


    9 years, 5 months ago

    Nice theme. I am running into a brick wall attempting to change the navbar collapse breakpoint. I need the pancake menu to display on tablets for this page: https://cjehost.com/ncjwla3/. I did have some luck by adding this to my custom stylesheet – but now my pancake menu only drops down for a split second before hiding again. 

    @media (max-width: 768px) {
    .navbar-header {
        float: none !important;
    }
    .navbar-toggle {
        display: block !important;
    }
    .navbar-collapse {
        border-top: 1px solid transparent !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }

    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px !important;
    }
    .navbar-nav>li {
        float: none !important;
    }
    .navbar-nav>li>a {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
}
Viewing 1 replies (of 1 total)
  • Theme Author Tim Nicholson

    (@timnicholson)

    It looks like you’ve changed your site since this post. Sorry for taking too long to reply. The breakpoints are set by Bootstrap and its generally easiest to alter the menu items or the spacing between menu items to get them to fit. Or for my website, I changed the size of the site title so it all works better on a tablet. Or you could change the font size of the menu items.

    I’ve not dug into how to alter Bootstrap’s breakpoints for the nav menu. That code is really, really complex and I’m using Bootstrap for compatibility with multiple browsers, so I don’t really want to alter it.

Viewing 1 replies (of 1 total)
  • The topic ‘change navbar collapse breakpoint’ is closed to new replies.