Jump to content

[SOLVED] Customize Top Horizontal Menu Bar


Recommended Posts

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.

Link to comment
Share on other sites

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 :D

 

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! :)

Link to comment
Share on other sites

sorry for bad code :D

 

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!

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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;
}
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 2 weeks later...

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

Link to comment
Share on other sites

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?

29f7528.jpg

 

Sorry for my English

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

Guest
This topic is now closed to further replies.
×
×
  • Create New...