Home Forums Themes Support Frames Change Color

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #12991
    thomasprz
    Supported

    Hello,
    I would like to change the menu color in the header for the light and dark versions of the website. For the light version of the site, when I hover over the menu, I want the texts to turn black instead of red, and when a menu is clicked, the text should be underlined in black with black writing. Similarly, for the dark version of the site, when hovering over the menu, I would like the texts to become white instead of red, and when a menu is clicked, the text should be underlined in white with white writing.

    Thanks you

    Attachments:
    You must be logged in to view attached files.
    #13006

    Hi,
    Please note customize for fit what you need is not in the range of the support.
    However we’ll support in this case but the next issue you should check it yourself.
    Also 2 screenshots is not enough cases can happens.
    1. The first screenshot:
    – Light mode: hover to white? background is white and you will not see anything, in this case you can keep black and have underline black
    – Dark mode: similar hover to black will not see anything.
    2. The second screenshot:
    You can go to Appearance -> Customize -> Additional CSS & add this code:

    .haru-header--transparent-light:not(.haru-header--sticky-on) .elementor-widget-haru-nav-menu .haru-nav-menu--main .haru-item--main:hover {
      color: #000;
    }
    .haru-header--transparent-light:not(.haru-header--sticky-on) .haru--pointer-underline .haru-item--main:after {
      background-color: #000;
    }
    
    .haru-header--transparent-light:not(.haru-header--sticky-on) .elementor-widget-haru-nav-menu .haru-nav-menu--main .haru-item--main:focus, .haru-header--transparent-light:not(.haru-header--sticky-on) .elementor-widget-haru-nav-menu .haru-nav-menu--main .haru-item--main.highlighted, .haru-header--transparent-light:not(.haru-header--sticky-on) .elementor-widget-haru-nav-menu .haru-nav-menu--main .haru-item--main.haru-item-active {
      background-color: #000;
    }
    .elementor-widget-haru-nav-menu .haru-nav-menu--main .haru-item:hover, .elementor-widget-haru-nav-menu .haru-nav-menu--main .haru-item:focus, .elementor-widget-haru-nav-menu .haru-nav-menu--main .haru-item.highlighted, .elementor-widget-haru-nav-menu .haru-nav-menu--main .haru-item.haru-item-active {
    	color: #000;
    }
    .haru--pointer-overline .haru-item--main:before, .haru--pointer-overline .haru-item--main:after, .haru--pointer-underline .haru-item--main:before, .haru--pointer-underline .haru-item--main:after, .haru--pointer-double-line .haru-item--main:before, .haru--pointer-double-line .haru-item--main:after {
    	background-color: #000;
    }

    Hope this helps!

    ****
    Regards,
    HaruTheme

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.