sticky header settings (menu style)

monument-art · December 2016

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:

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

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

Albert · December 2016

Hi,

1. To change position of menu line, please use the following css:

#Top_bar.is-sticky .menu > li > a::after {
    height: 1px !important;
    top: 60px !important;
}

3. If you want to make fixed header type, you need to set FIXED header type instead of current.

monument-art · December 2016

thanks.

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?

Albert · December 2016

If lines are not the same, then or you need to set up FIXED header type or you need to use the following css instead:

#Top_bar.is-sticky .menu > li > a::after {
    left: 10% !important;
    margin-top: 5px !important;
    width: 80% !important;
}

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.

sticky header settings (menu style)

Comments

This website uses cookies