snobis snobis - 1 month ago 18
Less Question

Change background of collapse nav with less

I am customizing a bootstrap navbar with less. I changed the background color of the navbar-default and then I realized that the navbar-toggle class (which collapses the navbar on a certain breaking point) has no background at all. I tried to apply the same background to the navbar-collapse and this works when I click the toggle button however this background is visible when the page does not trigger the breaking point producing this bad look. What I need here is to have the same background on both navbar's (the collapsed one and the other). Here are my files, please notice that the css file on the snippet is actually a less file. For the testing purposes I'm pre-compiling it into css. The actual css file is compiled here. Any sugestions?



@import 'https://fonts.googleapis.com/css?family=Montserrat';
@navbar-height: 60px;
@navbar-default-color: rgba(169,169,169,0.7);
@navbar-default-link-color: #25b6ff;
@navbar-font: 'Montserrat', sans-serif;
@navbar-font-weight: 300;
@navbar-default-link-hover-bg: #fff;


.navbar-default{
height: @navbar-height;
font-family: @navbar-font;
background-color: @navbar-default-color;

.navbar-nav{

> li > a{
color: @navbar-default-link-color;

&:hover,
&:focus{
color: @navbar-default-link-hover-bg;

}
}
}
}

.navbar-default{
.navbar-collapse{
background-color: @navbar-default-color;
}
}

<!DOCTYPE html>
<html>
<head>
<title>Header</title>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="../css/navbar.css">

</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-WDM-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a>
</div>

<div class="collapse navbar-collapse" id="bs-WDM-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="./index.php">home</a></li>
<li><a href="./about.php">about</a></li>
<li><a href="./projects.php">projects</a></li>
<li><a href="./contact.php">contact</a></li>
</ul>
</div>
</div>
</nav>

</body>
</html>




Answer

Just add a media query so that the background is only applied at mobile widths:

Change

.navbar-collapse {
  background-color: @navbar-default-color;
}

to

@media (max-width: 768px) {
  .navbar-collapse {
    background-color: @navbar-default-color;
  }
}

(768px is Bootstrap's mobile breakpoint).

Here's a working pen, using LESS: http://codepen.io/henry/pen/VKyrgE (I also did some minor minor tweaking to use cleaner selectors with lower specificity, e.g. .navbar-nav a instead of .navbar-default .navbar-nav > li > a but you can ignore those changes if you need to.)

Note that you're getting that stripe of darker grey where the nav and dropdown overlap because of using semi-transparent background colors. If the background doesn't need to be transparent, you might consider changing to a fully opaque color (e.g. your rgba(169, 169, 169, 0.7) against a white background is the same as #c2c2c2).