CODEWITHSUNDEEP
csstwitter-bootstrapnavbar
OcK
OcK

Reputation: 103

Changing max-height in bootstrap navbar

I wanted to change the max-height in the navbar in mobile version. This following code-snippet is in the bootstrap.css file

@media (min-width: 768px) {
   .navbar-fixed-top .navbar-collapse,
   .navbar-fixed-bottom .navbar-collapse {
     max-height: 340px;
   }
}

I have a custom .css file where I already successfully changed some properties of the navbar. To change the max-heigt from 340px to auto I wrote the following:

@media (max-width: 767px) {
.navbar-custom .navbar-nav .open .dropdown-menu > li > a {
  color: #DBFAFF
  }
 .navbar-custom .navbar-nav .open .dropdown-menu > li > a:hover,
 .navbar-custom .navbar-nav .open .dropdown-menu > li > a:focus  {
    color: #40F99B
  }
  .navbar-custom .navbar-fixed-top .navbar-collapse,
  .navbar-custom .navbar-fixed-bottom .navbar-collapse {
    max-height: auto;
  }
}

the first two changes are working.

And my in my HTML file is the following line:

<nav class="navbar-custom navbar navbar-inverse navbar-fixed-top ">

But this doesn't change the max-height to auto. When I'm changing the 340px in chrome inspect it does exactly what I want.

Does anyone know what the issue could be?

Upvotes: 0

Views: 1688

Answers (3)

Ali Hasani
Ali Hasani

Reputation: 165

Your CSS Selector is incorrect : you should delete the space character among .navbar-custom and .navbar-fixed-top !

and write : .navbar-custom.navbar-fixed-top

Upvotes: 0

OcK
OcK

Reputation: 103

So quick research found out that you can change these variable at this site: http://getbootstrap.com/customize/

@navbar-collapse-max-height

or else with LESS

Upvotes: 0

LKG
LKG

Reputation: 4192

Use height:auto; or use !important may be it's help you.

@media (max-width: 767px) {
.navbar-custom .navbar-nav .open .dropdown-menu > li > a {
  color: #DBFAFF
  }
 .navbar-custom .navbar-nav .open .dropdown-menu > li > a:hover,
 .navbar-custom .navbar-nav .open .dropdown-menu > li > a:focus  {
    color: #40F99B
  }
  .navbar-custom.navbar-fixed-top .navbar-collapse,
  .navbar-custom.navbar-fixed-bottom .navbar-collapse {
    max-height: auto;
    height:auto; /* Add this */
  }
}

Upvotes: 1

Related Questions