Adding Images In Menu

increasethewedge · January 2016

Hi,

I loaded the be financial demo and each of the menu items has a small image next to the text.

I have added a page to the menu and would like to also add a similar image to this menu item also.

Please could you provide details on how to do so?

Regards,

Increase The Wedge

Albert · January 2016

Hi,

for each of those menu items, we set class name under Appearance > Menus section and then, under Theme options > Custom CSS & JS > Custom CSS section, we set those backgrounds for each of items with css:

/* Menu icons */
.menu-home {
    background: url("http://themes.muffingroup.com/be/finance/wp-content/uploads/2015/01/home_finance_menu_icon1.png") no-repeat 8px center; }
.menu-about {
    background: url("http://themes.muffingroup.com/be/finance/wp-content/uploads/2015/01/home_finance_menu_icon2.png") no-repeat 8px center; }
.menu-offer {
    background: url("http://themes.muffingroup.com/be/finance/wp-content/uploads/2015/01/home_finance_menu_icon3.png") no-repeat 8px center; }
.menu-testimonials {
    background: url("http://themes.muffingroup.com/be/finance/wp-content/uploads/2015/01/home_finance_menu_icon4.png") no-repeat 8px center; }
.menu-contact {
    background: url("http://themes.muffingroup.com/be/finance/wp-content/uploads/2015/01/home_finance_menu_icon5.png") no-repeat 8px center; }

increasethewedge · January 2016

Thank you for your reply.

I understand where to add the background image to each item, however you said to set the class name in the Appearance > Menus section. I cannot see where I would set the class name here, please advise.

Thanks

Albert · January 2016

When you are in Appearance > Menus section, click on Screen Options in the right top corner to activate extra fields for menu items.

increasethewedge · January 2016

Thank you very much.

Albert · January 2016

You're welcome!

Enkew · January 2016

Hi @muffingroup

Same question but for BOOK demo.

1) Under screen option am I clicking "css classes?"

2) we can change the icons so it is custom icons in front of the menu by uploading our own icons correct?

3) can you provide the coding that came with BOOK demo ?

Albert · January 2016

@Enkew For Be|Book demo, we did it different way. Instead of standard Navigation Label for each menu item, we use something like:

<i style="font-size: 80%;" class="icon-home"></i> Home

Adding Images In Menu

Comments