<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1><a href="#">Welcome</a></h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="has-dropdown">
<a href="#">Hello, User</a>
<ul class="dropdown">
<li><a href="#">Settings</a></li>
<li class="active"><a href="#">Log Out</a></li>
</ul>
</li>
</ul>
</section>
</nav>
I am encountering two issues with the navigation bar.
- The dropdown menu is not functioning properly in full screen mode. Clicking or hovering over 'Hello, User!' does not trigger any action. Upon inspecting the element, it seems like the drop-down is positioned at -100%.
section class="top-bar-section" style="left: -100%;
2. When I resize my screen, the menu text and icon appear, but 'Hello, User' is displayed below instead of only showing when clicking on Menu. Furthermore, clicking on the menu does not result in any action.
Your help in resolving these issues would be highly appreciated!