I spent the entire day grappling with a seemingly minor issue to no avail.
In my course assignment code provided below, I successfully created a page with responsive design and a toggle menu. However, while the styling appears perfect on xs browser size, it all falls apart in sm, md, and lg browser sizes. I've been unable to expand the navbar light color to include the span under navbar-brand without causing everything to shift and look unattractive.
Your assistance on this matter would be greatly appreciated.
https://jsfiddle.net/9vnh6rga/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="Viewport" content="width=device-width, initial-scale= 1">
<title>House Of Burger - Acceuil</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<link href="https://fonts.googleapis.com/css?family=Alfa+Slab+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Ultra" rel="stylesheet">
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<!-- Removed logo image link -->
<div class="navbar-brand">
<a href="index.html"><h1>House of Burger</h1></a>
<span>Freshly Homemade</span>
</div>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsable-nav" 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>
</div>
<div id="collapsable-nav" class="collapse navbar-collapse">
<ul id="nav-list" class="nav navbar-nav navbar-right visible-xs">
<li>
<a href="couscous.html">Couscous</a>
</li>
<li>
<a href="doubara.html">Doubara</a>
</li>
<li>
<a href="zviti.html">Zviti</a>
</li>
</ul> <!-- ul closing -->
</div> <!-- #collapsable-nav -->
</div> <!-- .container -->
</nav> <!-- #header-nav -->
</header>
<script src="js/jquery-3.1.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>