Pointers re: CSS on navigation menu (2 issues)

  • Anonymous User 17976131

    (@anonymized-17976131)


    11 months, 2 weeks ago

    So, I’m hoping someone here either has done one or both of these things, or can give me pretty explicit pointers on where to make the necessary adjustments.

    (1) I’d like to not have the mobile navigation menu, instead just having my regular menu at all sizes (or maybe just shift the breakpoint from 895/896 to something way smaller.

    Alternatively/also:

    (2) In cases where the mobile menu is used, there’s a weird display annoyance. When you load a page, the menu button is blue. When you click to open the menu, the button turns black. But when you click to close it, it stays black instead of reverting to blue. I’d like to get it to revert to blue when you close the menu.

    Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter Anonymous User 17976131

    (@anonymized-17976131)

    (1) has been solved by my solution to the sidebar and breakpoints (see other thread), but I still need a solution to (2). On (2) I should note that I think this issue only happens on mobile, not on desktop.

    Hey @bixfrankonis, thanks for your patience here!

    Re: the Menu button staying black after you click on it, I found the culprit:

    button:focus, input[type=button]:focus, input[type=reset]:focus, input[type=submit]:focus, button:hover, input[type=button]:hover, input[type=reset]:hover, input[type=submit]:hover {
    background: #2c313f;
    outline: none;
}

    So any button changes to black/dark grey when it’s being hovered or focused. And when you tap to close the Menu, it’s still in focus until you tap on something else.

    Something like this that targets the toggle could work, though:

    button.toggled-on {
    background-color: #2c313f;
}
button.menu-toggle {
    background-color: #3e69dc;
}

    Want to try adding that?

    • This reply was modified 10 months, 4 weeks ago by supernovia.
    Thread Starter Anonymous User 17976131

    (@anonymized-17976131)

    That just seems to keep the menu white-on-blue always.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Pointers re: CSS on navigation menu (2 issues)’ is closed to new replies.