Jump to content

[SOLVED] How center category text in the top menù?


 Share

Recommended Posts

so, if it's a default theme you can try with this:

ul.sf-menu {text-align:center;}
ul.sf-menu li {
float:none;
display:inline-block;
}

paste it somewhere to your stylesheet file

effect:
LY9wTkg.png

  • Like 1

Share this post


Link to post
Share on other sites

so, if it's a default theme you can try with this:

ul.sf-menu {text-align:center;}
ul.sf-menu li {
float:none;
display:inline-block;
}

paste it somewhere to your stylesheet file

effect:

LY9wTkg.png

 

 

hi! thank you so much for this!

 

but what file i have to modify?

 

thanks.

Share this post


Link to post
Share on other sites

hi! thank you so much for this!

 

but what file i have to modify?

 

thanks.

 

you can paste this code at the end of global.css file located in your theme directory (css subdirectory)

 

/themes/default-bootstrap/css/global.css

Share this post


Link to post
Share on other sites

Hi, I have the same problem, but only want to center the first level menu and not the sublevels. Is it possible?

so use these styles:

ul.sf-menu {text-align:center;}
ul.sf-menu li {
float:none;
display:inline-block;
}
ul.sf-menu li ul {
float:left;
text-align:left;
display:inline-block;
}

Share this post


Link to post
Share on other sites

Thks vekia. Now is solved but only for some of the 2nd level categories. I see the problem in firefox, but not in ie. see the image attached please.

 

can you share url where i can check it? it will be much easier for me to find solution 

Share this post


Link to post
Share on other sites

are you sure? refresh your browser with cache clear

ctrl+f5

yes I'm sure and cache cleared. Just in case read my last answer in this post I have with you too. Perhaps there is some relationship.

http://www.prestashop.com/forums/topic/327969-how-to-addchangeeliminate-horizontal-and-vertical-lines-in-top-menu/?do=findComment&comment=1660008

Edited by alamagar (see edit history)

Share this post


Link to post
Share on other sites

yes youre right. ¿¿??

Now main categories are centered and second categories left aligned. Thanks a lot.

 

Sumarizing. I had 3 problems with top menu I am dealing with you:

1. Main categories centered and subcategories left aligned. Solved

2. In some subcategories there are gaps between options. Solution provided: delete "clear: left;". doing it solve this problem but arises a mess up with 3rd categories in first menu option. Pending

3. eliminate vertical bars and include horizontal bars above and below menu. Pending

 

and the problem with prestashop version.

thanks a lot for your help.

Share this post


Link to post
Share on other sites

  • 3 months later...
  • 1 month later...

Hi, i have a problem, when i use your code, it only align the first menu, and i need submenu to be also on center of div as the main.

 

If you could fix this....

 

url: e-kartuse.si/presta

 

now as you can see it is aligned on the left

 

theme is just modified bootstrap

Edited by sasorobic (see edit history)

Share this post


Link to post
Share on other sites

it's not a problem with code and there is no fix to code that i suggested to use

code you used centers first level items in menu bar

 

all other elements that you see (as a subcategories) uses widths in percentages without margins

you have to put them in the block with margin:auto; with text-align:center;

  • Like 1

Share this post


Link to post
Share on other sites

ok i tried everything, if i use margin manually - margin-left it works ok but it wont show ok in all resolutions, need something like 0 auto; but it wont work here, if you can pls tell me what to add, tnx

 

 

it's not a problem with code and there is no fix to code that i suggested to use

code you used centers first level items in menu bar

 

all other elements that you see (as a subcategories) uses widths in percentages without margins

you have to put them in the block with margin:auto; with text-align:center;

Share this post


Link to post
Share on other sites

 Share

×
×
  • Create New...

Important Information

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