Twitter Bootstrap Question posted in

How can I add breakpoint into menu depend on screen size with twitter bootstrap

I have a reddit like top menu. the thing is there are too many items. How I can add a hamburger menu if screen size is x size but I don’t want to take all the items into hamburger menu. just menu items which don’t fit the screen.

The menu expands like this if you change the screen size

enter image description here

and if you change the screen size to smaller size all the items hidden into hamburger menu.

For example on a particular screen size how can I hide search box and some items into hamburger menu? It doesn’t even have to add into hamburger menu. how I can hide them entirely.

I have tried this approach

@media (min-width: 769px) {
  .nav.navbar-nav > li {
    display: none;
  }
  .nav.navbar-nav > li:nth-child(1),
  .nav.navbar-nav > li:nth-child(2),
  .nav.navbar-nav > li:nth-child(3) {
    display: block;
  }
  .lt-ie9 .nav.navbar-nav > li:first-child,
  .lt-ie9 .nav.nav.navbar-nav > li:first-child + li,
  .lt-ie9 .nav.navbar-nav > li:first-child + li + li {
    display: block;
  }
}
@media (max-width: 790px) {
  .header-navbar .nav-icons,
  .header-navbar .nav.navbar-nav > li.nav-all {
    margin-right: 0px;
  }
  .header-navbar:after {
    display: none;
  }
}
@media (min-width: 899px) {
  .nav.navbar-nav > li:nth-child(4) {
    display: block;
  }
  .lt-ie9 .nav.navbar-nav > li:first-child + li + li + li {
    display: block;
  }
}
@media (min-width: 1200px) {
  .nav.navbar-nav > li:nth-child(5),
  .nav.navbar-nav > li:nth-child(6),
  .nav.navbar-nav > li:nth-child(7),
  .nav.navbar-nav > li:nth-child(8),
  .nav.navbar-nav > li:nth-child(9),
  .nav.navbar-nav > li:nth-child(10),
  .nav.navbar-nav > li:nth-child(11),
  .nav.navbar-nav > li:nth-child(12),
  .nav.navbar-nav > li:nth-child(13),
  .nav.navbar-nav > li:nth-child(14) {
    display: block;
  }
  .lt-ie9 .nav.navbar-nav > li:first-child + li + li + li {
    display: block;
  }
}
Tags:

2

Answers


  1. 0

    Assuming your html follows standard structure for a Bootstrap navbar:

    <ul class="nav navbar-nav">
    <li class="hideMe">Item</li>
    ...
</ul>

@media (max-width: 1280px) {
    .navbar-nav .hideMe {
        display: none;
    }
}
    Login or Signup to reply.
  2. 0

    Have something like this:

    * {box-sizing: border-box; padding: 0; margin: 0; list-style: none; font-family: 'Segoe UI';}
a {text-decoration: none;}

nav ul li {display: inline-block;}
nav ul li a {display: block; width: 100px; text-align: center; line-height: 1.5; padding: 5px; border: 1px solid #ccc;}

@media screen and (max-width: 460px) {
  li + li + li + li ~ li {display: none;}
}

@media screen and (max-width: 555px) {
  li + li + li + li + li ~ li {display: none;}
}

@media screen and (max-width: 640px) {
  li + li + li + li + li + li ~ li {display: none;}
}
    <meta name="viewport" content="width=device-width, initial-scale=1" />
<nav>
  <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
    <li><a href="#">Item 5</a></li>
    <li><a href="#">Item 6</a></li>
    <li><a href="#">Item 7</a></li>
    <li><a href="#">Item 8</a></li>
    <li><a href="#">Item 9</a></li>
    <li><a href="#">Item 10</a></li>
  </ul>
</nav>

    Check the example in the emulator view.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search