Changing Primary Menu rollovers

Hi there,

I would like my Primary Menu and Sub menu to be highlighted (#E11875) when rollover is active, something similar to Honcho. I require the sub menu to be lowercase, not uppercase, no border at the bottom and the spacing on each link to be further apart. My site is Alignify

Is there a way to edit this directly through Elementor as I have purchased Elementor Pro and I can add custom menu’s to pages but not as the Primary Menu which I require.

Thanks in advance.

Hello there,

Please try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (min-width: 1200px) {
      .menuStyle6 .site-header .main-navigation ul.menu > li a::after { 
        width: 100%;
        background-color: #E11875;
        opacity: 0;
      }
      .menuStyle6 .site-header .main-navigation ul.menu > li a:hover::after { 
        opacity: 1;
      }
      .menuStyle6 .site-header .main-navigation ul.menu ul.sub-menu li a::after { 
        display: none;
      }
      .menuStyle6 .site-header .main-navigation ul.sub-menu li + li {
        margin-left: 0;
      }
      .main-navigation ul ul.sub-menu li {
        border: none;
        margin-bottom: 0;
      }
      .main-navigation ul ul.sub-menu li a {
        text-transform: capitalize;
      }
    }

I hope this reply helps.

Stay safe.
Have an excellent day ahead :slight_smile:

Regards,
Kharis
aThemes Support

Thank you so much @kharisblank

How would I go about changing the sub menu hover colours? I would like the sub menu background to be #E11875 and font #FFFFF on hover?

Also is there anyway I can make the sub menu font to be larger?

Thanks,

Hello there,

You’re welcome! Thank you for getting back to me.

Please update the code I suggested with this one:

    @media only screen and (min-width: 1200px) {
      .menuStyle6 .site-header .main-navigation ul.menu > li a::after { 
        width: 100%;
        background-color: #E11875;
        opacity: 0;
      }
      .menuStyle6 .site-header .main-navigation ul.menu > li a:hover::after { 
        opacity: 1;
      }
      .menuStyle6 .site-header .main-navigation ul.menu ul.sub-menu li a::after { 
        display: none;
      }
      .menuStyle6 .site-header .main-navigation ul.sub-menu li + li {
        margin-left: 0;
      }
      .main-navigation ul ul.sub-menu li {
        border: none;
        margin-bottom: 0;
      }
      .main-navigation ul ul.sub-menu li a {
        text-transform: capitalize;
      }
      .main-navigation ul ul.sub-menu li a:hover {
        background-color: #E11875;
        color: #fff;
      }
    }

Regards,
Kharis
aThemes Support

Thats amazing. Thank you so much @kharisblank

Is it possible to ask if I can enlarge the sub menu text by 1 increment (say from size 11 to size 12)?

1 Like

Also can I keep the menu sticky?

Hello there,

Try to update the code with:

    @media only screen and (min-width: 1200px) {
      .menuStyle6 .site-header .main-navigation ul.menu > li a::after { 
        width: 100%;
        background-color: #E11875;
        opacity: 0;
      }
      .menuStyle6 .site-header .main-navigation ul.menu > li a:hover::after { 
        opacity: 1;
      }
      .menuStyle6 .site-header .main-navigation ul.menu ul.sub-menu li a::after { 
        display: none;
      }
      .menuStyle6 .site-header .main-navigation ul.sub-menu li + li {
        margin-left: 0;
      }
      .main-navigation ul ul.sub-menu li {
        border: none;
        margin-bottom: 0;
      }
      .main-navigation ul ul.sub-menu li a {
        text-transform: capitalize;
        font-size: 18px;
      }
      .main-navigation ul ul.sub-menu li a:hover {
        background-color: #E11875;
        color: #fff;
      }
    }

Also can I keep the menu sticky?

Currently, the stickly menu can be enabled for Basic 1, Basic 2, and Basic 3 menu types.

I hope this reply helps.

Stay safe.
Have an excellent day ahead :slight_smile:

Regards,
Kharis