How to Increase Bootstrap 3 Navbar Height While Keeping Menu Height Small When Collapsed

How to increase Bootstrap 3 Navbar height while keeping menu height small when collapsed

I finally developed a solution myself. You have to create a media query that keeps the line height of the collapsing menu at 20px for screen widths up to 767px. The following CSS in my style.css overrides the boostrap.css and solved my problem:

.navbar-fixed-top {
    min-height: 80px;
}

.navbar-nav > li > a {
    padding-top: 0px;
    padding-bottom: 0px;
    line-height: 80px;
}

@media (max-width: 767px) {
    .navbar-nav > li > a {
    line-height: 20px;
    padding-top: 10px;
    padding-bottom: 10px;}
}

bootstrap 4 change navbar height causing navbar items to not be vertically centered

So I figured I would address a few things here but first as to your question. If you just want to change the height of the navbar instead of adding a specific height to the nav you could just add extra padding to the navbar to give you your desired height and then you wouldn't have to change a bunch of css throughout the rest of the navbar. So doing this should give the navbar a height of 70px.

.navbar{padding:1rem}

Here is a fiddle of everything I address in this post in action Fiddle Demo

In this fiddle demo I have also added some responsive styles for stacking the navbar links at your collapse width.

Next If you are going to set a background color to the nav there is no reason to use the bg-faded class to the nav as this just gives you the background color for the nav so you can remove that class from your nav.

Then I see in your classes for your nav links you have a white-text class. If you want white text for your navbar your can just use the class of navbar-dark and this will give you lighter text for the navbar instead of using navbar-light. Just figured I would point that out.

Next In bootstrap 4 there is no navbar-header class so this is not necessary unless you are planning on custom styling something here. And the navbar-toggler button is different in bootstrap 4 there are no icon-bar spans they just use the html code for this now ☰

Note: Addressing a huge pet peeve of mine you have h5 tags in your navbar. Not sure why this is but I see people doing this a lot. H tags are supposed to be used in order from h1 down to h6 and are supposed to be directly related to the page that you are on and not for the entire site. If you have a good reason for this practice then by all means keep them there but I am not sure why I see people do this all of the time. To me it is a bad practice just figured I would address this.

Collapse navbar on all size except large

Just use media query with overriding the navbar css class as follows to keep them in collapsed mode till max size 1200px. Add the following css rules within a css file and make sure to add this custom css file right after the bootstrap css file link in the head tag.

/*To keep the navbar collapsed on less or equal to 1200px screens size*/
   @media (max-width: 1200px) {
     .navbar-header {
          float: none;
      }

     .navbar-toggle {
          display: block;
      }

     .navbar-collapse {
          border-top: 1px solid transparent;
          box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
      }

     .navbar-collapse.collapse {
          display: none!important;
      }

     .navbar-collapse.collapse.in {
          display: block !important; 
      }

     .navbar-nav {
          float: none!important;
          margin: 7.5px -15px;
      }

     .navbar-nav > li {
          float: none;
      }

     .navbar-nav > li > a {
          padding-top: 10px;
          padding-bottom: 10px;
      }
  }

Sample code: http://codepen.io/Nasir_T/pen/jVaQyX

Change bootstrap navbar collapse breakpoint without using LESS

You have to write a specific media query for this, from your question, below 768px, the navbar will collapse, so apply it above 768px and below 1000px, just like that:

@media (min-width: 768px) and (max-width: 1000px) {
   .collapse {
       display: none !important;
   }
}

This will hide the navbar collapse until the default occurrence of the bootstrap unit. As the collapse class flips the inner assets inside navbar collapse will be automatically hidden, like wise you have to set your css as you desired design.

Bootstrap Navbar height as logo

As simple as that: add this line near including boostrap.min.css

<link rel="stylesheet" href="css/style.css">

Create a new file named style.css in css folder, and add this lines in it.

.navbar-default .navbar-nav>li>a  {
    padding: 20px 15px 20px 15px;
}
.navbar-default .navbar-brand {
    padding-top: 0px;
}

I've tested it and worked for me 100%.

Adjust navbar minimum height depending on screen width

Does it work by using "media all" ?

I don't think this css is wrong, the menu should be 30px from 0 to 768px then 150px

If this doesn't work try setting the size explicitly

@media only screen and (max-width: 768px) {
    .navbar-min-height{
        min-height: 30px;
    }
} 

@media only screen and (min-width: 768px) {
    .navbar-min-height{
        min-height: 150px;
    }
} 

How to keep navigation bar collapsed on all screen sizes?

The answer suggested by tao worked at 60% but not all the way for me. Here I share what finally did it for me. In my custom.css I override bootstrap with custom rules

custom.css

@media (min-width: 768px) {
  .navbar .navbar-header,
  .navbar .navbar-nav>li {
    float: none;
  }
  .navbar .navbar-nav {
    float: none;
    margin: 7.5px -15px;
  }
  .navbar .navbar-toggle {
    display: block;
    margin-right: 0;
  }
  .navbar .navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  .navbar .navbar-collapse.collapse {
    display: none;
  }
  .navbar .navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .navbar .navbar-text {
    float: none;
    margin: 15px 0;
  }
  .navbar .navbar-collapse.collapse.in {
    display: block;
  }
  .navbar .collapsing {
    overflow: hidden;
  }
}

I had to comment out this line in bootstrap.min.cs to make it all work :

  .navbar-collapse.collapse {
    /* display:block!important;*/
     height:auto!important;
     padding-bottom:0;
     overflow:visible!important
    }

---

Related Topics