CODEWITHSUNDEEP
jquerycsstwitter-bootstrap
Thomas McNish
Thomas McNish

Reputation: 45

How to customize collapsed menu in Bootstrap

So I have a navbar that I'm making with Bootstrap. I used a border underneath the hover menu elements, so you get the effect of a line appearing underneath the menu item as you hover over it. But I'm having a couple problems with the collapsed version of my menu.

1) The border won't go away in my vertical collapsed menu. It looks ridiculous.

2) The li elements look shitty on a tablet. They appear in-line still, and they bump up against the logo in the left corner of the page (which is an image that can't be seen in my codeply link).

I basically want to know how to customize JUST the collapsed menu, or the vertical menu, but I can't seem to find much on the subject. Here's a codeply, so you can see what I'm talking about.

http://www.codeply.com/go/TI1k70CPFm

Upvotes: 4

Views: 1662

Answers (1)

Robin Carlo Catacutan
Robin Carlo Catacutan

Reputation: 13679

The issues happen because you are triggering the toggle menu on 991px and below using css where by default bootstrap toggle menu triggers during 767px and below.

To fix that we need to set custom styles to work also during 991px and below.

1) The border won't go away in my vertical collapsed menu. It looks ridiculous.

@media (max-width: 991px) {
    .navbar-default .navbar-nav > li > a:hover::after,
    .navbar-default .navbar-nav > li > a:focus::after {
        display: none;
    }
}

2) The li elements look shitty on a tablet. They appear in-line still, and they bump up against the logo in the left corner of the page (which is an image that can't be seen in my codeply link).

@media (max-width: 991px) {
  .navbar-nav {
    margin: 7.5px -15px;
    width: 100%;
    float: none !important;
  }

  .nav>li {
    position: relative;
    display: block;
    float: none;
  }
}

Putting together in media query max 991px

@media (max-width: 991px) {
  .navbar-nav {
    margin: 7.5px -15px;
    width: 100%;
    float: none !important;
  }

  .nav>li {
    position: relative;
    display: block;
    float: none;
  }
  .navbar-default .navbar-nav > li > a:hover::after,
  .navbar-default .navbar-nav > li > a:focus::after {
    display: none;
  }
}

Codeply

Upvotes: 2

Related Questions