Horizontal menu text alignment

[transient999]

Is there a way to align the text in horizontal top menu? Instead of having elements increment from left to right, is it possible to have the elements(text) center and increase outward so left margin and right margin are symmetrical. It will look nicer.

Thanks

Edited October 2, 2013 by transient999 (see edit history)

[Carolina Custom Designs]

Yes, of course it is possible.

 

Marty Shue

[vekia]

yes it is, in css styles just use text-align css style command

 

for example:

 

to display products on the left side: text-align:left;

to display products on the center: text-align:center;

to display products on the right side: text-align:right;

 

you will have to modify your horizontal menu css styles

[transient999]

Thank you. Is superfish-modified.css the correct file to modify? To make sure, lets assume I have only one element (HOME) on the topmenu bar. Instead of home currently located at the left of the bar, I want home to be in the center of the bar. Text-align will resolve this?

Thank you

[vekia]

in this case you will need to remove also float:left;

from:

.sf-menu li {
float: left;
position: relative;
border-right: 1px solid #777;
} 
.sf-menu { 
float:left; 
marfin-bottom: 1em; 
}

and to the .sf-menu add text-align:center;

.sf-menu {
text-align:center;
marfin-bottom: 1em;
}

effect:

[justinjiang]

in this case you will need to remove also float:left;

from:

.sf-menu li {
float: left;
position: relative;
border-right: 1px solid #777;
} 
.sf-menu { 
float:left; 
marfin-bottom: 1em; 
}

and to the .sf-menu add text-align:center;

.sf-menu {
text-align:center;
marfin-bottom: 1em;
}

effect:

 I have follow your tutorial to centre my text, but the effect is not right. is it because i have more than one element (HOME and About Us ) on the topmenu bar? here is my screenshot http://www.tiikoni.com/tis/view/?id=e815fa8, can you help me, please. thanks a lot. 

[vekia]

 I have follow your tutorial to centre my text, but the effect is not right. is it because i have more than one element (HOME and About Us ) on the topmenu bar? here is my screenshot http://www.tiikoni.com/tis/view/?id=e815fa8, can you help me, please. thanks a lot. 

 

share url to your website i will check it and give you solution

[justinjiang]

share url to your website i will check it and give you solution

here is my website http://www.eastwaycatering.co.uk/shop/gb/, thank you

[vekia]

you shop uses ccc for css files, 

all css files are minified so it's a bit hard to check it.

can you temporarily disable ccc for css option? (adv. parameters > performance tab in your back office)

[justinjiang]

you shop uses ccc for css files, 

all css files are minified so it's a bit hard to check it.

can you temporarily disable ccc for css option? (adv. parameters > performance tab in your back office)

thank you for your reply, i have disable ccc for css option already, thank you.

[vekia]

.sf-menu li {
float: left;
position: relative;
border-right: 1px solid #777;
} 

instead of code above use

.sf-menu li {
display:inline-block;
position: relative;
border-right: 1px solid #777;
} 

effects;

[justinjiang]

.sf-menu li {
float: left;
position: relative;
border-right: 1px solid #777;
} 

instead of code above use

.sf-menu li {
display:inline-block;
position: relative;
border-right: 1px solid #777;
} 

effects;

 

Thanks a lot, its work find.  

one more question can I add the language block at the right side and inside of the top menu bar? thanks 

[vekia]

only with modification of block top menu module and block languages modifications. it's a case for new topic.

[justinjiang]

only with modification of block top menu module and block languages modifications. it's a case for new topic.

 i have create a new topic about this http://www.prestashop.com/forums/topic/327937-help-with-merger-top-horizontal-menu-and-language-block/ , please help. thanks a lot.

[vekia]

thank you i checked your topic and replied there.

[rybaczewa]

Centering described above with addition of even spacing works awesome on desktop, but messes up the menu on smaller resolutions. By default, there is drop-down menu with 4 (in my case) options, one under the other. After the change, there is just 1 row with all 4 options next to each other, same as in high resoluton. How do you keep default settings for smaller resolutions? Where do I need to place some kind of condition?

 

My css code right now:

.sf-menu > li {
  display: inline-block;
  text-align:center;
  width: 20%;
  margin:0 auto;
}

Edited July 7, 2014 by rybaczewa (see edit history)

[vekia]

im affraid that you tried it in 1.6 theme?

code above is for ps 1.5

[rybaczewa]

That's right, I am using 1.6.

I guess there is no simple answer then, right? Thanks for the reply though.

[vekia]

you can use code above but in media query related to screen resolutions above 900px

global.css contains these mediaqueries, so just copy code to that query

 

then it will be used only on desktop

[[email protected]]

OK but how to do that in Presta 1.7. ?