Change the breakpoint (breakpoint) of the navbar

Asked

Viewed 1,741 times

1

I have a navbar that works with Collapse, so when in lower resolution the menu is grouped and appears only when clicked. Anyway, is there any way that I can change the navbar breakpoint only so that this effect occurs in another higher resolution? I tried to change in bootstrap.css where I had the same reference, but I didn’t get any results.

css3 responsive-layout bootstrap-3 nav-bar breakpoints

3 answers

1


Change the max-width according to the desired. 

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

Source: Bootstrap 3 - navbar Collapsible until 990px

Example: Bootply

  • I tried to change the above items, but I got no result. Here the break points came with min-width:768px. I switched to max width (with the resolution I want) but did not resolve.

  • Mine, when I click, it opens when I click, but then it closes.

  • Mine’s the same way, someone knows how to fix?

  • @Fabiosouza You made it?

  • Solves the problem of screen resolution, but usability is useless because as said @Fabiosouza clicks and opens, but then closes.

0

Much simpler than I thought,

Open the bootstrap.css file, and using the preferred IDE just apply a "replace all" to the following strings:

@media (min-width:768

Trade in for

@media (min-width:990

Then the application responsiveness will be applied when the screen reaches 990px

Using the phpStorm IDE: Utilizando a IDE phpStorm

0

I know this doesn’t directly solve the problem presented, but it really doesn’t seem like a good idea to have specific breakpoints for just one component when it’s usual for all the layout to follow them. Specifically Bootstrap 3 has variables that deal with it and you can generate a custom build. Otherwise, the best approach is Rafael Barbosa, applying an extra CSS styles as a patch on the Bootstrap rules.

Browser other questions tagged css3 responsive-layout bootstrap-3 nav-bar breakpoints

You are not signed in. Login or sign up in order to post.