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

[Fashionist]

How can I center category text in top menù?

 

I don't like to have all on the left.....

Edited April 30, 2014 by Fashionist (see edit history)

[vekia]

category text? you mean menu item named "categories" or what?

[Fashionist]

yes ....I attacched a pic

 

 

[vekia]

hello

it's  not default template right?

if so, can you share url to page where you use it?

[Fashionist]

Hello vekia,

 

yes is the default template. I have made some modifications.

 

I can't share link cause site is offline.

[vekia]

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:

[Fashionist]

Perfect vekia!!!!

 

You solve all!!! Thanks a lot!!!

[angelsanges]

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:

 

 

hi! thank you so much for this!

 

but what file i have to modify?

 

thanks.

[vekia]

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

[alamagar]

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

Edited May 3, 2014 by alamagar (see edit history)

[vekia]

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

[alamagar]

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.

[vekia]

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 

[alamagar]

of course

http://gustiplau.com

[vekia]

of course

http://gustiplau.com

 

 

in addition to modifications that i suggested to use, use also this

ul.sf-menu li ul li ul{
  min-width:200px;
}

[alamagar]

I added it at the end of both files and still the same.

[vekia]

are you sure? refresh your browser with cache clear

ctrl+f5

[alamagar]

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 May 4, 2014 by alamagar (see edit history)

[vekia]

hello

but i checked your page (you pasted link) and all of the categories (instead of main) arent centered

:|

[alamagar]

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.

[Blindoom]

tnx Vekia on desktop works fine but on mobile is all different. see attached files. how can i center names on desktop leaving the mobile theme as it was?

Edited September 3, 2014 by Blindoom (see edit history)

[vekia]

css styles that i suggested to use - use only for media query related to PC view

[sasorobic]

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 October 15, 2014 by sasorobic (see edit history)

[vekia]

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;

[sasorobic]

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;