sticky header settings (menu style)
hey.
1. I like to change the menu style for my sticky header. I selected "line below link" (80 width, 1px hight) as menu style, but in my sticky header the line ist shown below menu, which I don't want. I am using classic header style. I already changed the hight of the logo and menu-bar in the sticky header using following custom css:
Is it posible to change the position of the line in the menu for the sticky header? if not I have a question relating a alternative:
(2. a good alternative for me would be the menu style "highlight". but here I have following issue: i want the link color the be white and the menu-background to be black. I also want the active link background to be white and corresponding i want the active link (the text) color to be black. but if I set erverything like this the text of the active link also stays white and isnt visible in the white active link background. is there a way to set the active link color with the menu style "highlight"?)
3. last but not least: when i scroll down my site, and my header transforms into sticky header, the header shortly disappear and appears again. Is there a way, this isnt happening, so the header stays there all the time, without using header style "fixed"?
main question is the first.
thanks
my site: monument-art.de
1. I like to change the menu style for my sticky header. I selected "line below link" (80 width, 1px hight) as menu style, but in my sticky header the line ist shown below menu, which I don't want. I am using classic header style. I already changed the hight of the logo and menu-bar in the sticky header using following custom css:
#Top_bar.is-sticky { height: 75px; }
#Top_bar.is-sticky .menu > li > a, #Top_bar.is-sticky .menu > li > a span { line-height: 45px; }
#Top_bar.is-sticky #logo { padding: 12px 0; }
#Top_bar.is-sticky #logo img { min-height: 75px; }
#Top_bar.is-sticky .menu > li > a, #Top_bar.is-sticky .menu > li > a span { line-height: 45px; }
#Top_bar.is-sticky #logo { padding: 12px 0; }
#Top_bar.is-sticky #logo img { min-height: 75px; }
Is it posible to change the position of the line in the menu for the sticky header? if not I have a question relating a alternative:
(2. a good alternative for me would be the menu style "highlight". but here I have following issue: i want the link color the be white and the menu-background to be black. I also want the active link background to be white and corresponding i want the active link (the text) color to be black. but if I set erverything like this the text of the active link also stays white and isnt visible in the white active link background. is there a way to set the active link color with the menu style "highlight"?)
3. last but not least: when i scroll down my site, and my header transforms into sticky header, the header shortly disappear and appears again. Is there a way, this isnt happening, so the header stays there all the time, without using header style "fixed"?
main question is the first.
thanks
my site: monument-art.de
Comments
1. To change position of menu line, please use the following css:
#Top_bar.is-sticky .menu > li > a::after {3. If you want to make fixed header type, you need to set FIXED header type instead of current.height: 1px !important;
top: 60px !important;
}
Now the menu line is longer then the menu link on the sticky header ( http://pasteboard.co/a8BOgnXlU.png ) ,can i make it the same length as the link? like here ( http://pasteboard.co/a8DwkTyC9.png )?
And can I make these settings only affect desctop, not mobile?
#Top_bar.is-sticky .menu > li > a::after {But to affect only desktop with above css, please take a look at http://forum.muffingroup.com/betheme/discussion/23132/logo-overlapping-menu#latest where we explained how to wrap css into right @media rule.left: 10% !important;
margin-top: 5px !important;
width: 80% !important;
}