Menu Items Background Colours

Hi There

Kharis assisted me to change the border colour of the menu items to #5c0000, but I have also taken the opacity off of the header sliders so now the menu is not very clear.

Could you kindly provide me with some help with code to make the background colour of the menu items white perhaps to make it stand out more?

The url is: www.kradminsolutions.com

Many thanks
Mel

Hello Mel, try to replace this CSS code:

  .main-navigation li {
      border-color: #5c0000; /* Border color */
    }

…with this:

.main-navigation li {
    border-color: #5c0000; /* Border color */
    background-color: rgba(255, 255, 255, 0.5);
}

.main-navigation li:hover {
    background-color: rgba(255, 255, 255, 0.8);
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.
aThemes Support

Hi Roman,

This is so perfect thank you so much :slight_smile: I am sorry for the second question but it looks like I have messed something up in coding with the mobile menu :frowning: it looks like the below:

Is there any chance to take the mobile menu settings back to what they were? I just cant find what I have done wrong to make this pink colour (sorry for the mess and thank you always for your help) :slight_smile:

Best,
Mel

Hello Mel, you are welcome!

It’s this code in your additional CSS (row 94-98):

@media only screen and (max-width: 991px){
  .main-navigation ul {
    background-color: #5c0000;
  }
}

Kind Regards, Roman.
aThemes Support

Hi Roman,

I always say this, but I cant thank you enough!

Have a wonderful day

Best
Mel

You are welcome Mel!

And thank you too :slight_smile:

Kind Regards, Roman.
aThemes Support