Okay
  Public Ticket #2540153
Changing color of menu when hovering
Closed

Comments

  • Tien Le started the conversation
    September 15, 2020 at 3:54pm

    The current menu  (front page only) is black color now, when hovered over. And it is difficult to see. I'd like to change to a color that is easier to see. 

    I am not a coder, please advise a step-by-step instruction. 

    thanks, 

    Tien 

  •  2,719
    Andrew replied
    September 15, 2020 at 4:04pm

    Hi Tien,

    Add the following custom css in Salient > General settings > CSS/Script related:

    .homePage header#top nav > .sf-menu > li > a:hover {
    color: red !important;
}

    4645336171.png


    Hope this helps.

  • Tien Le replied
    September 15, 2020 at 4:17pm

    Hi Andrew, 

    I did add the following code

    .homePage header#top nav > .sf-menu > li > a:hover {    color: red !important;


    and it prompted an error: Expect RBRACE at line 2. 

    It also asked me to add something else at the end align_contents, align-items, etc... Which one should I choose?

    Tien

  •  2,719
    Andrew replied
    September 15, 2020 at 4:26pm

    Hi Tien,

    You did not copy correctly. It is missing closing brace:

    .homePage header#top nav > .sf-menu > li > a:hover {
    color: red !important;
}

    Thanks.

  • Tien Le replied
    September 15, 2020 at 4:35pm

    Oops, thanks Andrew. 

    In addition, how can I change the text color before hovering? They are black now, how can I change to white?

    Thanks, 

  •  2,719
    Andrew replied
    September 15, 2020 at 5:29pm

    Hi Tien,

    The following will change font color:

    .homePage header#top nav > .sf-menu > li > a {    
    color: white !important;
}

    Thanks.

  • Tien Le replied
    September 15, 2020 at 5:41pm

    That works! Thanks so much Andrew! 

    Tien