[Djapeto]

Is it possible to add image before text in menu. I tried with this code:

.download a{
padding-left: 30px !important;
background-image: url(images/ciklama.jpg);
background-position: left;
background-repeat: no-repeat;
}

where “download” is name of class of menu item (CSS optional)

Tesxt of “Download” link is moved right but there is no image
pls visit:
http://demo.raznirecepti.com/demo/

[Sakin]

@Djapeto: I cannot fine that image link. Can you send me the complete image URL.

[Djapeto]

this is full path:
0:/demo/wp-content/themes/catch/kathmandu/images

and this is css:

.download a{
padding-left: 100px !important;
background-image: url(“‘demo/wp-content/themes/catch-kathmandu/images/ciklama.jpg);
background-position: left;
background-repeat: no-repeat;
}

I tried with path:
url(“‘wp-content/themes/catch-kathmandu/images/ciklama.jpg) but nothing happens

[Sakin]

@Djapeto: You are not supposed to edit any core theme file or add anything in core theme folder. As this folder will be reverted back when you update the theme. You can simply upload the image from “Media => Add New” from your WordPress dashboard and then send me the image url.

[Djapeto]

Ok. I followed your instruction and I got this file-/image url:

http://demo.raznirecepti.com/demo/wp-content/uploads/2014/04/ciklama.jpg

Thanks!

[Sakin]

@Djapeto: Remove your custom css and add the following css in “Appearance => Theme Options => Custom CSS” box.

#header-menu .download a {
    background: url("http://demo.raznirecepti.com/demo/wp-content/uploads/2014/04/ciklama.jpg") no-repeat scroll left center transparent;
    padding-left: 25px !important;
}

[Djapeto]

Thank you a lot Sakin, it’s working now. One question more.

How to keep Text “Download” visible because on hover text link disappear? Also, when I use same logic for sub menu items it seems that sub menu items are transparent. I wish to keep them with default background color.

[Sakin]

@Djapeto: Sorry i forgot that there is background color. Just replace previous css with the following.

#header-menu .download a {
    background-image: url("http://demo.raznirecepti.com/demo/wp-content/uploads/2014/04/ciklama.jpg");
    background-position: left center;
    background-repeat: no-repeat;
    padding-left: 25px;
}

[Djapeto]

Thank you Sakin! Sorry for late reply. I put small icons in front of submenu text
http://demo.raznirecepti.com/demo

How to avoid issue that icon from primary menu override all my submenu icons?

Can I decrease somehow width of submenu? Default width is 205px but when I try to change this value in css nothing happens.

[Djapeto]

If you turn off background image in link “Skupstine stanara” you will see all icons of submenu items.

[Sakin]

@Djapeto: I see that you have background in the main menu as
#header-menu .users_icon a { }
But then for sub-menus you added in like
#header-menu .seboj a { }
But instead it should be as
#header-menu .users_icon .seboj a { }

[Djapeto]

Ok. Thanks. I put !important at the end of url and got the same effect:

url(“http://demo.raznirecepti.com/demo/wp-content/uploads/2014/04/ciklama.png”) !important;

Can I decrease somehow width of submenu? Default width is 205px but when I try to change this value in css nothing happens.

rgds,
Djapeto

[Sakin]

@Djapeto: You should change the width of both. I have make it smaller. Add the following css.

.header-sidebar .widget ul.menu ul { width: 169px; }
.header-sidebar .widget ul.menu ul a { width: 105px; }

[Djapeto]

Thanks!

[Djapeto]

Hi,

I follow your instrucions but I have problem with two submenu items
Suncokret A and Suncokret B. The icons for these two items are same as parent menu item icon (main menu – Skupstine stanara)

Please advice what to do!

http://www.firstfacility-belville.net/

regards,
Djapeto

[Sakin]

Hi Djapeto,

First there is issue with your custom CSS. Please remove the following line
/*end */}

Then you have added image attachment page URL. But you are supposed to add in image url. See your css:

#header-menu .users_icon .suncokret a {
    background-image: url("http://www.firstfacility-belville.net/?p=291") !important;
    background-position: 6px;
    background-repeat: no-repeat;
    padding-left: 45px;
}

http://www.firstfacility-belville.net/?p=291 is image attachment page URL where as http://www.firstfacility-belville.net/wp-content/uploads/2014/04/suncokret.png is your image URL. So, try replacing the your above css with the following:

#header-menu .users_icon .suncokret a {
    background-image: url("http://www.firstfacility-belville.net/wp-content/uploads/2014/04/suncokret.png");
    background-position: 6px;
    background-repeat: no-repeat;
    padding-left: 45px;
}

[Huca]

Hi,

I am trying to add image to my menu on this page:

http://solveprague.cz/

by using the code

`#header-menu .home a {
background-image: url(“http://solveprague.cz/wp-content/uploads/2016/05/logoSP2525.jpg”);
background-position: left center;
background-repeat: no-repeat;
padding-left: 25px;
}

tbh I am not really sure where to change name of class menu item. I have changed it in atribute title to “home”.

thanks for your help.

[Sakin]

try using
.nav-primary .menu-item-1502 a { }

[Huca]

Thanks a lot it works!

One more question – any idea, how to set just a tiny left margin for the image itself so it would be exactly on the left side? When being on this particular page the menu is ugly. However all the margins and padding apply for text only, not for image.

[Sakin]

@Huca: You can control that with margin and then background-position

[Author]

Posts