Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • May 7, 2024 at 2:43 pm #1442567
    Qgrafica_7

    Goodmorning,
    I need to change for mobile view the background color and font color of the menu items (particularly of the current selected menu item), but i cannot seem to make it work.
    Can you help me please?
    thank you very much

    May 7, 2024 at 4:43 pm #1442583
    Rikard

    Hey Qgrafica_7,

    Where can we see the elements in question?

    Best regards,
    Rikard

    May 7, 2024 at 8:51 pm #1442614
    Qgrafica_7

    Hi Rikard,
    more details in the private content, i added the link to the website and a screenshot of the target items.
    I need to change the styling of the menu items only on mobile, since i want different styling for desktop

    Thank you

    May 8, 2024 at 11:20 am #1442668
    Rikard

    Hi,

    Thanks for that. Please try the following in Quick CSS under Enfold->General Styling:

    #av-burger-menu-ul .current-menu-item {
  background: red;
}

#av-burger-menu-ul .current-menu-itemn a {
  color: yellow !important;
}

    Best regards,
    Rikard

    May 9, 2024 at 11:36 pm #1442848
    Qgrafica_7

    Hi, thank you very much.
    Only the top part of the code works, showing the current selected item as red background.
    I’d also need to change the hover color of all the elements.

    Also, how do i set different colors between desktop and mobile?
    Thanks

    May 10, 2024 at 11:04 am #1442873
    Rikard

    Hi,

    Thanks for the update. Could you please add the code back in so that we can see why it’s not applying please?

    Best regards,
    Rikard

    May 10, 2024 at 11:49 am #1442877
    Qgrafica_7

    hello,
    I did it
    Thank you

    May 11, 2024 at 1:26 pm #1442951
    Rikard

    Hi,

    Thanks for that. Please try this instead:

    @media only screen and (max-width: 767px) {
  #top #wrap_all .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul .current-menu-item {
    background: red;
  }
  #top #wrap_all .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul li.current-menu-item  a {
    font-size: 20px;
    color: yellow !important;
  }
}

    Best regards,
    Rikard

    May 13, 2024 at 9:10 am #1443198
    Qgrafica_7

    Unfortunately, that’s still incorrect, as I need to have the color change when I click on the menu to go to a page, rather than having the color change only when I’m already on that specific page.
    How should I proceed?
    thank you

    May 13, 2024 at 4:22 pm #1443262
    Rikard

    Hi,

    Thanks for the update. So you are looking to change the colour of the menu item when it’s actually tapped?

    Best regards,
    Rikard

    May 14, 2024 at 9:13 am #1443377
    Qgrafica_7

    hello, exactly!
    thank you

    May 14, 2024 at 4:41 pm #1443443
    Rikard

    Hi,

    Thanks for the clarification. Please try this instead:

    @media only screen and (max-width: 767px) {
  #top #wrap_all .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul .current-menu-item {
    background: red;
  }
  #top #wrap_all .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul li a:active,  #top #wrap_all .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul li a:focus  {
    font-size: 20px;
    color: yellow !important;
  }
}

    Best regards,
    Rikard

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.