trouble styling nav submenu

  • Resolved Bunny Blake

    (@h_double)


    1 year, 1 month ago

    I’m customizing a theme and everything looks good with one exception: I can’t figure out how to style only the text in the mobile popup version of the menu. In the theme editor (block editor) I gave the nav block a custom css class “.jj-top-nav”. I am able to do something like:

    
.jj-top-nav span {
	color: red;
}

    which works, but of course it affects the menu bar text in desktop view, not just the mobile view.

    How do I target just the mobile version of those menu items?

    (Also what’s the easiest way to target the burger menu button in css?)

    • This topic was modified 1 year, 1 month ago by Bunny Blake.

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

Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator Felipe Santos

    (@foosantos)

    Hi @h_double,

    How do I target just the mobile version of those menu items?

    You can change the CSS like that:

    @media screen and (max-width: 768px) {
  .jj-top-nav span {
	color: red;
  }
}

    This will only apply when the width is up to 768px.

    Also what’s the easiest way to target the burger menu button in css?

    Do you mean the button itself?

    If so, you could use something like that:

    @media screen and (max-width: 768px) {
  .jj-top-nav button {
	background-color: red;
  }
}

    Here’s an example:

    https://d.pr/i/UsVnhq
    Full Size: https://d.pr/i/UsVnhq

    Thread Starter Bunny Blake

    (@h_double)

    Perfect, thanks! I was trying to overthink it and didn’t even consider using a media query.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘trouble styling nav submenu’ is closed to new replies.