issue with menu visibility and window size

  • Resolved brighton beach

    (@brighton-beach)


    10 years ago

    At a browser window size of 1280px, the menu navigation is replaced by a drop-down menu. I wanted to change this value and added a media query to my child-theme’s style.css file.

    @media screen and ( min-width: 1000px ) {
  .menu-toggle {
    display: none;
  }

    Now the drop-down menu disappears at 1000px, however the menu navigation does not appear until the window is 1281px wide.

    What would I have to change to make this work?
    How do I control the visibility of the menu navigation?

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter brighton beach

    (@brighton-beach)

    10 years ago

    p.s.
    When I change the media query in the Sketch’s own style.css file (line 2423), it works as expected. However I would prefer to do this with a child theme.

    Siobhan

    (@siobhyb)

    10 years ago

    Hi there. 🙂

    You will need to add the following in order to “tell” your theme to continue to display the main menu until 1001px:

    @media screen and (min-width: 1001px)
.main-navigation ul:first-child {
    display: block;
}

    Hope that’s helpful!

    Thread Starter brighton beach

    (@brighton-beach)

    10 years ago

    Hi Siobhan,

    Yes, that’s very helpful.

    However I found that it only works, when I add the full contend of the media query @media screen and ( min-width: 1281px ) from sketch’s style.css (lines 2424 – 2507) to my child-stylesheet’s new media query. Probably I don’t need all the lines and will see how this can be slimmed down later.

    Thanks for pointing me into the right direction. Your help is much appreciated.

    Siobhan

    (@siobhyb)

    10 years ago

    You’re most welcome! Feel free to start another thread if anything else comes up.

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

The topic ‘issue with menu visibility and window size’ is closed to new replies.

  • 4 replies
  • 2 participants
  • Last reply from: Siobhan
  • Last activity: 10 years ago
  • Status: resolved