I'm currently in the process of designing a navbar that incorporates a megamenu.
To handle the megamenu functionality, I've opted to utilize the bootstrap-dropmenu library (GitHub link) which is built on Bootstrap 3.
While everything seems to be functioning properly, I've encountered an issue where the content within the megamenu isn't aligned correctly with the div container.
To illustrate the problem more clearly, here's a screenshot: https://i.sstatic.net/hfFJr.png
What I aim to achieve is to have the first element of the megamenu align perfectly with the "LOGO" section.
Below is the HTML code snippet:
<nav class="navbar top-menu">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand logo" href="#">LOGO</a>
</div>
<div class="collapse navbar-collapse navigation-menu">
<ul class="nav navbar-nav">
<li>
<a href="#">home</a>
</li>
<li class="dropdown dropdown-megamenu">
<a class="dropdown-toggle" data-toggle="dropdown" >tab 1</a>
<div class="dropdown-container">
<ul class="dropdown-menu">
<li><a href="#">elem 1</a></li>
<li><a href="#">elem 2</a></li>
<li><a href="#">elem 3</a></li>
<li><a href="#">elem 4</a></li>
</ul>
</div><!-- /dropdown-container -->
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
And here's the accompanying CSS code:
.top-menu{
background: green;
}
.logo{
font-size:40px;
font-size:4rem;
color:#FFF;
display:block;
float:left;
font-weight:700;
overflow:hidden;
text-decoration:none;
margin-top: 5px;
}
/* Additional CSS styling follows... */
If you'd like a real-time demonstration of the issue, feel free to check out this JSFiddle.
Could someone provide some guidance on how to rectify this alignment discrepancy?