Top menu with arrows

[myselfidem]

Hello,

 

I'm using PS 1.6.0.6 and I've changed the top menu.

 

How it's possible to add rows for the sub-menus ?

 

Thanks

 

My web site :

 

http://www.librairie-eauvive.ch/

Edited August 16, 2014 by myselfidem (see edit history)

[frank_jarle]

What do you mean?

[myselfidem]

Well, I mean is missing arrows on my topmenu like I see on this web site :

 

http://librairie-chretienne.ch/

 

Here is my superfish-modified.css file...But the arrows doesn't appear !?

/*** ESSENTIAL STYLES ***/
.sf-contener {clear: both; float: left; width: 100%; }
/*.sf-contener.fixed {position: fixed; top: 0; width: 100%; z-index: 9; }*/
  
/*.sf-right {margin-right: 14px; float: right; width: 7px; }*/
  
.sf-menu, 
.sf-menu * {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
	margin:	0;
	padding: 0;
	list-style: none; }
	
.sf-menu {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    position: relative;  /*ajouter*/
	/*margin: 10px 0; /*relative; */
	padding: 0;
	width: 100%;   /* modification de 980px;  /* 980 */
	text-align: left; /*center;*/
	text-transform: uppercase;
	font-weight: bold; /*ajouter pour gras*/
    font-family: roboto;
	background: #f6f6f6; /* #20b2aa; couleur  #383838; */
	border-left: 1px solid #20b2aa;
	border-right: 1px solid #20b2aa;
	border-top: 1px solid #20b2aa;
	border-bottom: 1px solid #20b2aa; } /*#f6f6f6; } ajouter la couleur grise = #f6f6f6; arrière-plan du menu noir = #383838;*/
      
.sf-menu ul {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
	position: absolute;
	top: -999em;
	width: 10em;  /*left offset of submenus need to match (see below) */
	background: white; } /*#43bebd; /* ajouter la couleur noire = #383838;*/
      
.sf-menu ul li {
	width: 100%; }
	
.sf-menu li:hover {
	visibility:	inherit; } /* fixes IE7 'sticky bug' */

.sf-menu li {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
	float: left;
	position: relative;
	border-right: 1px solid #d6d4d4; /*#777;*/
    margin-bottom: -2px; }
    
.sf-menu a {
	display: block;
	position: relative;
	color: #777; } /*#fff;*/
	/*text-shadow: 0 1px 0 #f6f6f6; } */
	
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
	left: 0;
	top: 40px; /*34px; ou 59px; /* 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: 250px; /* 200px match ul  */
	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: 250px; /* 200px match ul width */
	top: 0; }

/*** DEMO SKIN ***/
.sf-menu {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
	float: left;
	margin-bottom: 1em;
}
.sf-menu a {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
	display: inline-block;
	margin-right: 2px;
	padding: 0 22px 0 20px;
	line-height: 40px;  /*34px; ou 59px;*/
	border: 0;
	text-decoration: none;
	/*text-transform: capitalize;*/
	font-weight: bold; /*ajouter pour gras*/
    color: #484848; }/*ajouter la couleur noire*/
    
.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
	color: #484848; /* #fff; couleur de la police = blanc */
	white-space: nowrap; }
	
.sf-menu li li {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    width: 250px;  /*ajouter*/
	background: #f6f6f6; } /*rgba(113, 113, 113, 0.9);*/

.sf-menu li li li {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    width: 250px;  /*ajouter*/
	background: #f6f6f6; } /*rgba(113, 113, 113, 0.9);*/

.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
  	background: #20b2aa; /*#4E4E4E;*/
    border-bottom-color: #0BE3D8;
    color: white; } /*#4169e1; }*/
    
.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 {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
	background:	#20b2aa; /*couleur au survol originale = #4e4e4e; */
	outline: 0; }
	
/*** arrows **/
.sf-menu a.sf-with-ul {
	padding-right: 2.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:40px !IE;} /*34px*/
.sf-menu li li {
	width: 250px; /*200px;*/
	background: #726f72 !IE;
}

.sf-menu li:last-child { /*ajouter pour supprimer l'espace vide de la barre */
  border-right:none; }
  

Any ideas ?

 

My web site :

 

http://www.librairie-eauvive.ch/

 

Thanks

Edited August 17, 2014 by myselfidem (see edit history)

[vekia]

i don't get it, what you exactly mean by "rows" ?

your top menu looks almost the same (but with different colors) 

[frank_jarle]

@Vekia: I know what he mean, if you look at the picture he want top menu to have arrows that points down on his site.

 

Look at his website http://www.librairie-eauvive.ch/ :

 

Now look at the site he refer to http://librairie-chretienne.ch/ :

 

So basically he wants down-pointing arrows to show up on top meny where it has sub-categories, to indicate it has more to choose from.

 

Mr myselfidem, am i correct in my assumption? I hope someone can help out on this.

[myselfidem]

Thanks vekia and frank_jarle !

 

Yes frank_jarle, you explained exactly want I would try to add on top menu !

 

Thanks to point me how I can do that.

Edited August 17, 2014 by myselfidem (see edit history)

[frank_jarle]

It seems its related to "sf-sub-indicator" i am unable to say what is not happening, either you are missing part in your menu system that point to this section in your CSS or it could also be that you are missing the file that the CSS is refering to. Can you make sure that background: url('../img/arrows-ffffff.png') is located at the correct directory and that you have the file?

 

Frank

[myselfidem]

Yes, the folder image is at the correct place. I copied the folder : img at the same root. See attached image

 

But the rows doesn't appear !?

[frank_jarle]

I was thinking something, in the CSS file it says "('../img/arrows-ffffff.png') " So i am not sure what this is relative to, if its relative to Prestashop-folder, the theme-folder or what.  It could be that the URL is wrong and is therefor not located at the correct level. I dont know what FTP program that you use, but i like to use FileZilla:
1) I Navigate to the folder that the file belongs

2) I copy the full URL/Filepath

3) Past it into the CSS file (just the path).

4) Save the CSS file and test again

 

This is just to see if you get a correct hit on the arrow to show up, if the arrow shows up, then you can adjust the path in the CSS so it does not include a full pathname.

[sinoland]

Hi,

 

I added the following code in superfish-modified.css to show the down arrow whenever there is submenu.

 

.sf-with-ul:after {

  content: "\f0d7";

  font-family: "FontAwesome";

  font-size: 18px;

  line-height: 18px;

  color: #ffffff;

  vertical-align: -2px;

  padding-left: 12px; }

 

Hope this helps.

[Nikko]

indeed! Thank you very much sinoland!

[vekia]

does it also appears when there is no submenu?

[Nikko]

Hi Vekia

 

No it doesn't appear when there is no submenu. It works perfect. My PS version is 1.6.0.8

 

The only problem i have with the menu is that i can't reduce the space between the subcategories. Here is the link. Any help about this?

[ksehmi79]

does it also appears when there is no submenu?

 

You are right, It only appears at the home page. but when i navigate to the category page it does not appears. any suggestions.

 

Home Page

 

 

Category Page

 

Thanks in advance.