For the development of this site, I am utilizing bootstrap 4 alpha 4. You can visit the site at
To keep the logo on the line above, I have added a clear:both to the navbar.
However, there seems to be a slight delay in the items falling down properly when opening the navbar, and I'm unsure how to resolve this issue.
This is the HTML structure:
<header class="site-header">
<nav class="navbar navbar-light bg-faded navbar-fixed-top">
<div class="container">
<button type="button"
class="navbar-toggler hidden-md-up pull-xs-right"
data-toggle="collapse"
data-target="#nav-content"
aria-expanded="false">
☰
</button>
<a href="https://www.shivampaw.com" title="Shivam Paw">
<img alt="Shivam Paw Logo"
class="navbar-brand"
src="https://www.shivampaw.com/images/sp.png">
</a>
<div class="collapse navbar-toggleable-sm" id="nav-content">
<ul class="nav navbar-nav pull-md-right">
<li class="active nav-item">
<a href="index.html"
title="Shivam Paw Home"
class="nav-link">
Home
</a>
</li>
<li class="nav-item">
<a href="about.html"
title="About Shivam Paw"
class="nav-link">
About Me
</a>
</li>
<li class="nav-item">
<a href="work.html"
title="Shivam Paw's Work"
class="nav-link">
My Work
</a>
</li>
<li class="nav-item">
<a href="blog.html"
title="Shivam Paw's Blog"
class="nav-link">
My Blog
</a>
</li>
<li class="nav-item">
<a href="contact.html"
title="Contact Shivam Paw"
class="nav-link">
Contact Me
</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
And here is the corresponding CSS styling:
/* Navbar Changes */
.navbar-brand {
max-width: 55px;
}
.navbar-light {
background-color: white;
border: none;
-webkit-box-shadow: 0px 5px 11px 0px rgba(50, 50, 50, 0.08);
box-shadow: 0px 5px 11px 0px rgba(50, 50, 50, 0.08);
}
.navbar-light .navbar-nav .nav-item .nav-link {
text-transform: uppercase;
font-size: 14px;
font-weight: bold;
color: black;
}
li.active.nav-item a.nav-link,
li.active.nav-item a.nav-link:focus,
li.active.nav-item a.nav-link:hover {
color: #337ab7 !important;
background-color: inherit;
}
@media (max-width: 767px){
ul.navbar-nav{
clear: both;
}
}