Header behaviour scroll, height and width

supayoshi · November 2016

Hi, I want to set a custom / width for the header, to look and scroll,

the website is, : http://beta.onlinekeukens.nl/ however, I want to have the height of the header remain the same when you scroll down,

also I don't like the animation, where can I edit these options, i've read the documentation but could not find it.

Please help.

supayoshi · November 2016

Want behaviour like this, http://themes.muffingroup.com/be/estate/

But maybe slightly bigger height of menu / header bar.

Albert · November 2016

Hey,

to set the similar header as on Be|Estate demo, you need to set Fixed header type and also increase the logo size under Theme options > Global > Logo section to make whole top bar slightly taller.

supayoshi · November 2016

Okay thanks, this worked. However the background of the menu now is grey, if I want this white, where do I do that, also, the buttons / menu buttons are not as high as before, how can I change that?

Albert · November 2016

Background color may look grey bacause of Fixed Header opacity.
To change it please go to Theme Options > Custom CSS and paste below code:

.header-fixed #Top_bar{ opacity:1 !important;}

supayoshi · November 2016

Great, looks good that way.

One more question regarding the header, I'm struggling to get the header to show the Page Title in the header background.

How do I do this?

Thanks!

Albert · November 2016

You can set transparent subheader and adjust subheader paddings in Theme Options > Header & Subheader > Subheader. Use options: Style, Padding & Transparency.

Thanks!

supayoshi · November 2016

Great got that, how do you set the height of the subheader? The header is in global options for the logo yea, but the subheader? I want it as in estate template demo. (the subheader height)

Albert · November 2016

In the BeEstate demo we used Minimalist Header option which removes header space. You can find it in Theme Options > Header & Subheader > Header

supayoshi · November 2016

When i do this, the header is completely removed, I want this effect,

http://prntscr.com/d27aqp

But with the same height as in the beesate template.

Albert · November 2016

Looks like your screenshot was removed http://pasteboard.co/mrvHvUfvM.png

supayoshi · November 2016

That's odd, it works for me still? http://imgur.com/a/KdBDs alt url

supayoshi · November 2016

Can you see the smaller height of the overall subheader? That's what I want.

supayoshi · November 2016

http://beta.onlinekeukens.nl/keukens/ I've got this working atm, however as you see the Title tag is falling off the screen, how to adjust this to give it more spacing / align the title tag in the vetical center of the subheader?

Albert · November 2016

The new url works fine. So if you want to move the Subheader down, you need to use the following css:

#Subheader { padding-top: 80px !important; }

supayoshi · November 2016

Thank you again for the excellent support through-out the process, this seems to be solved now, as it looks great!

Perhaps it's an idea, to add this into the documentation because I really had a hard time figuring all of this out

Thanks again!

Cheers!

Albert · November 2016

You are welcome!

Header behaviour scroll, height and width

Comments