How to make navigation top menu align to center ?

[apislerr]

my shop top menu align to left. how to make it center? here the link myshop http://goo.gl/QN8Iil

[apislerr]

here screenshot for topmenu

[vekia]

in css use these styles:

#nav li, #nav a {text-align:center!important; display:inline-block; float:none;}
#nav li {text-align:center!important;}

effect

[Guid]

in css use these styles:

#nav li, #nav a {text-align:center!important; display:inline-block; float:none;}
#nav li {text-align:center!important;}

effect

Hi vekia,

 

A doubt... the file is this one : /prestahop/theme/mytheme/css/global.css? 

 

And should we look and modify  or add this all:

#nav li, #nav a {text-align:center!important; display:inline-block; float:none;}

#nav li {text-align:center!important;}

 

Thanks again for you help.

[vekia]

you can paste it (code that i suggested to use) in global.css file at the end of the file

[Guid]

you can paste it (code that i suggested to use) in global.css file at the end of the file

 Hi!

 

I did it , but not working. (clear cache)

 

I placed in this file /prestahop/theme/mytheme/css/global.css at the end of this file your code:

 

#nav li, #nav a {

text-align:center!important; 

display:inline-block; 

float:none;

}

 

#nav li {

text-align:center!important;

}

 

any suggestion, please?

 

(presta 1.6, theme default)

[Paulito]

Hello

 

Add Vekia code at the bottom of this file:

http://screencast.com/t/XTyu3bdk

 

Result

http://screencast.com/t/1Gc5vOqE

 

Paul

[Guid]

you can paste it (code that i suggested to use) in global.css file at the end of the file

Hi Vekia,

I did it but it's not working (clear cache & recompile) my site is http://sitetest.esy.es/index.php?id_lang=1 

[Atomic Penguins]

Hi apislerr,

 

Go to /themes/classicshop/css/classic/fish_menu.css

 

Under /* All Levels */ /* Style consistent throughout all nav levels */, 

 

change the #nav li

 

From: #nav li { position:relative; text-align:left; }

 

To: #nav li {display: inline-block; position:relative; text-align: center; }

 

And under /* 0 Level */,

 

change the #nav li

 

From: #nav li { float: left; padding-right: 2px; }

 

To: #nav li { padding-right: 2px; }

 

 

Atomic Penguins

[Atomic Penguins]

Hi Guid,

 

Go to /themes/default-bootstrap/css/modules/blocktopmenu/css/superfish-modified.css

 

Change the .sf-menu

 

From:

.sf-menu {

  position: relative;

  padding: 0;

  width: 100%;

  border-bottom: 3px solid #e9e9e9;

  background: #f6f6f6; }

 

To:

.sf-menu {

  text-align: center;

  padding: 0;

  width: 100%;

  border-bottom: 3px solid #e9e9e9;

  background: #f6f6f6; }

 

And under .sf-menu > li, delete float: left; and add in display:inline-block;

 

 

Atomic Penguins

[Guid]

Hi Guid,

 

Go to /themes/default-bootstrap/css/modules/blocktopmenu/css/superfish-modified.css

 

Change the .sf-menu

 

From:

.sf-menu {

  position: relative;

  padding: 0;

  width: 100%;

  border-bottom: 3px solid #e9e9e9;

  background: #f6f6f6; }

 

To:

.sf-menu {

  text-align: center;

  padding: 0;

  width: 100%;

  border-bottom: 3px solid #e9e9e9;

  background: #f6f6f6; }

 

And under .sf-menu > li, delete float: left; and add in display:inline-block;

 

 

Atomic Penguins

 

Hi Atomic Penguins! 

 

Thanks a lot for your help, you SOLVED it!

...but i would like on smaller devices to keep the top menu like the original, i mean tabs on differents rows ( at least on phone devices)... could you help me about this please.

 

(I can't paste the image here?)

 

Thanks for helping.

[Guid]

Hi again Atomic! 

 

Image below (would like to keep the top menu like this on smaller devices, phones).

 

Thanks.

[Atomic Penguins]

Hey Guid,

 

Did you change any css code for the media query? I tried to check your web site on a small phone, an iPhone, and a small tablet, and the top menu looks different.

 

Here's the screenshot:

 

 

 

Atomic Penguins

[Guid]

Hi Atomic! Thanks for quick answer!

 

Well, no, i didn't change any css code for the media query.

I just change my  /themes/default-bootstrap/css/modules/blocktopmenu/css/superfish-modified.css like you said so.

I double check.

 

After that, my top menu looks like your image on smaller devices!?

 

[Atomic Penguins]

Hi Guid,

 

I will assume that you have followed the steps on centering the menu in my past post.

 

Now for smaller devices:

 

Open the superfish-modified.css

 

Under .sf-menu > li, you can see a media query. It looks like this:

 

@media (max-width: 767px) {

    .sf-menu > li {

      float: none;

 /*float: left;*/

      position: relative;

      border-right: none; }

 

Remove all floats and add this code -> display: block;

 

 

Atomic Penguins

[Guid]

 

Hi Guid,

 

I will assume that you have followed the steps on centering the menu in my past post.

 

Now for smaller devices:

 

Open the superfish-modified.css

 

Under .sf-menu > li, you can see a media query. It looks like this:

 

@media (max-width: 767px) {

    .sf-menu > li {

      float: none;

 /*float: left;*/

      position: relative;

      border-right: none; }

 

Remove all floats and add this code -> display: block;

 

 

Atomic Penguins

 

 

 

Hi Atomic! Thanks again for quick answer! I followed yours steps on centering the top menu and...

 

YOU SOLVED IT! 

 

After that, my top menu looks ok on smaller devices!

 

You rock! Thanks a lot!

[Atomic Penguins]

You're welcome, Guid. Glad I helped you. 

[fatyas]

Hi Atomic, 

 

I tried your solution to center the top menu! it works great!

But then the sub menu text (in drop down) is also centered, how can I keep that aligned on the left (or in my case on the right as I use an RTL language)?

 

Thanks

Faty