|
rhj4
|
December 20, 2016 at 3:05 pm
I have spent several hours trying to style my http://www.commexions.world main menu the way I want to see it, but without any success. The problem is that there is no space between the menu items and that when I mouse over an item, I can barely see the background color change. I want the menu items to be set with a border-radius of 5px and with a distinct color change when I mouse over a menu item.
At this point, I only have a single menu, the main menu. I have looked closely at the Iced-Mocha theme settings but I don’t see a setting that allows me to change the on-hover background / text color.
Thanks in advance for your great support.
Bob Jones
|
|
Josh
|
December 21, 2016 at 7:21 am
Hi Bob,
While there are many options for changing the styles in Iced Mocha, there isn’t an option for every single element + every single element on hover.
This is the type of customization you can do with a bit of CSS.
So for example, you can change the hover styles with CSS like this:
#access li:hover > a span {
background-color:#000;
color: #fff
}
Then add some spacing between the main menu items:
#access li > a {
margin: 6px 3px;
}
Then add a border:
#access li > a span {
border: 1px solid transparent;
border-radius: 5px;
}
You’ll likely save some time with making changes like these by making use of the Firebug extension, and here’s a great introduction video that shows how Firebug works:
http://css-tricks.com/video-screencasts/15-introduction-to-firebug/
|
|
rhj4
|
December 21, 2016 at 3:05 pm
Josh,
That worked great. Thanks!
|
