Solved

Hiding menu items for responsive sections

  • 11 October 2021
  • 4 replies
  • 29 views

Hello everyone! 

 

I am working on a single-page site that shows a section in the desktop version that I do not want to show in the tablet or mobile devices because of the way that it is formatted. i have hidden the section in the page, but the nav link to that section is still visible. I am not finding a way to hide that in my Google searches, though I may be using words/phrases that are not explaining it well enough. Is there a way to hide the nav links to for sections that are hidden in the tablet/mobile modes? If not a way in the interface, is there some sample css that I could use to hide that link?

icon

Best answer by Simon Latham 11 October 2021, 09:00

View original

4 replies

Userlevel 2

Hi @weeTrex,

 

You could apply a class to your menu item, and then use a media query with the ‘display: none’ declaration to hide it on certain devices.

 

Hopefully I’ve understood your requirements.

Userlevel 6
Badge +1

Hi,

 

You will be able to obtain this using CSS media queries in your Custom CSS section. So it would look something like:

@media (max-width: 768px) {

   .nav-menu li:nth-child(2) {

      display: none;

   }

}

The first line sets the condition for anything below 769px wide.

The second line targets the second item in every nav-menu; if you have more than one nav-menu on your website, you may wish to assign an ID or class name to the one you want the media query to affect.

The third line hides the element targeted.

 

Hope that helps.

Hey Simon,

 

Thanks for the example! It worked perfectly. I appreciate the help.

Userlevel 6
Badge +1

Absolutely my pleasure!

Reply