CODEWITHSUNDEEP
csstwitter-bootstrap
black_reaver
black_reaver

Reputation: 19

bootstrap navigation modification

I'm trying to modify a bootstrap navigation bar and every time I try to modify the CSS with my own it doesn't seem to take. I have a hamburger menu icon that I only want to appear in mobile so I modified the in my CSS to display:none; for media queries over 769px and display:inline; for displays under 768px. The button still appears on desktops. HTML:

<nav class="navbar navbar-toggleable-sm navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-left" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="glyphicon glyphicon-menu-hamburger"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="index.html">HOME<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="pages/about.html">ABOUT</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="blog.php">BLOG</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="pages/video.html">VIDEOS</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="pages/photos.html">PHOTOS</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="pages/podcasts.html">PODCASTS</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="pages/recaps">RACE RECAPS</a>
      </li>
     </ul>
    </div>
    <div id="logo">
    <a class="navbar-brand" href="#">LOGO</a> 
    </div>
    </nav>

The CSS:

@media screen and (min-width 769px) {
button .navbar-toggler .navbar-toggler-left {
    display:none;
}
}
@media screen and (max-width 768px) {
button .navbar-toggler .navbar-toggler-left {
    display:inline;
}
}

Note: I've tried the CSS without the "button" and just the classes as well. I've also tried wrapping the button in a div as well, no luck.

Upvotes: 0

Views: 72

Answers (2)

Martin Tuck
Martin Tuck

Reputation: 64

Here is working example

Spaces look for descendants left to right.

Unless you are using .navbar-toggler somewhere else it is unnecessary to add every class of the element

@media screen and (min-width: 769px) {
     .navbar-toggler {
        display: none;
    }
}

@media screen and (max-width: 768px) {
     .navbar-toggler {
        display: inline;
    }
}

Upvotes: 0

Dan Soper
Dan Soper

Reputation: 678

The css class selectors shouldn't have spaces if they refer to the same element:

@media screen and (min-width 769px) {
button.navbar-toggler.navbar-toggler-left {
display:none;
}
}
@media screen and (max-width 768px) {
button.navbar-toggler.navbar-toggler-left {
display:inline;
}
}

Edit

Also add the colons in min-width: 769px and max-width: 768px.

Upvotes: 1

Related Questions