[jpandinoParticipant]

Hello, I am struggling trying to use custom icons on the Nav menu, I am unable to give them padding-top, it seems padding-left works properly on the same line of code. Could you please advice on how I can give my custom icons the onclick functionality to go to the right page.

li#menu-item-246 {
background: url(‘http://jpandino.com/wp-content/uploads/2016/03/icon-service-white.png’);background-size: 42px 42px ;background-repeat: no-repeat; no-repeat left;
}

[John EzraMember]

Hi there,

Thanks for writing in! To assist you with this issue, would you mind providing us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything. Thanks!

[jpandinoParticipant]

http://jpandino.com/

I am having problems with the padding top and making sure the icon have the mouse over effect of the nav menu font… also with the on click on the icon to navigate…

[LelyModerator]

Hi There,

We need to add the icon as background on the link to make it clickable.
Remove the following CSS:

li#menu-item-244 {
    background: url('http://jpandino.com/wp-content/uploads/2016/03/icon-marketing-white.png');
    background-size: 48px 48px;
    background-repeat: no-repeat;
    padding-left: 35px;
    vertical-align: middle;
}
li#menu-item-249 {
    background: url('http://jpandino.com/wp-content/uploads/2016/03/icon-sales-white.png');
    background-size: 48px 48px;
    background-repeat: no-repeat;
    padding-left: 35px;
}
li#menu-item-252 {
    background: url('http://jpandino.com/wp-content/uploads/2016/03/icon-social-white.png');
    background-size: 48px 48px;
    background-repeat: no-repeat;
    padding-left: 35px;
}
li#menu-item-246 {
    background: url('http://jpandino.com/wp-content/uploads/2016/03/icon-service-white.png');
    background-size: 48px 48px;
    background-repeat: no-repeat;
    padding-left: 28px;
    align: middle;
}

Please use the following CSS instead:

li#menu-item-244>a {
    background: url('http://jpandino.com/wp-content/uploads/2016/03/icon-marketing-white.png');
    background-size: 48px 48px;
    background-repeat: no-repeat;
    vertical-align: middle;
    padding-left: 61px;
    background-position-y: 7px; /*Adjust icon position. Space on top*/
    background-position-x: 7PX;
}
li#menu-item-249>a {
    background: url('http://jpandino.com/wp-content/uploads/2016/03/icon-sales-white.png');
    background-size: 48px 48px;
    background-repeat: no-repeat;
    padding-left: 61px;
    background-position-y: 7px;
    background-position-x: 7PX;
}
li#menu-item-252>a {
    background: url('http://jpandino.com/wp-content/uploads/2016/03/icon-social-white.png');
    background-size: 48px 48px;
    background-repeat: no-repeat;
    padding-left: 61px;
    background-position-y: 7px;
    background-position-x: 7px;
}
li#menu-item-246>a {
    background: url('http://jpandino.com/wp-content/uploads/2016/03/icon-service-white.png');
    background-size: 48px 48px;
    background-repeat: no-repeat;
    padding-left: 61px;
    background-position-y: 7px;
    background-position-x: 7px;
}

Hope this helps.

[jpandinoParticipant]

Thank You, You guys are amazing… Cheers!

[Paul RModerator]

You’re welcome! 🙂

[Author]

Posts