Okay
  Public Ticket #3432842
Edit header menu item for individual colours
Closed

Comments

  • Timmy Bourke started the conversation
    August 9, 2023 at 6:26am

    Hey I want to change my menu to have different hover and active menu colours. I cannot get it to work.

    I have created custom classes for each menu item. 

     .black-menu.menu-item > a {
     color:black ;
    }
    .red-menu.menu-item > a {
     color:#ef4f51 ;
     }
     .yellow-menu.menu-item > a {
     color:#ffc40d ;
     }
     .blue-menu.menu-item > a {
     color:#0062b1 ;
     }
     .green-menu.menu-item > a {
     color:#6bc05a ;
     }


  •  279
    Noah replied
    August 9, 2023 at 7:25am

    Hi there,

    Could you add the classes to the menu items in appearance \ menu area.

    You need to enable the CSS class option from the screen options button on the top right of that page. Select CSS classes as shown in the attached screenshot.

    Cheers.

    Attached files:  Menus-‹-stage-—-WordPress.png

  •  8,839
    Tahir replied
    August 9, 2023 at 9:12am

    Hey Again,

    You can use the new Menu Options as well instead of the CSS: https://themenectar.com/docs/salient/salient-menu-options/ . See screenshot below.

    .3939366596.png

    Thanks.

    ThemeNectar Support Team 

  • Timmy Bourke replied
    August 11, 2023 at 10:54am

    Hey Tahir  and Noah,


    Tahir, I tried that. It doesn't allow me to change individual links. I have 4 menu items I have given each one a custom css class. Then I have used them in the css section of wordpress (Via customise) & the salient general settings section. This is the code I used:


    .black-menu-studio.nav-menu a:hover  {
     color:black ;
    }
    .red-menu-consult.nav-menu a:hover {
     color:#ef4f51 ;
     }
     .yellow-menu-create.nav-menu a:hover  {
     color:#ffc40d ;
     }
     .blue-menu-venue.menu-item a:hover  {
     color:#0062b1 ;
     }
    .green-menu-earth.menu-item a:hover  {
     color:#6bc05a ;
     }

    I would like each menu item to change to this on hover AND when it is the active page. 

    It still isnt working. 

    Thanks


  •  8,839
    Tahir replied
    August 11, 2023 at 11:22am

    Hey Again,

    Could you allow us to log in to your website backend dashboard so we can check on this for you more?. We are gonna need the username and password of admin user as well as the login url.

    Thanks.

    ThemeNectar Support Team 

  •   Timmy Bourke replied privately
  •  8,839
    Tahir replied
    August 11, 2023 at 11:34am

    Hey Again,

    Just Added in the below CSS. Please check.

     Custom CSS box is in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    #header-outer[data-lhe=default] #top nav>ul>li.black-menu-studio>a:hover, #header-outer[data-lhe=default] #top nav>ul>li.black-menu-studio.current-menu-item>a {
    color: black !important;
}
#header-outer[data-lhe=default] #top nav>ul>li.red-menu-consult>a:hover#header-outer[data-lhe=default] #top nav>ul>li.red-menu-consult.current-menu-item>a {
    color: #ef4f51 !important;
}
#header-outer[data-lhe=default] #top nav>ul>li.yellow-menu-create>a:hover,#header-outer[data-lhe=default] #top nav>ul>li.yellow-menu-create.current-menu-item>a {
    color: #ffc40d !important;
}
#header-outer[data-lhe=default] #top nav>ul>li.blue-menu-venue>a:hover,#header-outer[data-lhe=default] #top nav>ul>li.blue-menu-venue.current-menu-item>a {
    color: #0062b1 !important;
}
#header-outer[data-lhe=default] #top nav>ul>li.green-menu-earth>a:hover,#header-outer[data-lhe=default] #top nav>ul>li.green-menu-earth.current-menu-item>a {
    color: #6bc05a !important;
}

    Thanks

    ThemeNectar Support Team 

  • Timmy Bourke replied
    August 11, 2023 at 11:49am

    Thank you for that! It is perfect!