Prevent Menu from Collapsing in 768Px Display CSS Media Query

Prevent menu from collapsing in 768px display CSS media query

You'll want to read up the section: Using the media queries at the bootstrap site:
http://getbootstrap.com/2.3.2/scaffolding.html#responsive (Bootstrap 2.3.2)
http://getbootstrap.com/getting-started/#disable-responsive (Bootstrap 3)

You'll want to use the relevant media queries to override the styles bootstrap adds when your viewport shrinks.

  // Landscape phones and down
  @media (max-width: 480px) { ... }

  // Landscape phone to portrait tablet
  @media (max-width: 768px) { ... }

  // Portrait tablet to landscape and desktop
  @media (min-width: 768px) and (max-width: 980px) { ... }

  // Large desktop
  @media (min-width: 1200px) { .. }

If you don't want the navbar to collapse, remove the 'collapse' from the class name. You should probably get rid of:

<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

In short, have a look over the docs, there's a section covering this exact thing titled 'Optional responsive variation' here:
http://getbootstrap.com/2.3.2/components.html#navbar (Bootstrap 2.3.2)

Bootstrap Hide drop-down items & keep minimal Navbar based on media query

@media (max-width: 768px) {
 .navbar ul.dropdown-menu, .navbar li.dropdown b.caret {
   display: none;
 }
}

This will hide the drop-down menus for screens less than 768px.

Through other code drop-down opens on hover (rather than click) allowing me to use the click to redirect to page when media query hides the menu items.

Remove text and only leave icon under @media(min-width: 768px)

Add a span tag around your text, and make it display: none in a media query, such as @media (max-width: 768px).

HTML:

<div>
  <div class="d-flex flex-row text-white align-items-stretch text-center">
    <div class="port-item p-4 bg-primary" data-toggle="collapse" data-target="#home">
      <i class="fa fa-home d-block"></i> <span class="item-label">Home</span>
    </div>
    <div class="port-item p-4 bg-success" data-toggle="collapse" data-target="#resume">
      <i class="fa fa-graduation-cap d-block"></i> <span class="item-label">Resume</span>
    </div>
    <div class="port-item p-4 bg-warning" data-toggle="collapse" data-target="#portfolio">
      <i class="fa fa-folder-open d-block"></i> <span class="item-label">Portfolio</span>
     </div>
     <div class="port-item p-4 bg-danger" data-toggle="collapse" data-target="#contact">
       <i class="fa fa-envelope d-block"></i> <span class="item-label">Contact</span>
     </div>
  </div>
</div>

CSS:

@media (max-width: 768px) {
  #main-header .port-item {
    width: 25%;
  }
  #main-header .port-item .fa {
    font-size: 1em;
  }
  .map-responsive {
    margin-top: 15px;
  }
  #main-header .port-item .item-label {
    display: none;
  }
}

Change bootstrap navbar collapse breakpoint without using LESS

You have to write a specific media query for this, from your question, below 768px, the navbar will collapse, so apply it above 768px and below 1000px, just like that:

@media (min-width: 768px) and (max-width: 1000px) {
   .collapse {
       display: none !important;
   }
}

This will hide the navbar collapse until the default occurrence of the bootstrap unit. As the collapse class flips the inner assets inside navbar collapse will be automatically hidden, like wise you have to set your css as you desired design.

navbar dropdown menus display issue on mobile and small devices with media query

here is your fiddle just remove default style dropdown

jsfiddle.net/qxgy6L9b/18/

How to make the menu collapsible in tablet mode (min-width: 768px) and (max-width: 991px)?

if you want to collapse bootstrap nav from 991px, you can add some CSS to make what you needed. Here is an example of custom breakpoint for the bootstrap navbar. Hope it helps.

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

Bootstrap navbar collapse media-query on custom width

You can change the collapse point in 3.1 like this..

@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;
    }
}

http://www.bootply.com/120951

---

In Bootstrap 4, changing the breakpoint is easier. See this answer

---

Related Topics