I am looking to align the navbar lists, which are currently on the right side, below the header icon placed on the left side. Rather than toggling the navbar with a button, I want it to simply expand under the header icon.
It seems that the disappearance is caused by the navbar-expand-lg class. Is there a way to fix this using Bootstrap alone? Or would I need to use HTML and CSS without relying on JavaScript?
HTML
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">MADHUMITHA PRABAKARAN</a>
</div>
<!--
<button class="navbar-toggler" data-toggle="collapse" data-target="#mainNav">
<span class="navbar-toggler-icon"></span>
</button>
-->
<div class="container">
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="portfolio.html">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
CSS
.navbar{
background: #ffffff;
border-style: solid;
border-color: #cccccc;
border-width: 2px;
border-left-style: hidden;
border-right-style: hidden;
border-top-style: hidden;
top:0;
}
.navbar-brand {
background-color: #4aaaa5;
color: white;
font-size: 200%;
font-family: 'Times New Roman', Times, serif;
text-align: justify;
margin-top:-10px;
margin-bottom: -10px;
}