Hid primary navigation using additional CSS – no menu in responsive mode

  • Resolved simonadolfsson

    (@simonadolfsson)


    6 years, 8 months ago

    Hi.
    I had an issue with the primany navigation menu using Storefront for a website im working on. I had that specific issue solved by entering the following to the additional css

    .storefront-primary-navigation {

    display: none;
    }
    after reading on
    https://www.ads-software.com/support/topic/how-to-hide-top-menu-bar-in-all-the-pages-in-storefront/ which made the default menu not displayed.

    Now, I noticed that this made no menu-button/menu-bar appear while surfing the site using a phone. My guess is that is the primary navigation that sets the menu for tablets/phone.

    What I would like to ask is, after having read the basics of responsive css (which is still a bit too complex for me still), if there is another line of code I could add to still have the menu appear when the site is surfed to using a tablet or a phone.

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)

  • You can use a media query to set the display from none to initial (default value).

    For example if you want the menu to reappear at a screen size of 768px (iPad) and smaller you can create a media query as follows;

    
@media (max-width: 768px) {
  .storefront-primary-navigation {
    display: initial;
  }
}

    Your menu should now reappear on mobile devices.

Viewing 1 replies (of 1 total)
  • The topic ‘Hid primary navigation using additional CSS – no menu in responsive mode’ is closed to new replies.