Drago Drago - 29 days ago 6
CSS Question

Make content of navbar fit when the screen is between 768px and 992px

Whenever I resize my browser the content of the navbar gets pushed to a newline. This only happens between 768px and 992px. Is there a way that I can make the content of the navbar fit my screen?

This is what happens when the screen is between 768px and 992px:

http://image.prntscr.com/image/93ddcadd374d4af9928e3be209645ab3.png

HTML:



<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
</button>
<a class="navbar-brand" href="/">Logo</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<!-- <li class="active"><a href="#">Main <span class="sr-only">(current)</span></a></li> -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">dropdown 1<span
class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="/news">1</a></li>
<li><a href="/staff"> 2</a></li>
<li><a href="/status">3</a></li>
<li><a href="/about">4</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">dropdown 2<span
class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="https://kiwiirc.com/client/irc.lunarirc.net:+6697/?nick=lunar%7C?#LunarIRC" target="_blank">1</a></li>
<li><a href="irc://irc.lunarirc.net:6697"> 2</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">dropdown 3<span
class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">1</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">dropdown 4<span
class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">dropdown 5<span
class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">dropdown 6<span
class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>


CSS:



body {
font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 15px;
color: #2c3e50;
height: 100%;
}

html {
height: 100%;
}

@media screen and (max-width: 768px) {
.navbar {
position: relative;
min-height: 40px;
margin-bottom: 20px;
border: 1px solid transparent;
}

.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #fff;
}

.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover {
color: #18bc9c;
}
}

@media screen and (min-width: 768px) {
.dropdown:hover .dropdown-menu {
display: block;
}
.navbar {
position: relative;
min-height: 40px;
margin-bottom: 65px;
border: 1px solid transparent;
}

.panel {
border-radius: 6px;
}
}

.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
background-color: #1a242f;
-webkit-transform: rotate(360deg);
-moz-transition: rotate(360deg);
transform: rotate(360deg);
}

.navbar-brand {
font-size: 25px;
padding-right: 30px;
}

a {
text-decoration: underline;
}

.nav>li>a {
padding-right: 25px;
text-decoration: none;
}

.navbar-default .navbar-brand {
color: #fff;
text-decoration: none;
}

.dropdown-menu>li>a {
text-decoration: none;
}


.navbar-default .navbar-nav>li>a {
color: #fff;
}

.navbar-default {
background-color: #2c3e50;
}

.navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover {
color: #18bc9c;
}

.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus {
color: #18bc9c;
}

.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus {
color: #fff;
background-color: #1a242f;
}

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
color: white;
background-color: #1a242f;
}

.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {
max-height: 400px;
}

.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {
max-height: 400px;
}


Try it out at: http://codepen.io/anon/pen/LbEOya

Answer

You can also remove the padding from other elements evenly as well .

Code pen : http://codepen.io/saa93/pen/vyEWaO

Code:

@media only screen and (min-width:768px) and (max-width: 992px)  {
  .navbar .container{
   width:100%; 
  }

   .nav.navbar-nav > li > a {
   padding-right: 8px;
   }
  a.navbar-brand{
    padding-right:20px;
  }
}
Comments