Center the sticky menu

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


Comments

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

  • 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!
  • How can we remove the logo to make it center I dont use the logo anyway
  • @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.
  • 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?
  • Can you send me a link to your website?
    Cheers
Sign In or Register to comment.