Sub-Menu Background Color

  • 1
  • Question
  • Updated 5 years ago
  • Answered
The appearance of all sub-menu items (regardless of theme) is a blue hatch pattern. Is there a way to override or change the color of sub-menu items?
Photo of Caniluna

Caniluna

  • 6 Posts
  • 0 Reply Likes

Posted 5 years ago

  • 1
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Caniluna

You can change both the background colour of the whole Fly Over Menu and the hover background colour of the individual menu items. To do this, you'd need to work with HTML/CSS code on your website. Here are the codes:

A. Code to change the whole background colour
.ys_submenu {

background-color: #ffffff !important;
border:solid 1px #000000 !important;
background:#ffffff !important;
background:#ffffff -webkit-gradient(linear, center top, center bottom, from(#ffffff), to(#ffffff)) !important;
background:#ffffff -moz-linear-gradient(center top, #ffffff 0%, #ffffff 100%) !important;
border:0px solid #ffffff !important;
}

B. Code to change the menu item background colour
.ys_submenu ul li:hover {

background: none;
background: #000033 !important;
}

This is how it works:
  1. Copy the code you need completely.

  2. Drag and drop an HTML Widget to your page.

  3. Type < style >, new line, < / style> again, without the blank spaces I had to add here.
  4. Paste the code between the < style > tags.

  5. Edit the colour codes (the code shows #ffffff and #000033). To get the right colour code, these resources will help: Yola Colour Code Chart and Cloford Colour List.

  6. Save your edits, the HTML Widget will close.

  7. Preview your changes.

  8. If you're happy, republish, otherwise, re-edit.

Currently you will need to add the same code to each page of your website, using the HTML Widget.