CODEWITHSUNDEEP
themesmedia-queriesprestashopfont-awesome
Pawel Gumiela
Pawel Gumiela

Reputation: 2040

Replace menu item with icon (Media Queries - PrestaShop theme)

I've already received some valuable informations in answer related to my previous question but I still have the problem with media queries. Previous question: Replace menu item with icon (Prestashop theme) I'm working with this demo: http://livedemo00.template-help.com/prestashop_53577

enter image description here

The problem is connected with the look on mobile devices. Home icon is hidden. How to make similar effect on max-width: 767 px etc.? Classes are not the same in superfish-modified.css and I'm a little bit confused with that.

enter image description here CSS Files which were changed:

blocktopmenu.css http://pastebin.com/PzyhH9x6 This code was added:

.stickUpTop.isStuck .sf-menu li:first-child a:before {
  content: "\f015";
  font-family: "FontAwesome";
  display: inline-block;
  font-size: 33px;
  line-height: 55px;
  color: black;
  text-indent: 0;
  width: 0;
  left: 0;
}

.stickUpTop.isStuck .sf-menu li ul li a:before {
  content: none!important;
}
.stickUpTop.isStuck .sf-menu li:first-child a:after{
  width: 0;
}

superfish-modified.css: http://pastebin.com/f2JG4hnT This code was added:

.sf-menu li:first-child a { 
text-indent: -9999em; 
white-space: nowrap; 
} 

.sf-menu li:first-child a:before{ 
content: "\f015"; 
font-family: "FontAwesome"; 
display: inline-block; 
font-size: 33px; 
line-height: 70px; 
color: black; 
text-indent: 0; 
width: auto; 
left: 0; 
} 

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

Upvotes: 0

Views: 668

Answers (1)

Agnes D
Agnes D

Reputation: 461

You should add this:

.sf-menu li:first-child a:before {
    position: absolute;
}

and remove on line 92 of superfished-modified.css the line

content: "";

because that is what remove you icon on smaller resolutions

Upvotes: 1

Related Questions