CODEWITHSUNDEEP
csstwitter-bootstrap
Case
Case

Reputation: 281

bootstrap navbar height issue

I have a bootstrap nav fixed top with height of 120px, the nav itself looks as I want. but when it goes mobile size the links are the same height as the nav bar. I cannot figure out what I am missing..

.navbar {
    background-color: rgba(0, 0, 0, .6);
    box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, .1);    
    min-height:120px !important;    
}

.navbar-nav > ul, li {
    padding: 0px 15px;  
}

.contain-pull{
    max-width: 93%;
    margin: 0 auto 0 auto;
}

.navbar-nav > li > a, .navbar-brand {
    padding-top:50px !important; 
    padding-bottom:0 !important;
    height: 120px;  
}

.navbar a {
    color: #fff !important;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 300px;
    font-family: 'Oswald', sans-serif;  
    text-decoration: none;
}

.navbar a:hover{
    color:#258faf !important;
}

.navbar {
    border: 0px;
}

.logo {
    display: block; 
    text-decoration: none;
    max-height: 95px;
    margin: 12px 0px 0px 0px;   
    width: auto;
}

@media (max-width: 960px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
        margin-top: 40px;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }
}

Upvotes: 0

Views: 2223

Answers (2)

vanburen
vanburen

Reputation: 21663

You can simple place your link rules inside of a media query:

@media (min-width: 960px) {
  .navbar.navbar-tall .navbar-nav > li > a {
    padding-top: 50px;
    padding-bottom: 0;
    height: 120px;
  }
}

This example keeps the link height at the default settings once the navbar has collapsed.

Working Example: Open Example with FullPage and reduce the browser size.

.navbar.navbar-tall {
  background-color: rgba(0, 0, 0, .6);
  box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, .1);
  min-height: 120px;
  border: 0px;
}
.navbar.navbar-tall .navbar-nav > li > a {
  color: #fff;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 300px;
  font-family: 'Oswald', sans-serif;
  text-decoration: none;
}
.navbar.navbar-tall .navbar-nav > li > a:hover {
  color: #258faf;
}
.navbar.navbar-tall .navbar-brand {
  padding-top: 50px;
  padding-bottom: 0;
  height: 120px;
}
@media (min-width: 960px) {
  .navbar.navbar-tall .navbar-nav > li > a {
    padding-top: 50px;
    padding-bottom: 0;
    height: 120px;
  }
}
@media (max-width: 959px) and (min-width: 768px) {
  .navbar.navbar-fixed-bottom .navbar-collapse,
  .navbar.navbar-fixed-top .navbar-collapse {
    max-height: auto;
    overflow-x: visible;
  }
}
@media (max-width: 959px) {
  .navbar .navbar-header {
    float: none;
  }
  .navbar .navbar-left,
  .navbar .navbar-right {
    float: none !important;
  }
  .navbar .navbar-right {
    margin-right: 0px;
  }
  .navbar .navbar-right~.navbar-right {
    margin-right: 0;
  }
  .navbar .navbar-toggle {
    display: block;
    margin-top: 42.50px;
  }
  .navbar .navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  .navbar.navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
  }
  .navbar .navbar-collapse.collapse {
    display: none!important;
    overflow: visible!important;
  }
  .navbar .navbar-nav {
    float: none!important;
    margin-top: 7.5px;
  }
  .navbar .navbar-nav>li {
    float: none;
  }
  .navbar .navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .navbar .collapse.in {
    display: block !important;
    overflow-y: auto;
  }
  .navbar .navbar-nav .dropdown-menu > li > a,
  .navbar .navbar-nav .dropdown-menu > li > a:hover,
  .navbar .navbar-nav .dropdown-menu > li > a:focus {
    color: #777;
  }
  .navbar .navbar-nav .open .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: transparent;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-inverse navbar-fixed-top navbar-tall">
  <div class="container-fluid">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <div class="navbar-collapse collapse" id="navbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a>
        </li>
        <li><a href="#">Link</a>
        </li>
        <li><a href="#">Link</a>
        </li>
      </ul>
    </div>

  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Upvotes: 1

Nazar Becks
Nazar Becks

Reputation: 177

it is normal that the height you put for large screen for the navbar (120px) will be seen in the small devices. Keep the height of the Navbar small. Incase if you want to increase height of navbar in large device you can play with padding of the <a> (anchor inside the nav) If you observe the toggle button in html it throws a class;

class="navbar-toggle collapsed" data-toggle="collapse"

and when the toggle-button is open it throws the class as;

class="navbar-collapse collapse in"

now according to as above class you can style your navbar <a>tags.

i hope this heps you in something to trying to achieve.

Upvotes: 1

Related Questions