Center Menu

Hi Support,

Can you please advise on how to make the Menu appear centered in the theme?  I am using a Fixed header style.

Thanks!

Comments

  • Hi,
    Please send a link to your website.
    thanks
  • Ok, so to center menu items in header when its non sticky, you need to use the following css:
    #Top_bar:not(.is-sticky) .menu { text-align: center !important; }
    #Top_bar:not(.is-sticky) .menu > li { display: inline-block !important; float: none !important; }
    #Top_bar:not(.is-sticky) .menu_wrapper { float: none !important; }
    #Top_bar:not(.is-sticky) .logo { display: none !important; }
  • What about for Sticky as well?
  • #Top_bar.is-sticky .menu { text-align: center !important; }
    #Top_bar.is-sticky .menu > li { display: inline-block !important; float: none !important; }
    #Top_bar.is-sticky .menu_wrapper { float: none !important; }
    #Top_bar.is-sticky .logo { display: none !important; }
  • Hi Support,

    I put both into the BeTheme Theme Option Custom CSS area.

    Please let me know about:
    1. The small logo that was in the header is now gone.  How do I restore?
    2. The header moves.  For example, as I navigate from page to page the header starts out on the left then shifts to the center.  I do not want any shifting.
    3. On the Home page the header was transparent.  The sticky header is correct to be dark.  How do I restore the transparent header on the Home page?
    Thanks!
  • You asked to have the same css for the normal header. Now please delete from the custom css the last line:
    #Top_bar.is-sticky .logo { display: none !important; }
    We do not see any movement, please delete browser cache.
    thanks
  • How do I make the dark sticky header non transparent?
  • .sticky-dark #Top_bar.is-sticky {
    background: black !important;
    }
Sign In or Register to comment.