0

enter image description hereI am working on a navbar using Bootstrap. I need the toggleable button and the nav-items on my screen when the screen is greater than 990 resolution. So I tried to remove the navbar-toggleable-md class from the nav doing this brings me the button but hides the nav-items.

Is there any way to show both the toggleable button and the nav-items?

 <nav class="navbar navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-left" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Navbar</a>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>
            <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
            <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="text" placeholder="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
    </div>
</nav>
Rehan
  • 3,813
  • 7
  • 37
  • 58
  • Are you asking to show it before click? I pasted your code into a codepen and the nav-items are showing after clicking on the hamburger button just fine. – Eric G Jan 17 '17 at 17:41
  • I need the nav-items before clicking. – Rehan Jan 17 '17 at 17:42
  • What's the point to have nav items AND nav toggler visible at a time? – max Jan 17 '17 at 17:47
  • I want to show only the button and the Brand name at first, then when the user clicks the button I will show them the nav-items which will open up horizontally. Hope you get my point @makshh – Rehan Jan 17 '17 at 17:50
  • Ok, now I'm confused... You said you need the nav-items before clicking but then you said you only want the button at first and then after click the button show the nav-items... I think I might be missing something. – Eric G Jan 17 '17 at 17:55
  • @EricG ,check out the sketch. That should make you understand better. – Rehan Jan 17 '17 at 17:59
  • Ok I understand, but for that you will need some custom code (CSS and JavaScript). With pure Bootstrap you can't do that. – max Jan 17 '17 at 17:59
  • oh,some quicks tips can be helpful here @makshh – Rehan Jan 17 '17 at 18:00
  • This is bootstrap 3 but it should solve your issue. You have lots of custom coding to do. http://stackoverflow.com/questions/24832110/button-toggle-horizontal-with-bootstrap – Eric G Jan 17 '17 at 18:05

1 Answers1

0

Here you have a quick example, you can start with something like this:

HTML:

<nav class="navbar navbar-toggleable-md navbar-light bg-faded my-navbar">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

CSS:

@media (min-width: 992px) {
  .my-navbar.navbar-toggleable-md .navbar-toggler {
    display: block;
  }
  .my-navbar.navbar-toggleable-md .navbar-collapse {
    display: none !important;
    transition: none;
  }
  .my-navbar.my-navbar-opened.navbar-toggleable-md .navbar-collapse {
    display: -webkit-box!important;
    display: -webkit-flex!important;
    display: -ms-flexbox!important;
    display: flex!important;
  }
}

JS:

$('.navbar-toggler').click(function() {
  $('.my-navbar').toggleClass('my-navbar-opened')
});

CODEPEN

max
  • 8,632
  • 3
  • 21
  • 55