Jump to content

[SOLVED] Change "Home" in top menù with icon

Fashionist
 Share

Recommended Posts

eburgaz Newbie

eburgaz

Posted
Posted

Hello!

Admin Panel/Modules/Top Horizontal Menu/Settings

 

 

Hi all,

 

I would like to change the home link in the top menù bar with an house icon like prestashop main site. How can I do?

 

I'm on the default theme.

 

Thanks all!!

Link to comment
Share on other sites
vekia Apprentice

vekia

Posted
Posted

Hi all,

 

I would like to change the home link in the top menù bar with an house icon like prestashop main site. How can I do?

 

I'm on the default theme.

 

Thanks all!!

 

 

if your "home" link is a first menu item you can use css styles

.sf-menu li:first-child a:before{
  color:black!important;
  content: "\f015";
  font-family: "FontAwesome";
  display: inline-block;
  font-size: 33px;
  line-height: 10px;
  color: black;
}

.sf-menu li:first-child ul li a:before{
  content:none;
}

if you havent got home link, create custom link with url to your homepage (you can define custom links on module configuration page). then change its position (it must be first on list).

  • Like 2
Link to comment
Share on other sites
vekia Apprentice

vekia

Posted
Posted

 

 

I would like to change the home link in the top menù bar with an house icon like prestashop main site. How can I do?

this is what Fashionist asked,

 

how it's related to:

Favicon, Logo, Store icon, Header logo,Header logo for mobile, Mail logo, Invoice logo, …

Link to comment
Share on other sites
  • 2 weeks later...
Goyo Newbie

Goyo

Posted
Posted

if your "home" link is a first menu item you can use css styles

.sf-menu li:first-child a:before{
  color:black!important;
  content: "\f015";
  font-family: "FontAwesome";
  display: inline-block;
  font-size: 33px;
  line-height: 10px;
  color: black;
}

.sf-menu li:first-child ul li a:before{
  content:none;
}

if you havent got home link, create custom link with url to your homepage (you can define custom links on module configuration page). then change its position (it must be first on list).

 

Hi vekia,
could you say me what is file I have to insert this code? 
I'm sorry my ignorance.
Thanks.
Link to comment
Share on other sites
Goyo Newbie

Goyo

Posted
Posted

you can paste this code to the global.css file located in your theme directory in /css/ subdirectory

 

Hi vekia,
 
is working good but exist other problem. If you insert this code, when you open the categorie of main menu you can see the home image together at the name of the sub-categorie. Attached the image.
 
Thanks.
 
Link to comment
Share on other sites
Goyo Newbie

Goyo

Posted
Posted

you pasted these two codes or only first one? second is also necessary

 

I insert both codes

 

.sf-menu li:first-child a:before{
  color:black!important;
  content: "\f015";
  font-family: "FontAwesome";
  display: inline-block;
  font-size: 23px;
  line-height: 10px;
  color: black;
}
 
.sf-menu li:first-child ul li a:before{
  content:none;
}
 
Only I modified font-size to 23 px.
Link to comment
Share on other sites
Goyo Newbie

Goyo

Posted
Posted

 

ok i get it :)

 

use this code

.sf-menu li ul li a:before{
  content:none!important;
}

 

It's OK !!!
 
Please, one question more:
 
If I want to chage the color of the home image, I suppose I have to change this lines with the color I want to use (both or only one of these):
 
color:black!important;
color: black;
 
Thanks.
Link to comment
Share on other sites
Goyo Newbie

Goyo

Posted
Posted (edited)

you're welcome :-) now we have nice solution to insert home button as pictogram

thanks for cooperation

 

Thanks vekia,
It's possible you have here other article for mypresta.eu!!! Easy to do, easy to understand and very useful for the people!!!
Congratulations for your work!!!
Edited by Goyo (see edit history)
Link to comment
Share on other sites
  • 4 months later...
Goyo Newbie

Goyo

Posted
Posted

Old post but very useful option! I am just a noob but iI have to ask... is there a special where to paste it within the global.css file?  can't  find anything similar

 
Hi rudy5,
 
You can't find similar code because it's new code you have to insert in your global.css file (by default, this code not exist).
 
I'm using 1.6.0.9 version and I insert the code in the first free line (line 22). I suppose the line you will use is not very important, but I'm not a Css expert. For me, it's working.
 
Regards.
Link to comment
Share on other sites
rudy5 Newbie

rudy5

Posted
Posted

 

 
Hi rudy5,
 
You can't find similar code because it's new code you have to insert in your global.css file (by default, this code not exist).
 
I'm using 1.6.0.9 version and I insert the code in the first free line (line 22). I suppose the line you will use is not very important, but I'm not a Css expert. For me, it's working.
 
Regards.

 

hola goyo. thanks for the answer. yes i pasted it in line 22. maybe i'm not creating the home link in the top menu properly... I went to top horizontal menu module and i created a new link to the home page and put it in the first position

Link to comment
Share on other sites
Goyo Newbie

Goyo

Posted
Posted (edited)

hola goyo. thanks for the answer. yes i pasted it in line 22. maybe i'm not creating the home link in the top menu properly... I went to top horizontal menu module and i created a new link to the home page and put it in the first position

 

Hi rudy5, buenos días?

 

Yes, you have to create and put the first menu item the "home" link.
 
What version of Prestashop are you using?
 
I suppose you copy and paste two codes (.sf-menu li:first-child a:before{...   and    .sf-menu li:first-child ul li a:before{....) It's right?
 
If this doesn't work, change the second code for the next (post #17 of vekia - this code is valid for the versions 1.6.0.8 and 1.6.0.9 - I tested this code in both versions):
.sf-menu li ul li a:before{
   content:none!important;
}
Also, "Clear cache" in Advance Parameters -> Performance
 
You can test this is running in the shop I'm working agetro.eu/ps1609
 
Can you share your url shop, please?
 
Regards.
Edited by Goyo (see edit history)
Link to comment
Share on other sites
rudy5 Newbie

rudy5

Posted
Posted

si buenos dis goyo. my web is still in the localhost and i use version1-6-0.9. Anyway where you have women dresses etc i ave the same with a home in the first place.

 

where the icon of the house is coming from btw? just with the code is supposed to appear or you should have the "image"?

 

gracias por la ayuda goyo

Link to comment
Share on other sites
Goyo Newbie

Goyo

Posted
Posted
Hi,

with the first code you include the home image. You can see this:

content: "\f015";

font-family: "FontAwesome";

You don't need to use any image.

 

Here, you can see all the icons/images of FontAwesome.

 

I suppose your problem is the name of the "label", you insert "Home" when you create the home link in the module "Top menu" and this information should be empty. When you create the link, you have to write only the link address, the field "label" must be empty (without any content).

 

Regards.

Link to comment
Share on other sites
rudy5 Newbie

rudy5

Posted
Posted

 

Hi,
with the first code you include the home image. You can see this:
content: "\f015";
font-family: "FontAwesome";
You don't need to use any image.
 
Here, you can see all the icons/images of FontAwesome.
 
I suppose your problem is the name of the "label", you insert "Home" when you create the home link in the module "Top menu" and this information should be empty. When you create the link, you have to write only the link address, the field "label" must be empty (without any content).
 
Regards.

 

post-838298-0-28647300-1411214281_thumb.png

 

I didn't have the empty label! now it's like this just the empty little spot. i am using the default theme. before i installed a custom one just to try but i erased the custom them folder so they shouldn't be mixed up right?

 

i don't know what did i mess thanks to have so much patience jaja

Link to comment
Share on other sites
Goyo Newbie

Goyo

Posted
Posted (edited)

attachicon.gifCaptura de pantalla 2014-09-20 a las 13.54.47.png

 

I didn't have the empty label! now it's like this just the empty little spot. i am using the default theme. before i installed a custom one just to try but i erased the custom them folder so they shouldn't be mixed up right?

 

i don't know what did i mess thanks to have so much patience jaja

 

 

Hello,
make a test, delete this link and create a new link without label content (only the address) and you have to put the new link in the first position of your menu.
Also, you could verify the code you insert in the global.css file and clear cache.
It's running now?
 
 
Edit:
 
Also, clear the cache of the browser you are using.
Edited by Goyo (see edit history)
  • Like 1
Link to comment
Share on other sites
  • 2 weeks later...
ddt81 Newbie

ddt81

Posted
Posted

 

Hi vekia,
 
is working good but exist other problem. If you insert this code, when you open the categorie of main menu you can see the home image together at the name of the sub-categorie. Attached the image.
 
Thanks.
 

 

 

I would like to embed images in the Top Menu. Up to here everything is ok. 
 
The problem is that in the sub-directories are repeated images. 
 
I modified the CSS Superfish Modified by adding this line: 
 
.sf-menu li: nth-child (1) {background: url ("http://192.168.10.45/rinaldishop/img/cazzo.jpg") no-repeat top} 
 
It works ... but the image is duplicated in the menu below ... 
 
What must be added programmatically?

 

 

 

Link to comment
Share on other sites
Goyo Newbie

Goyo

Posted
Posted

 

I would like to embed images in the Top Menu. Up to here everything is ok. 
 
The problem is that in the sub-directories are repeated images. 
 
I modified the CSS Superfish Modified by adding this line: 
 
.sf-menu li: nth-child (1) {background: url ("http://192.168.10.45/rinaldishop/img/cazzo.jpg") no-repeat top} 
 
It works ... but the image is duplicated in the menu below ... 
 
What must be added programmatically?

 

 

 

 

 

Hi ddt81.

 

Please, check this  topic:

 

http://www.prestashop.com/forums/topic/336769-solvedtop-menu-replace-text-with-images/

 

Regards.

Link to comment
Share on other sites
  • 2 weeks later...
Goyo Newbie

Goyo

Posted
Posted

Thats really a Great Post

 

But On hover how can we change the home icon color to White

 

i've tried this

 

.sf-menu li:first-child a:hover{

color: white !important;

}

 

but there is no effect...

 

Hi Maxima,

 

clear cache in Prestashop and in the browser you are using.

 

Regards.

Link to comment
Share on other sites
Goyo Newbie

Goyo

Posted
Posted

ok, thank you

i checked it

 

use this code:

.sf-menu li:first-child a:hover:before{
color: white!important;
}

enjoy! :)

 

Hi vekia,

 
I see your answer to Maxima about the color "on hover" of Home-Icon.
 
Anyway, I don't solve the way to show the ">" symbol before the submenu options: T-shirts, Blouses, Casual Dresses, Evening Dresses,... as you can see when you install Prestashop.
 
The code I have is this (you can see http://agetro.eu/1608store/):
 
.sf-menu li:first-child a:before{
  color:black!important;
  content: "\f015";
  font-family: "FontAwesome";
  display: inline-block;
  font-size: 23px;
  line-height: 10px;
  color: black;
}
 
.sf-menu li:first-child a:hover:before{
color: white!important;
}
 
.sf-menu li ul li a:before{
  content:none!important;
}
 
Have you any idea/solution for this?
 
Thanks in advance.
 
Goyo.
Link to comment
Share on other sites
vekia Apprentice

vekia

Posted
Posted

 

Hi vekia,

 
I see your answer to Maxima about the color "on hover" of Home-Icon.
 
Anyway, I don't solve the way to show the ">" symbol before the submenu options: T-shirts, Blouses, Casual Dresses, Evening Dresses,... as you can see when you install Prestashop.
 
The code I have is this (you can see http://agetro.eu/1608store/):
 
.sf-menu li:first-child a:before{
  color:black!important;
  content: "\f015";
  font-family: "FontAwesome";
  display: inline-block;
  font-size: 23px;
  line-height: 10px;
  color: black;
}
 
.sf-menu li:first-child a:hover:before{
color: white!important;
}
 
.sf-menu li ul li a:before{
  content:none!important;
}
 
Have you any idea/solution for this?
 
Thanks in advance.
 
Goyo.

 

 

i checked your page, menu there looks like:

cNg78VU.png

 

seems like everything is fine there (?)

im affraid that i don't understand the problem :(

Link to comment
Share on other sites
Goyo Newbie

Goyo

Posted
Posted

i checked your page, menu there looks like:

 

.....

 

seems like everything is fine there (?)

im affraid that i don't understand the problem :(

 

Hi vekia,

 
thanks for your answer. 
 
I would like to insert before of "T-shirts", "Blouses", "Casual Dresses",... (third level options) for example the symbol ">" or other symbol.
 
If you see now the web (http://agetro.eu/1608store/), I have changed the code:
 
.sf-menu li ul li a:before{
  content:none!important;
}
 
For this:
 
.sf-menu li ul li a:before{
  content:"\f111"!important;
  font-family: "FontAwesome";
  display: inline-block;
  font-size: 10px !important;
}
 
But, only, I obtain the result I want for the options menu: "Evening Dresses" and "Summer dresses". This is not ok for "T-shirts", "Blouses" and "Casual Dresses".
 
Nor, I want to put this symbol for the second level "TOPS" and "DRESSES" (I prefer to see the category title only for the second level of categories options without any symbol).
 
Thanks.
Link to comment
Share on other sites
Goyo Newbie

Goyo

Posted
Posted

thanks for this topic, but how can I set different colors for icon for active (attachment)

 

Hi mastek,

 

Test this code:

 

.sf-menu li:first-child a:before{

  color:black!important;

  content: "\f015";

  font-family: "FontAwesome";

  display: inline-block;

  font-size: 23px;

  line-height: 10px;

  color: black;

}

 

.sf-menu li:first-child a:hover:before{

color: white!important;

}

 

.sf-menu li ul li a:before{

  content:none!important;

}

 

Regards.

Link to comment
Share on other sites
mastek Newbie

mastek

Posted
Posted

Hi Goyo,

 

I use this code and its working only for hover, in active its still gray

 

my code is:

#block_top_menu .sf-menu > li.active {
background: #104c8d;
}

.sf-menu li:first-child a:before{
  color: #484848 !important;
  content: "\f015";
  font-family: "FontAwesome";
  display: inline-block;
  font-size: 23px;
  line-height: 10px;
  color: black;
}

.sf-menu li:first-child a:hover:before{
color: white!important;
}


.sf-menu li ul li a:before{
  content:none !important;
}

you can see problem here

Link to comment
Share on other sites
Goyo Newbie

Goyo

Posted
Posted

Please, check you create to top horizontal menu module a new link to the home page (without label) and put it in the first position.

 

Also, clear cache from back office and clear the cache of the browser you are using.

  • Like 1
Link to comment
Share on other sites
mastek Newbie

mastek

Posted
Posted (edited)

Hi mastek,

 

Your shop is "PRZERWA TECHNICZNA"

 

Please, open the shop to see.

 

 

Edit: 

 

Do you want this result?

 

 

sry, I forgot about it

store is now online here

 

EDIT:

 

This result its not working form me because i change active background too.

I try do get the grey icon only on not hovered, not active.

Edited by mastek (see edit history)
Link to comment
Share on other sites
mastek Newbie

mastek

Posted
Posted

this may not be an elegant solution, but it solved my problem

#block_top_menu .sf-menu > li.active {
background: url(../img/home_active.png) 29px 0px no-repeat #104c8d;
}

.sf-menu li:first-child {
background: url(../img/home_icon.png) 29px 0px no-repeat #f5f5f5;
height: 60px;
}

.sf-menu li:first-child a:hover{
background: url(../img/home_active.png) 29px 0px no-repeat #104c8d;
height: 60px;
}

.sf-menu li ul li a:hover{
  background: none !important;
}

.sf-menu li ul li:first-child{
  background: none !important;
}
Link to comment
Share on other sites
FurkyStyle Newbie

FurkyStyle

Posted
Posted

The solution to put a Home logo was great, but I have a problem: the home logo (FontAwesome) appears in all sub menus.

 

Find attached a print screen.

 

Any solution to this?

 

Read the topic from the start please:

 

 

 

 

use this code

.sf-menu li ul li a:before{

content:none!important;

}

 

 

Link to comment
Share on other sites
  • 1 month later...
 Share
Go to topic listing
×
×
  • Create New...