No replies
ajax201222
ajax201222's picture
Offline
newbie
Denver, CO
Last seen: 4 years 40 weeks ago
Denver, CO
Timezone: GMT-7
Joined: 2017-02-21
Posts: 1
Points: 2

I'm trying to make 2 items on my nav menu hide when the sections are hidden. Right now, I'm using jQuery to move and hide each section and media queries to hide and display the nave menu items. This is the related nav section in my HTML:

<ul class="main-nav">
   <li><a href="#about">About</a></li>
   <li class="music-link"><a href="#music">Music</a></li>
   <li><a href="#tour">Tour</a></li>
   <li><a href="#epk">EPK</a></li>
   <li class="photos-link"><a href="#photos">Photos</a></li>
   <li><a href="#contact">Contact</a></li>
</ul>

This is my media query:

@media only screen and (max-width: 767px), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
    div .music-link, div .photos-link {
        display: none;
    }
}

my current issue is a little difficult to explain, so please let me know if this is not clear. My navbar completely hides when it is resized after I have opened and closed the mobile version of the navbar. This is what I do...

1. refresh the page at full screen
2. resize the screen to width < 767px
3. open the mobile nav manu (hamburger icon)
4. close the mobile nav menu
5. resize to larger screen

After 5 is completed, there is no nav menu at all. It's just blank. Any ideas on what is happening? If you need more code, please let me know. There's a good amount, so I'm trying to limit it to what I think is relevant and I'm new to this forum. Any help will be greatly appreciated. Many thanks!