[SOLVED] Customize Top Horizontal Menu Bar

[Maximo Prazer]

Hi there,

 

I've seen Vekia helping a lot of users around here, and i would like to have his help either.

 

I'm making a prestashop 1.6.0.8 store, and i have seen other store with the top horizontal bar as i like to have it for me. The top horizantal menu, as the sub-categories all aligned, the font size... everything seems pretty to me.

 

My website is: www.maximoprazer.com

 

the website i would like to have the top horizontal menu like is: www.sex4fun.pt

 

 

If someone could help, i really appreciate.

[vekia]

Hi there,

 

I've seen Vekia helping a lot of users around here, and i would like to have his help either.

 

I'm making a prestashop 1.6.0.8 store, and i have seen other store with the top horizontal bar as i like to have it for me. The top horizantal menu, as the sub-categories all aligned, the font size... everything seems pretty to me.

 

My website is: www.maximoprazer.com

 

the website i would like to have the top horizontal menu like is: www.sex4fun.pt

 

 

If someone could help, i really appreciate.

 

 

here I am

 

go to:

themes/YOUR_THEME/css/modules/blocktopmenu/css/superfish-modified.css 

 

and instead of code that you see there use this one:

/*** ESSENTIAL STYLES ***/
.sf-contener.fixed {position: fixed; top: 0; width: 100%; z-index: 9;}
.sf-menu, .sf-menu * {margin: 0; padding: 0; list-style: none;}
.sf-menu {position: relative; padding: 0; text-align: center; margin: 0 10px;}
.sf-menu ul {position: absolute; top: -999em; background: white;}
.sf-menu ul li {width: 100%;}
.sf-menu li:hover {visibility: inherit;/* fixes IE7 'sticky bug' */}
.sf-menu > li {float: left; margin-right: 1px;}
.sf-menu > li > a {display: block; padding: 0 20px; line-height: 44px;}
.sf-menu > li.sfHover > a,  .sf-menu > li > a:hover, .sf-menu > li.sfHoverForce > a {background: #2e2f30; border-bottom-color: #666666; color: white; text-decoration: none;}
.sf-menu li li li a {display: inline-block; position: relative; color: #777777; font-size: 11px; line-height: 16px; font-weight: normal; padding-bottom: 10px; display: block; padding: 10px;}
.sf-menu li li li a:before {content: "\f105"; display: inline-block; font-family: "FontAwesome"; padding-right: 10px;}
.sf-menu li li li a:hover {color: #333333;}
.sf-menu li ul {display: none; left: 0; top: 45px; /* match top ul list item height */  z-index: 99; padding: 4px 0 18px; text-align: left;}
.sf-menu li li ul {position: static; display: block !important; opacity: 1 !important; background: none; -webkit-box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px; -moz-box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px; box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px;}
.sf-menu li li li ul {padding: 0 0 0 20px;}
.sf-menu li li li ul {width: 220px;}
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;}
.sf-menu > li > ul {padding: 26px 30px 31px; width: 100%; border-bottom: 2px solid #FF9039;}
.sf-menu > li > ul > li > a {text-transform: uppercase; font-size: 16px; line-height: 20px; font-weight: 600; padding: 8px 12px; display: block;}
.sf-menu > li > ul > li > a:hover {color: #515151;}
.sf-menu > li > ul > li {float: left; width: 20%; padding-right: 15px; padding-top: 5px;}
@media (min-width: 768px) {
 .sf-menu > li > ul > li.first-in-line-lg {clear: left;}
}
@media (min-width: 480px) and (max-width: 767px) {
 .sf-menu > li > ul > li.first-in-line-xs {clear: left;}
}
.sf-menu > li > ul > li#category-thumbnail {width: 100% !important; float: none; clear: both; overflow: hidden; padding-right: 0;}
.sf-menu > li > ul > li#category-thumbnail > div {float: left; padding-left: 10px; width: 33.333%;}
@media (max-width: 479px) {
 .sf-menu > li > ul > li {width: 100%;}
 .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 {display: none; text-align: left; padding-bottom: 14px;}
 .sf-menu ul {position: relative;}
 .sf-menu > li {float: none; position: relative; border-right: none; display: block;}
 .sf-menu > li span {position: absolute; right: 0; top: 0; width: 44px; height: 44px; z-index: 2; text-align: center; line-height: 44px;}
 .sf-menu > li span:after {font-family: "FontAwesome"; content: "\f067"; font-size: 20px;}
 .sf-menu > li span.active:after {content: "\f068";}
 .sf-menu li ul {top: 0;}
 .sf-menu > li > ul > li {width: 50%;}
 .cat-title {display: block; font-weight: 600; font-size: 18px; line-height: 22px; text-transform: uppercase; display: block; padding: 14px 10px; position: relative;}
 .cat-title:after {display: block; font-family: "FontAwesome"; content: "\f067"; position: absolute; right: 15px; top: 16px; font-size: 18px;}
 .cat-title.active:after {content: "\f068";}
}
.sf-menu li.sf-search {border: none;}
.sf-menu li.sf-search input {display: inline; padding: 0 13px; height: 30px; line-height: 30px; background: white; margin: 13px 10px 0 0; font-size: 13px; color: #9c9b9b; border: 1px solid #d6d4d4;}
 

ps disable ccc for css under adv. paramters > performance tab

 

im affraid that i will need to inspect your shop after you will change code

ps. welcome on board!

[Maximo Prazer]

Vekia, thanks for your reply...

 

I've already tried that, and i have done it again so you can inspect my site. the menu is misplaced and is not equal to the other site.

 

I'll wait for your help, once again.

 

CCC disabled as asked.

[vekia]

sorry for bad code

 

new code arrived:
 

/*** ESSENTIAL STYLES ***/
.sf-contener.fixed {position: fixed; top: 0; width: 100%; z-index: 9; }
.sf-menu, .sf-menu * {margin: 0; padding: 0; list-style: none; }
.sf-menu {position: relative; padding: 0; /* text-align: center; */ margin: 0 10px;}
.sf-menu ul {position: absolute; top: -999em; background: white;}
.sf-menu ul li {width: 100%;}
.sf-menu li:hover {visibility: inherit;/* fixes IE7 'sticky bug' */}
.sf-menu > li {float: left; margin-right: 1px;}
.sf-menu > li > a {display: block; padding: 0 20px; line-height: 44px;}
.sf-menu > li.sfHover > a,  .sf-menu > li > a:hover, .sf-menu > li.sfHoverForce > a {background: #2e2f30; border-bottom-color: #666666; color: white; text-decoration: none;}
.sf-menu li li li a {display: inline-block; position: relative; color: #777777; font-size: 11px; line-height: 16px; font-weight: normal; padding-bottom: 10px; display: block; padding: 10px;}
.sf-menu li li li a:before {content: "\f105"; display: inline-block; font-family: "FontAwesome"; padding-right: 10px;}
.sf-menu li li li a:hover {color: #333333;}
.sf-menu li ul {display: none; left: 0; top: 45px; /* match top ul list item height */  z-index: 99; padding: 4px 0 18px; text-align: left;}
.sf-menu li li ul {position: static; display: block !important; opacity: 1 !important; background: none; -webkit-box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px; -moz-box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px; box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px;}
.sf-menu li li li ul {padding: 0 0 0 20px;}
.sf-menu li li li ul {width: 220px;}
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;}
.sf-menu > li > ul {padding: 26px 30px 31px; width: 100%; border-bottom: 2px solid #FF9039;}
.sf-menu > li > ul > li > a {text-transform: uppercase; font-size: 16px; line-height: 20px; font-weight: 600; padding: 8px 12px; display: block;}
.sf-menu > li > ul > li > a:hover {color: #515151;}
.sf-menu > li > ul > li {float: left; width: 20%; padding-right: 15px; padding-top: 5px;}
@media (min-width: 768px) {
 .sf-menu > li > ul > li.first-in-line-lg {clear: left;}
}
@media (min-width: 480px) and (max-width: 767px) {
 .sf-menu > li > ul > li.first-in-line-xs {clear: left;}
}
.sf-menu > li > ul > li#category-thumbnail {width: 100% !important; float: none; clear: both; overflow: hidden; padding-right: 0;}
.sf-menu > li > ul > li#category-thumbnail > div {float: left; padding-left: 10px; width: 33.333%;}
@media (max-width: 479px) {
 .sf-menu > li > ul > li {width: 100%;}
 .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 {display: none; text-align: left; padding-bottom: 14px;}
 .sf-menu ul {position: relative;}
 .sf-menu > li {float: none; position: relative; border-right: none; display: block;}
 .sf-menu > li span {position: absolute; right: 0; top: 0; width: 44px; height: 44px; z-index: 2; text-align: center; line-height: 44px;}
 .sf-menu > li span:after {font-family: "FontAwesome"; content: "\f067"; font-size: 20px;}
 .sf-menu > li span.active:after {content: "\f068";}
 .sf-menu li ul {top: 0;}
 .sf-menu > li > ul > li {width: 50%;}
 .cat-title {display: block; font-weight: 600; font-size: 18px; line-height: 22px; text-transform: uppercase; display: block; padding: 14px 10px; position: relative;}
 .cat-title:after {display: block; font-family: "FontAwesome"; content: "\f067"; position: absolute; right: 15px; top: 16px; font-size: 18px;}
 .cat-title.active:after {content: "\f068";}
}
.sf-menu li.sf-search {border: none;}
.sf-menu li.sf-search input {display: inline; padding: 0 13px; height: 30px; line-height: 30px; background: white; margin: 13px 10px 0 0; font-size: 13px; color: #9c9b9b; border: 1px solid #d6d4d4;}
 
 
 
#block_top_menu .sf-menu {
background: #1B1A18;
border-top: 1px solid #1B1A18;
border-bottom: 1px solid #1B1A18;
padding:0px;
margin:0px;
}
.sf-menu > li.sfHover > a, .sf-menu > li > a:hover, .sf-menu > li.sfHoverForce > a {
color: #FFFFFF;
background: #e74c3c;
}


.sf-menu {
  left: 0px;
text-align: left;
float: left;
display: block;
clear: both;
width: 100%;
}


a, .subscribe .button, .product-image, .product-container, .container-line, .quick-view, .btn-cart, .hp-banner-01 .hp-banner img, .carousel-control-prev, .carousel-control-next, #home-page-tabs li a, #subcategories ul li .subcategory-image a, .languages-block .current, .currencies-block .current, .addToWishlist, .add_to_compare, .button, .button span, .span_link, .footer-container span, .btn-cart i {
transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-webkit-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
}

enjoy!

[Maximo Prazer]

you don't have to say sorry... you help others at no cost, that is priceless...

 

I've changed the code as you told. I already have the black bar, but font color, font size, and the sub-categories are not the same. Then i would like to center the text on the menu as theirs.

 

Is that dificult?

[vekia]

it's not that hard

change code:

#block_top_menu .sf-menu {
background: #1B1A18;
border-top: 1px solid #1B1A18;
border-bottom: 1px solid #1B1A18;
padding:0px;
margin:0px;
} 

to:

#block_top_menu .sf-menu {
background: #1B1A18;
border-top: 1px solid #1B1A18;
border-bottom: 1px solid #1B1A18;
padding: 0px;
margin: 0px;
text-transform: uppercase;
font-family: roboto;
}

[Maximo Prazer]

a stupid question,but i have to ask. they are my suppliers,but they want to sell me a module to have my site like theirs. is it possible to have a theme and the same aspect in full, like theirs without buying that module?

Edited July 17, 2014 by Maximo Prazer (see edit history)

[Maximo Prazer]

there's something wrong Vekia.

 

The font is not white,and the categories font are not in black. Also i cannot access any part above the top menu, like "my cart", the search bar, my logo doesn't have the mouse change to click to go to the home page.

[Maximo Prazer]

Vekia i am downloading all the site with WinHTTrack. I almost have all the files, including the .js and the theme "bonita" they use. can i do something with all those files?

 

Thanks

[Maximo Prazer]

Well, i have reverted all modifications that Vekia told me, because the top horizontal menu don't stay exactly like the one i want.

 

If someone could help, i appreciate.

 

My site is; www.maximoprazer.com

 

And the top horizontal i want exactly with the sub-categories aligned and the font type and the alignement is on: www.sex4fun.pt

 

 

Any help?!

[vekia]

hello

but menu that i created with css styles looks exactly the same like you want.

 

perhaps you want also the same menu items?

if so, you have to create them manually on module configuration page and also create the same categories.

[trouble32]

Hello Vekia,

i´ve got a small question, I would like to have the top horizontal menu in full width, like on this site: http://www.frontlineshop.com/?show=1

How do I do that? I Just want the menu in full width not the whole header. Would be great if somebody knows a solution.

I´m using Prestashop 1.6.0.8 default-bootstrap and i'am happy with stock bar because i'll be changing only color.

 

Tomas

[vekia]

hello

this is not full width menu

take a look how it is created:

 

 

so simply, you can add global background, and then just create container with menu 980px; 

exactly as it is created on this website

[trouble32]

Thanks for your reply Vekia   but still is there possibility for top horizontal menu (stock) to be full width from one corner to another? or we need to rebuild containers? i don't need exactly like on that page, i am  ok with original, because that page is not responsive, i need to be responsive and where arrows the same gray from top horizontal menu, because now its fixed to main container width, and we need full body width, is there some solution? to ad some code or just tweak some settings in global.css  superfish-modified.css or elsewhere?

 

Sorry for my English

Edited August 1, 2014 by trouble32 (see edit history)

[vekia]

as a background of header add block with stripe with background color which is equal to your menu background

something like: http://i.imgur.com/7w0rTl6.png
 

[trouble32]

Sorry for long reply, Summer Thanks very much Vekia, this trick works

[benjamin utterback]

Sorry for long reply, Summer Thanks very much Vekia, this trick works

 

Thanks for the confirmation. I'll go ahead and mark this thread and solved and close this post. Feel free to open up another thread for another questions. Happy selling!