Nav Menu For Mobile Devices

  • Resolved nootkan

    (@nootkan)


    8 years, 12 months ago

    Was wondering if someone could help me to figure out how to hide the child menus when being viewed in a mobile device as they seem to overlap each other and are quite user unfriendly. I am using the CC Child Pages plugin to show the sibling pages under each main page so if I could figure out which media query to use to show only the main nav menus at certain break points that should be more user friendly. The site is https://www.cecilbspa.com if you want to see what I mean.

Viewing 2 replies - 1 through 2 (of 2 total)

  • Use this:

    @media screen and (max-width: 940px)
{
   .main-navigation ul li:hover > ul {
      display: none;
   }
}

    By the way, this rule:

    .main-navigation.menu-center li{
   margin-left: 12px;
   margin-right:12px;
}

    Is making the current menu item look offset to the left on mobile devices. It looks like you can remove it altogether without ill effect.

    Thread Starter nootkan

    (@nootkan)

    Awesome thanks for this. I’ll give it a go.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Nav Menu For Mobile Devices’ is closed to new replies.