I'm facing an issue with my website's navigation bar. It has five sections on desktop, but I need only four visible on mobile devices. However, I can't seem to get my mobile style sheets to work properly. Specifically, I am struggling to hide the last section of the navigation bar along with its child elements.
In each page, I have included three style sheets:
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 767px)" href="css/small_device.css"/>
<link rel="stylesheet" type="text/css" media="only screen and (min-width: 768px) and (max-width: 959px)" href="css/medium_device.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
Within these style sheets, I attempted to hide the specific navigation I wanted by using this code snippet:
.vendors {
display: none;}
This was in place of the original styling for the navigation which included dropdown menus and submenu interactions.
The problematic part in the navigation structure is as follows:
<div class="drop">
<ul class="drop_menu">
<li>. . . </li>
<li>. . . </li>
<li>. . . </li>
<li>. . . </li>
<li><a href="vendors.html" class="vendors">Vendors</a>
<ul>
<li><a href="register.html" class="vendors">Register</a></li>
</ul>
</li>
</ul>
</div>
I've searched extensively for a solution, but haven't found much help. Most suggestions point towards using @media queries within the style sheets. However, despite trying to implement them, I couldn't achieve the desired outcome. Can someone guide me on where to properly insert the @media queries or provide any other assistance?