Changing top level menu items colour

Sydney
#1

Hi,

This forum has been always a life saver. I need some help with modifying colors of my website. Will you be able to help me?

I want the top level menu items’ color to be black and hover color to be red ONLY WHEN someone is viewing the homepage and before doing any scrolling.

When scrolled down the master header appears, which is red. When scrolled down, I want the top level menu items to be turned white and hover color to be black. I have already achieved this part with the theme settings. So we just need to write a custom code to change the colors for homepage when it is not scrolled down.

Website link - https://www.temporary-url.com/9DD

Thanks in advance !

#2

Hi,

Thank you for contacting us about our theme, Sydney. I am happy to help with your queries.

To manage custom color on the top level link items on the main menu, try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (min-width: 1025px) {

      #mainnav ul.menu > li > a {
        color: #fff000;
      }

      #mainnav ul.menu > li > a:hover {
        color: #ff0000;
      }  

    }

Regards,
Kharis
aThemes Support

#3

Hi Kharis,

Thank you very much for your reply. I put that css code, but it changed the link colors all across the website. Also the colors did not changed when the red bar is appeared.

I want the top level menu items to be black color on homepage when the red bar is NOT present. When the red bar is present, I want the top level menu items to be white. Let’s forget about the hover color. I will set it to grey.

Will you be able to suggest some changes accordingly? I am so grateful for your help.
Gihan

#4

Hi Gihan,

I am sorry for sending the code too early.

Try this one:

    @media only screen and (min-width: 1025px) {

      .site-header:not(.float-header) #mainnav ul.menu > li > a {
        color: #ff0000;
      }

    }

Regards,
Kharis
aThemes Support

#5

Hi Kharis,

Thank you very much for your reply. I had to add the page ID to specify its only for homepage. Then it worked ! Will you be able to check my coding to see if it can be more streamlined.

Thanks!
Gihan

@media only screen and (min-width: 1025px) {

 .page-id-7055 .site-header:not(.float-header) #mainnav ul.menu > li > a {
    color: black;
  }

}

@media only screen and (min-width: 1025px) {

 .page-id-7055 .site-header:not(.float-header) #mainnav ul.menu > li > a:hover {
    color: #d65050;
  }

}
#6

Hi,

You can use this code:

    @media only screen and (min-width: 1025px) {

      .home .site-header:not(.float-header) #mainnav ul.menu > li > a {
        color: #ff0000;
      }

    }

Regards,
Kharis
aThemes Support

#7

Hey Kharis,

Sorry for not getting back to you soon. Thank you very much for your help. It works properly :smiley:

Gihan

#8

You’re welcome Gihan!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis
aThemes Support