Any suggestion how to center menu using stack:center

chemicalviper · June 2014

Right now it pushes the menu all the way left. Is there any option to kick the menu centered below the logo?

Like so:
http://imgur.com/1XGmFXn

Albert · June 2014

If you use Stack: Center menu header and do not use any additional options available on the right side, like: search or languages flags, then please paste below css into Custom CSS section and you will get what you ask for:

#Header .menu > li { display: inline-block; float: none;}
#Top_bar .menu_wrapper { text-align: center; width: 100%; }
#Top_bar .top_bar_left { width: 100% !important; }
.header-stack #Top_bar .top_bar_right { display: none; }

chemicalviper · June 2014

OH LORDIE IT LOOKS AMAZING> PRAISE MUFFIN GROUP

Albert · June 2014

Good to know

You're welcome!

ocho32 · October 2014

Thank you for the code.

The menu did centered but now I have another problem when I scroll down the menu instead of staying fix in one bar as it did when it was justify, now it moves to a second bar below the original.

Can you help me?

This is the web site I am working on...

www.rustiquepiekitchen.com/w/

Albert · October 2014

@ocho32 Please send us screenshot of how this looks like on your side because on our side everything stay in one line. It does not go to second as you wrote above. Also please tell us in which browser does it happen.

ocho32 · October 2014

thank you... I have already fix it!!

Beiphone · November 2014

with the menu in the center , the functionality Sticky header does not work as you can see from the screenshot

Screenshot: https://www.dropbox.com/s/dvegoj3zcuke5io/screen.png?dl=0

Albert · November 2014

@Beiphone Maybe you use different style then "Stack:Center" and this is the reason why you got this issue? But if you use this header style, then please provide url to your website and we'll have a look on it.

Beiphone · November 2014

Io uso "Stack: Center", How can fix it?

I used this code:

#header .menu> Li {display: inline-block; float: none;} 
#Top_bar .menu_wrapper {text-align: center; width: 100%; } 
#Top_bar .top_bar_left {width: 100% importante; } 
.header-stack #Top_bar .top_bar_right {display: none; }

Albert · November 2014

@Beiphone Where is url to your website?

Beiphone · November 2014

http://ladiesinblack.it/

thanks

Albert · November 2014

@Beiphone Ok we see what is the problem

Please use below css and this will move sticky menu into right section:

#Top_bar.is-sticky .menu_wrapper { width: auto; }

Beiphone · November 2014

Thanks...

Albert · November 2014

You're welcome

Advancedmodular · June 2015

I have followed this thread and tried to match the output but I am getting an offset menu.

Using the BeStore demo as a base, I chose stack center. Applied the Custom CSS from above but it doesn't center the header.

The logo displays in the center above the menu.

The menu items are centered within the wrapper.

But the wrapper is offset to the left around 80 pixels.

Any suggestions guys? Thanks

Advancedmodular · June 2015

Okay so many apologies I have fixed it!

For anyone else having this issue... I had the Menu | Align right set to ON.

Change this to off and it will correct it!

DebsWebBiz · June 2015

Amazing! It's centered using the code given! Yee ha!

germar74 · June 2015

I have added

#Top_bar { background-image: url('http://cpdtraveller.com.au/wp-content/uploads/2015/06/newtop.jpg') !important; }

but I need the menu clear so that this image can come through on www.cpdtraveller.com - currently my code looks like #Header .menu > li { display: inline-block; float: none;}

#Top_bar .menu_wrapper { text-align: center; width: 100%; }

#Top_bar .top_bar_left { width: 100% !important;}

.header-stack #Top_bar .top_bar_right { display: none;}

#Top_bar { background-image: url('http://cpdtraveller.com.au/wp-content/uploads/2015/06/newtop.jpg') !important; }
Please help

Albert · June 2015

@germar74 Please make a screenshot with necessary changes so we can be sure about what exactly you want to do.

germar74 · June 2015

I am sorry I cannot get the site to look like how I need it - basically no blue background behind the menu at the top of cpdtraveller.com.au so that the image behind the logo shows through the menu

germar74 · June 2015

http://i.imgur.com/Q1tqtnV.jpg

hope this helps

Albert · June 2015

Ok, got it. So to do this, please use below css:

#Top_bar #menu { background: transparent !important; }

germar74 · June 2015

thank you I was trying to use background:none - worked a treat thank you

Albert · June 2015

You're welcome

germar74 · June 2015

Albert · June 2015

@germar74 What is the url to site where you got this header?

germar74 · June 2015

alll good I made it work with a smaller logo - cheers Gerard

Albert · July 2015

@germar74 Ok. We're glad that you sorted it

agohts · July 2015

Hi,

After choosing the header style as Stack Center, my menu was aligned to the left. After added the code below, the menu went to the center. But when I scrolled down the page, the menu appear as second bar below the logo.

Can anyone assist and advice on how to correct this?

Many thanks in advance!

Albert · July 2015

@agohts Any url to site where this happen?

Any suggestion how to center menu using stack:center

Comments