How can I change my navigation menu color?

  • 1
  • Question
  • Updated 7 years ago
I need to change the color of the navigation bar and not the font color! Can anyone help me please? Thanks!
Photo of Rola

Rola

  • 31 Posts
  • 0 Reply Likes

Posted 7 years ago

  • 1
Photo of Jeremy Paton

Jeremy Paton

  • 159 Posts
  • 16 Reply Likes
Dear Rola.
Would it be possible to see your site?
Do you have Yola Silver?
Photo of Jeremy Paton

Jeremy Paton

  • 159 Posts
  • 16 Reply Likes
In a few of the Yola styles I have worked with the menu background is usually an image which is repeated horizontally the length of the menu bar.

Thus to change the colour one needs to change the image.
This is the colour, background image of my menu.
My Menu Image

Thus I need to also know which style/theme you are using?
Photo of Rola

Rola

  • 31 Posts
  • 0 Reply Likes
Hi Jeremy
Yes I do have Yola Silver but I haven't published my site yet, I am still working on it!
Photo of Rola

Rola

  • 31 Posts
  • 0 Reply Likes
I am using the clean theme. Its menu color is blue.
Photo of Jeremy Paton

Jeremy Paton

  • 159 Posts
  • 16 Reply Likes
<!--
div.ys-menu-wrap {
position:relative;
background:#a7c7dc url(http://s1.yolacdn.net/V0020964/templa...) bottom left repeat-x;
margin:0 0 15px 0;
padding:0;

}
-->
This is the CSS code used for the menu. As you can see the colour is actually the following image:
menu colour

I would suggest that you copy that image and change it's colour, or get its size and use an imaging software such as Gimp or Photoshop to create a new image (with the same dimensions) and with the colour you want.

Then upload the image to your site and change the background image URL to the uploaded file.

I hope this helps, I for one have never needed to change my menu's colour. So hopefully anybody who has can clarify this for you if the above does not work
Photo of Jeremy Paton

Jeremy Paton

  • 159 Posts
  • 16 Reply Likes
You will also need to change the corners image: To match your new menu image.

<!--
div.ys-menu-wrap div.ys-corner-tl, div.ys-menu-wrap div.ys-corner-bl, div.ys-menu-wrap div.ys-corner-br, div.ys-menu-wrap div.ys-corner-tr {
background-image:url(http://s1.yolacdn.net/V0020964/templa...;
background-repeat:no-repeat;
width:10px;
font-size:0;
position:absolute;
}
-->
This is the CSS code used for the menu. As you can see the colour is actually the following image:
Menu Corners

I think if you follow the same steps above you should be able to easily change the corners image.
Photo of Rola

Rola

  • 31 Posts
  • 0 Reply Likes
Thank you so much. I will try it!