In the process of creating a responsive menu, I have designed a navbar for desktop that includes 3 text links and 3 small pictures that are also links.
However, when transitioning to a smaller screen size, my goal is to keep the 3 small pictures as they are, but transform the text links into a dropdown menu.
Below is the code I am currently using for the desktop layout:
<div class="container">
<ul class="nav nav-pills">
<li class="hidden-xs hidden-sm"><a href="#">Home</a></li>
<li class="hidden-xs hidden-sm"><a href="#">Help</a></li>
<li class="hidden-xs hidden-sm"><a href="#">Blog</a></li>
<li><a href="#"><span class="search"></span></a></li>
<li><a href="#"><span class="checkout"></span></a></li>
<li><a href="#"><span class="home"></span></a></li>
</ul>
</div>
This layout works well for larger screens.
My objective now is to reposition the top 3 items so that instead of being hidden on smaller screens, they are moved into a dropdown menu.