Make the Top Horizontal Menu for 1.6 like 1.5? [HELP]

billy_the_king · July 15, 2014

Hello dear prestashopers!

I do not like how the subcategories are shown in the Top Horizontal Menu in Prestashop 1.6...

I want to achieve something more simplistic, like in prestashop 1.5:

- simple vertical subcategories grid

- no pictures attached

Can somebody help me please?

Best regards

vekia · July 15, 2014

copy css styles from superfish-modified.css file from prestashop 1.5 to your file from ps 1.6

you will get exactly the same menu as it was in 15

Iron giant · July 15, 2014

Hello,

Go to catalog then choose the category from it and remove the thumbnails from that category

Please check the attach image also.

Thanks

billy_the_king · July 15, 2014

Thank you both very much!

The only problem now, is that I have to make it responsive. Seems that in version 1.5 there is no responsiveness. Am I correct?

vekia · July 15, 2014

i think that this will remove pictures only

Thank you both very much!

The only problem now, is that I have to make it responsive. Seems that in version 1.5 there is no responsiveness. Am I correct?

yes you've got right

you can copy media queries from ps 1.6 to your css file

Iron giant · July 15, 2014

Yes it will remove only the pictures and like you said the css file will do the rest.

cheers

billy_the_king · July 15, 2014

you can copy media queries from ps 1.6 to your css file

These queries are in the superfish-modified.css file or I have to look somewhere else?

Thank you in advance

vekia · July 15, 2014

they are stored in superfish-modified

for example:

@media (max-width: 767px) {
    .sf-menu > li {
      float: none;
      position: relative;
      border-right: none; }
      .sf-menu > li span {
        position: absolute;
        right: 6px;
        top: 20px;
        width: 30px;
        height: 30px;
        z-index: 2; }
        .sf-menu > li span:after {
          font-family: "FontAwesome";
          content: "\f067";
          font-size: 26px; }
        .sf-menu > li span.active:after {
          content: "\f068"; } }

if you will copy them to your superfish modified you will see nice mobile version

style above (media query that i pasted) makes menu on mobile as a horizontal blocks, like it is in 1.6

billy_the_king · July 15, 2014

I can't remove this akward title, which is above my new top menu.

It says "Categories" (in Greek, my default language)

Any help on how to remove it please?

vekia · July 15, 2014

hello

it's a part of block top menu ?

billy_the_king · July 15, 2014

Yes it is, dear Vekia.

It appeared after pasting the superfish-modified.css from version 1.5 to my current theme

vekia · July 16, 2014

okay i see it now

use this code:

.cat-title {
display: none;
}

@media (max-width: 767px)
.cat-title {
display: block;
font: 600 18px/22px "Open Sans", sans-serif;
text-transform: uppercase;
color: #484848;
display: block;
padding: 17px 20px;
border-bottom: 3px solid #e9e9e9;
background: #f6f6f6;
position: relative;
}
 

billy_the_king · July 17, 2014

Thank you very much Vekia!

I upload my superfish-modified.css that gives the satisfied result, for everyone in Prestashop 1.6 that might need the simple menu layout of Prestashop 1.5

And as Iron Giant mentioned, you should also delete the thumbnails from each category.

superfish-modified.css

Edited July 17, 2014 by billy_the_king (see edit history)

Nikko · July 25, 2014

Thank you very much!

billy_the_king · August 7, 2014

I need some help regarding the responsiveness. I need to make the 1.5 blocktopmenu responsive but I can't find a workaround.

I have to take the "responsive queries" from superfish-modified_1.6.css and copy them to superfish-modified_1.5.css

I upload the two files, if anyone would like to help.

Thanks!

superfish-modified_1.6.css

superfish-modified_1.5.css

vekia · August 7, 2014

can you show contents of your modified file?

im asking because i see that you attached only default files from ps 1.6 and 1.5

billy_the_king · August 7, 2014

The modified css file I use in my site is the "superfish-modified 1_5.css".

I can't get the right responsive queries from the "superfish-modified 1_6.css", so as the block top menu works in mobile (as 1.6 would)

Here is my site. Be sure to set the language to Greek.

vekia · August 7, 2014

check these css styles

/*** ESSENTIAL STYLES ***/
.sf-contener {
	 clear: both;
  float: left;
  width: 100%;
}
.cat-title {
display: none;
}
@media (max-width: 767px)
.cat-title {
display: block;
font: 600 18px/22px "Open Sans", sans-serif;
text-transform: uppercase;
color: #484848;
display: block;
padding: 17px 20px;
border-bottom: 3px solid #e9e9e9;
background: #f6f6f6;
position: relative;
}
.sf-right {
  margin-right: 14px;
  float: right;
  width: 7px;
}
.sf-menu, .sf-menu * {
	margin:			0;
	padding:		0;
	list-style:		none;
}
.sf-menu {
	margin: 10px 0;
	padding:0;
	width:100%;/* 980 */
	background: #383838;}
	@media (max-width: 767px) {
    .sf-menu {
      display: none; } }
	  
.sf-menu ul {
	/* position:		absolute; */
	top:			-999em;
	width:			10em; /* left offset of submenus need to match (see below) */}
	@media (max-width: 767px) {
    .sf-menu ul {
      /* position: relative; */ } }
	  
.sf-menu ul li {
	width:			100%;
}
.sf-menu li:hover {
	visibility:		inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu > li {
	float:			left;
	position:		relative;
	border-right: 1px solid #777;
}
.sf-menu a {
	display:		block;
	position:		relative;
	color:#fff;
	text-shadow:0 1px 0 #333;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
	left:			0;
	top:			34px; /* match top ul list item height */
	z-index:		99;
	width:auto
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
	top:			-999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
	left:			200px; /* match ul width */
	top:			0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
	top:			-999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
	left:			200px; /* match ul width */
	top:			0;
}

/*** DEMO SKIN ***/
.sf-menu {
	float:			left;
	margin-bottom:	1em;
}
.sf-menu a {
	display:block;
	margin-right:2px;
	padding: 0 22px 0 20px;
	line-height:37px;
	border: 0;
	text-decoration:none;
}
.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
	color:			#fff;
	white-space:nowrap;
}
.sf-menu li li {
	background: rgba(65, 45, 44, 0.94);
}
.sf-menu li li li {
	background:	rgba(113, 113, 113, 0.9);
}
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
  	background: #4E4E4E;
}
.sf-menu ul li:hover, .sf-menu ul li.sfHover,
.sf-menu ul li a:focus, .sf-menu ul li a:hover, .sf-menu ul li a:active {
	background:		#4e4e4e;
	outline:		0;
}
/*** arrows **/
.sf-menu a.sf-with-ul {
	padding-right: 	1.25em;
	min-width:		1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
	position:		absolute;
	display:		block;
	right:			10px;
	top:			1.05em; /* IE6 only */
	width:			10px;
	height:			10px;
	text-indent: 	-999em;
	overflow:		hidden;
	background:		url('../img/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
a > .sf-sub-indicator {  /* give all except IE6 the correct values */
	top: 11px;
	background-position: 0 -100px; /* use translucent arrow for modern browsers*/
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
	background-position: -10px -100px; /* arrow hovers for modern browsers*/
}

/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator { background-position:  -10px 0; }
.sf-menu ul a > .sf-sub-indicator { background-position:  0 0; }
/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator,
.sf-menu ul a:hover > .sf-sub-indicator,
.sf-menu ul a:active > .sf-sub-indicator,
.sf-menu ul li:hover > a > .sf-sub-indicator,
.sf-menu ul li.sfHover > a > .sf-sub-indicator {
	background-position: -10px 0; /* arrow hovers for modern browsers*/
}

/*** shadows for all but IE6 ***/
.sf-shadow ul {
	background:	url('../img/shadow.png') no-repeat bottom right;
	padding: 0 8px 9px 0;
	-moz-border-bottom-left-radius: 17px;
	-moz-border-top-right-radius: 17px;
	-webkit-border-top-right-radius: 17px;
	-webkit-border-bottom-left-radius: 17px;
}
.sf-shadow ul.sf-shadow-off {
	background: transparent;
}
li.sf-search {
  background: inherit;
  float: right;
  line-height: 25px;
}
li.sf-search input {
  -moz-border-radius: 0 5px 5px 0;
  padding: 3px 0;
  padding-left: 20px;
  margin: 6px 6px 0 0;
  background: #fff url('../img/search.gif') no-repeat left center;
  border:1px solid #777
}

/* hack IE7 */
.sf-menu a, .sf-menu a:visited {height:34px !IE;}
.sf-menu li li {
	width:200px;
	background:#726f72 !IE;
}


@media (max-width: 479px) {
      .sf-menu > li > ul > li#category-thumbnail > div {
        width: 100%;
        padding-left: 0;
        padding-top: 10px;
        text-align: center; } }
    .sf-menu > li > ul > li#category-thumbnail > div:first-child {
      padding-left: 0; }
    .sf-menu > li > ul > li#category-thumbnail > div img {
      max-width: 100%;
      display: block; }

.cat-title {
  display: none; }
  @media (max-width: 767px) {
	  
	   .sf-menu li {
	    display:block; clear:both;
		width:100%!important;
		overflow:hidden;
	    }
		.sf-menu ul {
			display:block!important;
			clear:both;
			width:100%;
			height:100%;
			position:none;
		}
	    .sf-menu ul li {
			padding-left:20px;
		}
	  
    .cat-title {
      display: block;
      font: 600 18px/22px "Open Sans", sans-serif;
      text-transform: uppercase;
      color: #484848;
      display: block;
      padding: 17px 20px;
      border-bottom: 3px solid #e9e9e9;
      background: #f6f6f6;
      position: relative; }
      .cat-title:hover {
        background: #333333;
        border-bottom-color: #666666;
        color: white; }
      .cat-title:after {
        display: block;
        font-family: "FontAwesome";
        content: "\f067";
        position: absolute;
        right: 15px;
        top: 18px;
        font-size: 26px; }
      .cat-title.active:after {
        content: "\f068"; } }

pbdwaj · September 15, 2014

Dear Vekia,
i know you are the master of all.

i want to change my prestashop 1.6 horizontal menu to prestashop 1.5 vertical menu (taking care that responsive does not loose)

i am attaching my PS 1.6 superfish-modified.css file. please provide me with converted css. i have tried all above options, may be i am not that literate to work on CSS. Please help.

i am also attaching the screenshot of menu which i want.. i know it will be a bit long task for you..but please if you can help me in this.

URL for my store is : store.dcfashions.com

Thanks in advance.

superfish-modified.css

billy_the_king · September 15, 2014

THIS is what I was asking from Vekia (1.5 style in desktop view and 1.6 in mobile and tablet view).

Apparently I did it myself.

Make sure you paste it over the existing superfish-modified.css which is located here:

/public_html/themes/YOUR_THEME/css/modules/blocktopmenu/css/

Looking forward to your results

**Τo delete thumbnails from categories do the following**

Go to catalog then choose the category from it and remove the thumbnails from that category

Please check the attach image also.

superfish-modified.css

Edited September 15, 2014 by billy_the_king (see edit history)

pbdwaj · September 15, 2014

Thanks Billy. i have got the desired results..but not tested the responsive feature on mobile yet. hope it does not disturb the responsive feature.

Nikko · September 18, 2014

THIS is what I was asking from Vekia (1.5 style in desktop view and 1.6 in mobile and tablet view).

Apparently I did it myself.

Make sure you paste it over the existing superfish-modified.css which is located here:

/public_html/themes/YOUR_THEME/css/modules/blocktopmenu/css/

Looking forward to your results

**Τo delete thumbnails from categories do the following**

Go to catalog then choose the category from it and remove the thumbnails from that category

Please check the attach image also.

Thank you very much Billy! You Rock!

Edited September 18, 2014 by Nikko (see edit history)

Mochi09 · October 13, 2014

wow this topic was so cool! I love the ps 1.5 menu for PC and PS 1.6 menu for mobile! great job!

pbdwaj · October 13, 2014

desktop is good. but i lost the responsive on mobile. any update pls

samsonv_05 · November 30, 2014

Hi Vekia,

I've tried to update my superfish-modified.css (/themes/default-bootstrap/css/modules/blocktopmenu/css) with the 1.5 version like you mentioned, cleared my cache and recompiled, cleared my browsing cache, and it still can't get my menu to go vertical. I'm on PS 1.6. Can you give me a hand?

Thanks!

vekia · December 4, 2014

Hi Vekia,

I've tried to update my superfish-modified.css (/themes/default-bootstrap/css/modules/blocktopmenu/css) with the 1.5 version like you mentioned, cleared my cache and recompiled, cleared my browsing cache, and it still can't get my menu to go vertical. I'm on PS 1.6. Can you give me a hand?

Thanks!

can you share url to shop, pleasE?

ozzgzz · December 4, 2014

VEIKA, how did you do responsive the top menu?

regards

vekia · December 6, 2014

VEIKA, how did you do responsive the top menu?

regards

i associated media queries from prestashop 1.6 and included it back to superfish-modified.css

ozzgzz · December 8, 2014

HI VEKIA for your soon answer, but... is possible to know exactly what are the queries you copied and pasted to superfish-modified.css?

I am not super programmer, I am more designer...

Regards

vali2013 · December 22, 2014

any new update on this topic?

jan_kowalski · January 2, 2015

Hello,

Which parameter in superfish-modified.css to return horizontal menu in CSS 1.5. I want stay in standard theme from 1.6, but if I tried compare and modify this css my results isn't good.

Please help.

eduard02 · January 8, 2015

I can't remove this akward title, which is above my new top menu.

It says "Categories" (in Greek, my default language)

Any help on how to remove it please?

How to make arrows from 1.5 menu visible in 1.6?

yog_sothoth · January 16, 2015

position of "sf-menu ul" are not correct

Simply add this lines to superfish-modified.css in line 32 or so:

.sf-menu li {
	position:relative;
}

yog_sothoth · January 17, 2015

How to make arrows from 1.5 menu visible in 1.6?

Dont know it there is other way...

Put this lines of code insdie superfish-modified.js

$(function(){
	$('.sf-menu li:has(ul)').addClass('hassub');
});

This will add a class "hassub" to li elements that has ul child.

Then just add some css to superfish-modified.css

Hope it helps.

vontanix · March 3, 2015

dear,

i just need to ask at this way:

why you add @ media to demo skin ? what function you call with that ?

/*** DEMO SKIN min width @ 769***/
@media (min-width: 769px){
.sf-menu {
	float:			left;
	margin-bottom:	1em;
}
.sf-menu a {
	display:block;
	margin-right:2px;
	padding: 0 22px 0 20px;
	line-height:37px;
	border: 0;
	text-decoration:none;
}
.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
	color:			#ffffff;
	white-space:nowrap;
}
.sf-menu li li {
	background: rgba(65, 45, 44, 0.94);
}
.sf-menu li li li {
	background:	rgba(113, 113, 113, 0.9);
}
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
  	background: #4E4E4E;
}
.sf-menu ul li:hover, .sf-menu ul li.sfHover,
.sf-menu ul li a:focus, .sf-menu ul li a:hover, .sf-menu ul li a:active {
	background:		#4e4e4e;
	outline:		0;
[spam-filter]

it works the same way as it is

/*** DEMO SKIN ***/
.sf-menu {
	float:			left;
	margin-bottom:	1em;
}
.sf-menu a {
	display:block;
	margin-right:2px;
	padding: 0 22px 0 20px;
	line-height:34px;
	border: 0;
	text-decoration:none;
}
.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
	color:			#fff;
	white-space:nowrap;
}
.sf-menu li li {
	background: rgba(113, 113, 113, 0.9);
}
.sf-menu li li li {
	background:	rgba(113, 113, 113, 0.9);
}
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
  	background: #4E4E4E;
}
.sf-menu ul li:hover, .sf-menu ul li.sfHover,
.sf-menu ul li a:focus, .sf-menu ul li a:hover, .sf-menu ul li a:active {
	background:		#4e4e4e;
	outline:		0;
}

gergos · March 16, 2015

Hello i dont know if i am in the right place to add the post but i have a similar problem with the top menu. The only thing i want is to disable links of the top menu categories, In every button that has sub menu. I thing in 1.5 it was like this. For example on the top menu i have men, women, kids, about us . The first 3 buttons have the subcategories men shoes men clothes for the second women shoes women clothes for kids the same and about us has no submenu. It is very critical for me to disable the top links for the first 3 buttons. I just want when you push the button or you roll over it to just open the sub menu. Because all the users pressing the first button and never go to the sub menu. I hope i am clear with question.

BestNicoEUW · April 2, 2015

Exactly what i needed .

Thanks a lot

Ivan Leon · April 14, 2015

Hi!!!

Thanks for the help. It has been very useful. I'm not good at coding css so I just needed to know if there's any way to make the menu text color and the drop down list text color different from each other.

I'm on line 92 on the last file Billy upload but I can not find where I can make the menu text black (no background) and the dropdown text white.

Thanks in advance.

pritishnandi · June 3, 2015

Hi, I made all the changes according to the modified-superfish.css provided, I get a very good looking top menu on desktop, but it is not responsive and the top menu disappears in my smartphone, any solutions, please help.

fmoreira86 · June 9, 2015

Hi!

I followed this thread and the suggestions worked fine.

However it doesn't work with iPad.

All categories and sub categories become scrambled.

Any help?

victorzgz · June 29, 2015

Hi!!!

Thanks for the help. It has been very useful. I'm not good at coding css so I just needed to know if there's any way to make the menu text color and the drop down list text color different from each other.

I'm on line 92 on the last file Billy upload but I can not find where I can make the menu text black (no background) and the dropdown text white.

Thanks in advance.

Busca dentro del "modified-superfish.css" en vez de Color o #, esta codificado el fondo con valores rgba

Search inside the modified-superfish.css in time of Color or #, is encoded with values rgba values (Sorry for my english)

nosnevetzy · July 22, 2015

Hello. I applied this on my work and it works but I have a problem. I want to disable hover effect on every menu with subcategory and instead, I want a mobile horizontal menu like 1.6. In 1.6, there's no hover effect. Only a navigation button in right side of the tab. thanks.

Designinfo.in · October 1, 2015

i followed vekia post and now I want to rever back but it is not happening somebody help

wwww.designinfo.in

My tophorizontal menu looks really crappy now

plutten22 · October 16, 2016

Hi.

Did anyone solve this? How can i get this to look nice in mobile?

Regards

Dan909 · November 3, 2016

position of "sf-menu ul" are not correct

Simply add this lines to superfish-modified.css in line 32 or so:
.sf-menu li {
	position:relative;
}

Excellent, thanks - that did it. The CSS code for this SFmenu is so ridiculously & horribly over-coded, it's almost impossible to see what the hell is going on with it.

johnny_loki · February 9, 2017

I added the css but there seems to be a problem when a sub category has another level in, the float seems to be off about 1cm away from the menu tab is there a way to fix this?

Edited February 9, 2017 by johnny_loki (see edit history)

johnny_loki · February 13, 2017

ok found out what needs to be done if we change the "left" variable to 100% everything seems to be working fine

ul.sf-menu li li:hover ul,

ul.sf-menu li li.sfHover ul {

left: 100%; /* match ul width */

top: 0;

}

ul.sf-menu li li:hover li ul,

ul.sf-menu li li.sfHover li ul {

top: -999em;

}

ul.sf-menu li li li:hover ul,

ul.sf-menu li li li.sfHover ul {

left: 100%; /* match ul width */

top: 0;

}

jacobian64 · June 24, 2017

hi there, I am still having a problem with top horizontal menu module when it is viewed in mobile. I had followed the tutorial from the previous posting and had been able to make it look like this.

but the problem is that I can't seem to see all the drop-down menu link before it'll take me to another category page. so my question is how to hold out the link from taking me to another page? so that I can see all the options before it redirecting me. here is the site.

http://jyskracing.dk/da/

asperon · March 26, 2018

working well on desktop view but mobile version is sux is not like 1.6

Make the Top Horizontal Menu for 1.6 like 1.5? [HELP]

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment