I have recently started learning HTML and CSS, and within just four days of coding, I have discovered the usefulness of bootstrap in speeding up development.
My current project involves creating a transparent navbar fixed at the top of the page. Here is my code snippet:
Check out my Navbar attempt on jsFiddle here
<!-- Top-Navigation-Bar -->
<div class="row-fluid">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner" id="topbar">
<div class="container"> <a href="#"><img class = "brand" src="http://placehold.it/269x50" alt="SparkCharger" /></a>
<button id="topbtn" type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<div class="nav-collapse">
<ul class="nav pull-right">
<li class="active">
<form class="navbar-search brand">
<input type="text" class="search-query" placeholder="Search">
</form>
</li>
<li><a href="#"> <h5> Discover </h5></a>
</li>
<li><a href="#"> <h5> Blog </h5></a>
</li>
<li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"><h5>Start <span class="caret"></span></h5></a>
<ul class="dropdown-menu">
<li><a href="#"> <h6> Login </h6></a>
</li>
<li><a href="#"> <h6> Signup </h6></a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- /Top-Navigation-Bar -->One issue I have encountered is that the height of the navbar changes based on the size of the brand image. This wouldn't be an issue if there wasn't significant spacing between the image and the navbar's top and bottom. How can I adjust this? Additionally, is it possible to set a fixed size for the navbar so it remains consistent and doesn't change unpredictably?