menu Css

What is the css class for the transparent header and the sticky header. I try to center with text-align and nothing work Am I missing something. 
#Top_bar .menu_wrapper {
    float: none !important;
    text-align: center !important;
    width: 100% !important;
}
Am I missing something?

Comments

  • Hi,

    please send us link to page where you would like to center menu and we will see if it's possible.

    Thanks!
  • Please can you help me to center the sticky menu too ?
  • Ok, thanks. So to center menu items in header, you need to use the following css instead:
    #Top_bar .menu_wrapper { width: 100% !important; text-align: center !important; float: none !important; }
    #Top_bar .menu > li { display: inline-block !important; float: none !important; }
    #Header .top_bar_left, .header-classic #Top_bar, .header-plain #Top_bar, .header-stack #Top_bar, .header-split #Top_bar, .header-fixed #Top_bar, .header-below #Top_bar, #Header_creative, #Top_bar #menu, .sticky-tb-color #Top_bar.is-sticky { background-color: transparent !important; }
  • I got an another question.
    I want the color of the sticky menu to be #2a9e68; and the hover color of the sticky menu to be #fcbd11.
    How can I do this without changing the color of the transparent menu ?
  • To change those colors, please use:
    .sticky-dark #Top_bar.is-sticky { background: #2a9e68 !important; }
    .sticky-dark #Top_bar.is-sticky .menu > li > a:hover { color: #fcbd11 !important; }
  • everything is fine with this code except that I want the hover and the link to be #2a9e68 for the transparant menu. How can I do this ?
  • And the Active/Current Navigation Link doesnt stay yellow. 
    .sticky-dark #Top_bar.is-sticky .menu > li > a:active { color: #fcbd11 !important; }
    I try this but it doesn't work. What should I do?
  • The hover and the links are fine as we see but to change the color of active menu item on one page, you need to use the following css:
    #Top_bar .menu > li.current-menu-item a { color: #fcbd11 !important; }
  • One last thing I need my current menu item of my transparent menu to stay green (accueil) when I go back to the top. How can I do this? 
  • Which item you mean exactly? Sorry but we are not sure what you mean.
  • Go down on the page then scroll up to the first row. The first menu item is not showing. I need a css line that will let the item "accueil" to stay green or just stay white. Once you go back to the accueil section the menu item disappear because of this line 
    • #Top_bar .menu > li.current-menu-item a { color: #fcbd11 !important; }
    • I need the li.current-menu item a to stay the color #fcbd11 on the green menu 
    • but when I wanna a go up in the accueil section I want the menu li.current-menu item for accueil to be #2a9e68 (transparent menu). 
  • If you want first menu item "ACCUEIL" to be white when you go back to the top, you should remove the link from this item because there is no other way to remove it's active color. This item got a link to section which is just behind the menu when site loads and that's why this item have yellow (active) color.
Sign In or Register to comment.
This website uses cookies

We use cookies to personalise content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you’ve provided to them or that they’ve collected from your use of their services.

Cookies are small text files that can be used by websites to make a user's experience more efficient.

The law states that we can store cookies on your device if they are strictly necessary for the operation of this site. For all other types of cookies we need your permission. This means that cookies which are categorized as necessary, are processed based on GDPR Art. 6 (1) (f). All other cookies, meaning those from the categories preferences and marketing, are processed based on GDPR Art. 6 (1) (a) GDPR.

This site uses different types of cookies. Some cookies are placed by third party services that appear on our pages.

You can at any time change or withdraw your consent from the Cookie Declaration on our website.

Learn more about who we are, how you can contact us and how we process personal data in our Privacy Policy.

Please state your consent ID and date when you contact us regarding your consent.