Center the sticky menu

Monzterdk · September 2015

Hi there :-)
I know i have seen a similar question anwsered a long time ago, but I can't find the post anymore.

My site is centered using the:
Simple style & Full with
Stack: Center

But when I am scrolling the Sticky menu goes to the left !

Anyone ? Any Ideas how to fix this

Most Respectfully
Monzterdk

Monzterdk · September 2015

My Custom CSS section looks like this:

h1, h2, h3, h4, h5, h6 { font-weight: 300; }

/* Footer */
#Footer .widgets_wrapper { padding: 50px 0; }
#Footer .footer_copy a#back_to_top { display: none; }
#Footer .footer_copy .copyright { margin-bottom: 20px; text-align: center; width: 100%; }
#Footer .footer_copy { background: #282828; }

/* Content slider */
.button-stroke a.slider_next, a.slider_prev { border: 0 none !important; }
.button-stroke a:hover.slider_next, a:hover.slider_prev { background-color: transparent !important; }

/* Top bar */
#Top_bar.is-sticky a.button.action_button { top: 10px; }
#Header .menu > li { display: inline-block; float: none;}
#Top_bar .menu_wrapper { text-align: center; width: 100%; }
#Top_bar.is-sticky .menu_wrapper { width: auto; }
#Top_bar .top_bar_left { width: 100% !important; }
.header-stack #Top_bar .top_bar_right { display: none; }

/* Center the Menu */
#Header .menu > li { display: inline-block; float: none;}
#Top_bar .menu_wrapper { text-align: center; width: 100%; }
#Top_bar.is-sticky .menu_wrapper { width: auto; }
#Top_bar .top_bar_left { width: 100% !important; }
.header-stack #Top_bar .top_bar_right { display: none; }

Monzterdk · September 2015

Hmm I've never actually noticed the redundance in the two sections
I'm shaving the lines down so they only show once :-)

like this :
/* Top bar */
#Top_bar.is-sticky a.button.action_button { top: 10px; }

/* Center the Menu */
#Header .menu > li { display: inline-block; float: none;}
#Top_bar .menu_wrapper { text-align: center; width: 100%; }
#Top_bar.is-sticky .menu_wrapper { width: auto; }
#Top_bar .top_bar_left { width: 100% !important; }
.header-stack #Top_bar .top_bar_right { display: none; }

Albert · September 2015

Hi,

Sticky Header unfortunately can not be centered because there is logo in the same line as menu. Menu can be centered only if there is nothing in the same row so menu row can be 100% width. Otherwise, it's technically impossible.

Thanks!

demo7up · September 2016

How can we remove the logo to make it center I dont use the logo anyway

Albert · September 2016

@demo7up Where from you want to remove logo? From sticky header only or where? Please provide is link to page where from you would like to remove it as well.

LPS_nyc · July 2018

Hello,

I am using a layout where the logo is not on the same line. Please, can you assist me in making the sticky menu centered?

Pablo · July 2018

LPS_nyc

Can you send me a link to your website?

Cheers

Center the sticky menu

Comments

My Custom CSS section looks like this: