Hello! Currently, I am utilizing this bootstrap template from . However, I am encountering an issue with the dropdown menu alignment when I try to add an image to it. Is there anyone who can provide some assistance with this problem?
The complete code was too extensive to include here, so I have uploaded it to this FIDDLE https://jsfiddle.net/Lgdohawm/.
Please select Columns Bottom results in the js fiddle editor layout as it will display the full width result page.
Here is a snippet of the menu code (HTML only):
<header id="header" style="background-color:black">
<nav id="nav-menu-container">
<ul class="nav-menu">
<li class="menu-active"><a href="#intro">Home</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<!-- menu with image -->
<li class="menu-has-children"><a href="" class="sf-with-ul"><img class="rounded-circle" width="45" src="https://picsum.photos/50/50"> @user</a>
<ul>
<li><a href="#">Drop Down 1</a></li>
<li><a href="#">Drop Down 3</a></li>
<li><a href="#">Drop Down 4</a></li>
<li><a href="#">Drop Down 5</a></li>
</ul>
</li>
<!-- menu with image -->
<li><a href="#team">Team</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</header>The menu code can be found between the HTML comments tag <!-- menu with image -->