Hey,
This can easily be done with custom CSS. Here is the code for you
/*Changes the menu background color and align menu to the right*/
.menu {
background-color: #85abff;
background-image: none;
text-align: right;
}
/*Overrides the themes default settings to make sure the menu aligns right */
.menu li {
display: inline-block;
float: none !important;
}
/*Changes link color */
.menu a {
color: #ffffff;
}
You can adjust the menu background to whatever color you like.
Important: Just copy and paste this code into the bottom of your Custom CSS or Child Theme style.css so that you won’t lose your changes once you update your theme in the future. A Child Theme is the safest and best way to go when doing all kinds of modifications.
I hope this helps. 🙂
Onwards and upwards,
-Trey
@DesignByTrey:
Thanks so much for your response. The menu floated to the right (thanks!) Could you suggest code for changing background color to white while also changing text color of menu to charcoal/grey? (keeping in mind, currently, text color of menu is white). Though I was able to change background of menu to white, I wasn’t able to successfully change text to menu from white to grey.
Again any assistance is much appreciated.
C
Hey,
Just change the #ffffff to something like #333333 and that will give you a nice grey color. To find your perfect color, you can always use THIS WEBSITE. Just select the right color and copy and past the code in the custom code that I gave you
Cheers!
-Trey
@DesignByTrey:
Thanks so much. A couple more things,
1) How do you get rid of vertical borders (black) between menu items?
2) How do you ensure all background – when hovering over menu – stays default gradient grey? (currently, when hovering, it is mostly the default gradient grey but also has bits of white on side)
Thanks in advance,
C
Could I have the link to your website so that I can take a look at what is going on exactly. Therefore, I could better assist you.
-Trey
Hi Trey,
It’s actually under construction, but will get it off so you can assess
http://picneewatch.com
Thanks in advance,
C
Hey,
Just add this code and it will take care of it:
.menu a {
border-left: none;
}
-Trey
Also, this code is needed to align your sub-menu:
.menu li li {
display: block;
text-align: left;
}
@DesignByTrey:
Thank you so much; worked like a charm!
My pleasure! Glad I could help. 🙂
Make sure you mark this topic as “resolved” so that others know.
Cheers!
-Trey
Will do; thanks again Trey!
