Jump to content

Horizontal menu text alignment


Recommended Posts

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 by transient999 (see edit history)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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:

8SjMkq4.png

  • Like 1

Share this post


Link to post
Share on other sites

  • 6 months later...

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:

8SjMkq4.png

 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 this post


Link to post
Share on other sites

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)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

.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;

BwlxrSF.png

  • Like 1

Share this post


Link to post
Share on other sites

.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;

BwlxrSF.png

 

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 

nFscE4v.png?1

Share this post


Link to post
Share on other sites

  • 2 months later...

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 by rybaczewa (see edit history)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

  • 3 years later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More