Image around Menu items

[calendargirl]

Can anyone direct me on how to create an image around a menu item? I see alot of sites whose menu selection is an image or shape, etc. I need something like that because my menu is difficult to see with the background I've chosen. Any help here would be appreciated.... thanks

http://land.xperiencenpil.com/

http://land.xperiencenpil.com/

[Brad Dalton]

You mean behind a menu?

---

Tutorials for StudioPress Themes.

[Graham]

Using CSS background on the menu item is probably the way to go

e.g. this just makes the background of all the menu items yellow

.site-header .genesis-nav-menu .menu-item {
    background-color: yellow;
}

to give them all a background image

.site-header .genesis-nav-menu .menu-item {
    background-image: url("path/to/your/image.png");
}

If you wanted to style each menu item differently, then you could make use of the advanced menu properties from within your WordPress dashboard.

Dashboard > Appearance > Menus > Screen options > Show advanced menu properties > Ensure "CSS Classes" is checked

You would then be able to add a separate CSS class to each menu item, e.g. program-overview. Having done that, you could then target that menu item in the CSS.

For example

.site-header .genesis-nav-menu .program-overview {
    background-color: red;
}

---

My JustGiving page: https://www.justgiving.com/helping-graham-give

[calendargirl]

Got it....I completely understand now. Thank YOU!!!

[Author]

Posts