menu Css

JacquesParadis

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?

Albert

Hi,

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

Thanks!

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

JacquesParadis

http://sas.alexeinporis.com/accueil/

JacquesParadis

Please can you help me to center the sticky menu too ?

Albert

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

JacquesParadis

Thanks !

JacquesParadis

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 ?

Albert

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

JacquesParadis

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 ?

JacquesParadis

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?

Albert

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

JacquesParadis

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? 

Albert

Which item you mean exactly? Sorry but we are not sure what you mean.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

JacquesParadis

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). 

Albert

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.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next