[SOLVED] Replacing Top Nav items with images

[Boxon]

Hi,

I would like to replace text "HOME" in Top Horizontal menu with the "home" icon. Is there a way to do that?
Thans, Boxon

[benjamin utterback]

Hi Boxon, I think you posted in the wrong section! This is for PrestaBOX  

 

It can be confusing, I'll move this thread to the right section for a better chance at response. Thank you and welcome to the Forum!

[vekia]

the questions is:

 

"HOME" is a link to homepage, or it is "HOME" category ?

[Boxon]

"HOME" is a link to homepage. 

[vekia]

okay, so if this is a first element in your menu you can define css styles for it

for example:

 

.sf-menu:first-child

.sf-menu:first-child a 

 

you can define css styles for these classes - background url('url to image'), hide text etc.

[Boxon]

Well, after hour of playing with first-child, I realized that "HOME" is category. So, when I change

.sf-menu:first-child a

I actually change all elements of nested list.
I tried all possible combinations with :first-child, and results are, well, lets say that it is good that site is still not launched  ...

I will hapilly accept any new ideas.

[vekia]

so in this case you need to define new link manually (there is feature to define own links)

then you will be able to use first-child css feature

[Boxon]

Vekia, I am boring you, but after 2 hours of goggling, I couldn't find a way how to define a new link. Can you be more specific, or give me some link for link ?

Thank you...

[Bachmann Trading]

Hi Guys.

 

I have fiddled around with this for hours now. It driving me crazy. I have used first child in almost all possible scenarios, but no luck...at all. 

 

Can someone please walk me through it.

 

Which file and where to add what code?

 

Thanks in advance for Your help.

 

Martin Bachmann whatbunkers.com

 

 

[Boxon]

I explained to client that it is a huge problem, that involves activation of integral setyzweckers and Lackmusarian loop, so it may destroy database.

So, I gave up.

[vekia]

hello

 

sorry for late reply

 

on top horizontal menu configuration page you can:

 

1

define own link in the "Add menu Top link" form:

 

 

2

 

then remove all positions from right hand side box

 

 

 

3

 

then add new position (link that you generated)

1) select "home"

2) click on add

3) save changes or add other categories / links that you want to display in top menu

 

 

 

 

then in in superfish-modified define styles:

 

.sf-menu li:first-child a {

    background:red;

}

(or use any other style you want)

 

with this method you can personalize / customize first element of menu

[Bachmann Trading]

Wow vekia,

 

That did the trick  Thank You so much. I was certain i tried this myself as well, but I guess i didn´t since it worked like a charm when i followed Your instructions.

 

Thanks again. Martin from whatbunkers.

[vekia]

you're welcome im glad that i could help you

im going to mark this topic as [solved]

 

best regards

[ruslan1984]

Hello Vekia, 

What about other drop-down items in the menu. The first item also inherits the home icon. 

How to solve this?

Thanks. 

[vekia]

Hello Vekia, 

What about other drop-down items in the menu. The first item also inherits the home icon. 

How to solve this?

Thanks. 

 

it's a bit old topic,

what you exactly expect?

[ruslan1984]

I want home icon appear instead of home menu item only, but when I use 

.sf-menu li:first-child a {

    background:url (image url);

}

home icon appears instead of home menu item (this is correct)

and instead of first items in the drop-down menus of other menu categories

Hope I made it clear. 

So I want this home icon appear instead of home menu item only

[vekia]

i have no idea what's going on, is there any chance to see this problem live?

if so, please share url to yout website where i can check it

[ruslan1984]

Please go here: http://prikid.su.kg/index.php and check top menu Ipods item

[vekia]

it's clear now thank you for link.

 

instead of :

.sf-menu li:first-child a{
background: url('../img/bg_menu_home.png')  center center no-repeat;
text-indent: -30000px;
width: 40px;
}

use  this:

.sf-menu>li:first-child a{
background: url('../img/bg_menu_home.png')  center center no-repeat;
text-indent: -30000px;
width: 40px;
}

effect:

[ruslan1984]

Thank you Vekia, 

really appreciate your help and time. 

Regards