[SOLVED] Block top menu center categories

[Pieterv]

Hi, 

 

I'm using the default theme and used this guide to make a 100% full width header. 

 

http://www.prestashop.com/forums/topic/281109-new-way-to-make-a-100-full-width-header-and-menu/

 

This works perfect. Now I'd like to center the text/categories like in the image below.

I couldn't make it myself, the float property is giving me some problems. 

Is there anyhow a solution to solve this problem? 

 

Thanks in advance. 

 

[vekia]

you can do it with css modificaitons.

 

superfish-modified.css line 16 - add text-align:center; like i show below;

.sf-menu {
text-align:center;
margin: 10px 0;
padding: 0 5px;
width: 970px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
background: transparent url(../img/bg_blocktopmenu.png) repeat-x 0 0;
-moz-box-shadow: 0px 1px 2px #c6c6c6;
-webkit-box-shadow: 0px 1px 2px #c6c6c6;
box-shadow: 0px 1px 2px #c6c6c6;
}

then in the same file, line 39 add display:inline-block; and remove float:left; like i show below:

.sf-menu li {
display: inline-block;
position: relative;
background: transparent url(../img/bg_li_blocktopmenu.png) no-repeat 100% 0;
}

effect:

[Pieterv]

Thanks a lot! This was what I was looking for!

[vekia]

you're welcome

topic marked as solved

 

btw. welcome on board!

 

with regards,

Milos

[abdulwahabhabib]

Hi? this will work with prestashop 1.6.1.x?