d4ne d4ne - 3 months ago 8
HTML Question

Can't change the height of a subnavbar

I'm trying to create 2 navbars using bootstrap, they're both ontop of the screen. But somehow I can't change the

min-height
or
height
of the second navbar.

I've tried to change the
min-height
value to 40px but it wouldn't effect anything.

My current HTML code looks like the following:

<?php
require_once('handling/classes/site_config_class.php');
$site_config = new site_config_class();
?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php echo $site_config->site_title_home; ?></title>
<!-- Stylesheet includes -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/stylesheet.css" rel="stylesheet">
<!-- Core include -->
<script src="handling/core/engine/babylon.2.4.core.js"></script>
<!-- Core js include -->
<script src="handling/core/js/initScene.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<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>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<div class="logo"></div>
</a>
</div>

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="navbar_active"><a href="#">DASHBOARD</a></li>
<li><a href="#">ENTER WORLD</a></li>
<li><a href="#">WARDROBE</a></li>
<li><a href="#">SHOPPING</a></li>
<li><a href="#">DESIGNER</a></li>
<li><a href="#">PURCHASE</a></li>
</ul>

<ul class="nav navbar-nav navbar-right">
<span class="glyphicon glyphicon-comment navbar_icons" aria-hidden="true"></span>
<span class="glyphicon glyphicon-bell navbar_icons" aria-hidden="true"></span>
<span class="glyphicon glyphicon-shopping-cart navbar_icons" aria-hidden="true"></span>
<span class="glyphicon glyphicon-fullscreen navbar_icons" aria-hidden="true"></span>
<span class="glyphicon glyphicon-log-out navbar_icons" aria-hidden="true"></span>
</ul>
</div>
</div>
</nav>
<nav class="navbar navbar-default subnavbar">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li><a href="#">SHOPPING</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">SHOPPING</a></li>
</ul>
</div>
</nav>
<div class="col-md-12 no_padding">
<canvas id="screen"></canvas>
</div>

<!-- Javascript includes -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
</body>
</html>


My CSS code like the following:

body {
margin: 0px;
width: 100%;
height: 100%;
background-color: #f2f2f2;
}

.logo {
width: 101px;
height:25px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGUAAAAZCAYAAAAonOB1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA85pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTMyIDc5LjE1OTI4NCwgMjAxNi8wNC8xOS0xMzoxMzo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wUmlnaHRzPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvcmlnaHRzLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcFJpZ2h0czpNYXJrZWQ9IkZhbHNlIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InV1aWQ6Q0NDNTU3RTk4QTcwRTMxMTgyMDA5RjhGNUM0NEY2OEYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QkE5REE3NTU2RkIzMTFFNjlDMkJCQjQ2REEwQTZFNjciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QkE5REE3NTQ2RkIzMTFFNjlDMkJCQjQ2REEwQTZFNjciIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUuNSAoV2luZG93cykiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo1ZGVjY2MzNC1hMmY3LTM0NDgtYTJkMC04OGJh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);
}

/* Navbar */

.navbar {
min-height: 52px !important;
line-height: 52px !important;
background-color: #3d3d3d !important;
border-radius: 0px !important;
border: none !important;
margin-bottom: 0px !important;
}

.navbar-brand {
padding: 12px 15px !important;
}

.navbar-default .navbar-nav>li>a {
font-family: "Segoe UI";
font-size: 12px;
font-style: normal;
font-variant: normal;
font-weight: bold;
color: #f2f2f2 !important;
}

.navbar-default .navbar-nav>li>a:hover {
color: #a1a1a1 !important;
}

.navbar_icons {
color: #a8a8a8 !important;
margin-left: 10px;
font-size: 14px;
}

.navbar_icons:hover {
color: #fff !important;
cursor: pointer;
}

/* Subnavbar */

.subnavbar {
background-color: #fff !important;
min-height: 40px !important;
}

/* Canvas */

#screen {
width: 100%;
height: 500px;
}

.no_padding {
padding: 0px !important;
}


A preview of the site can be seen here: Link to site

Does anyone know how I could set the subnavars
height
to 40px ?

Answer

add this css your custom css

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