Fixed header

olbols

Hi there,

I am looking to make the header fixed for this website.. but fixed with the complete header as it is.. so it stays exactly the same.

Is this possible? You helped me with some custom code to get the socials on the header so you may need to take a look.

Many thanks,

Ollie

olbols

Sorry the website is: http://www.vitality.ollietubb.com/

Pablo

Hi,

Sorry, but it's not possible with CSS.

It will look like this:

https://i.imgur.com/4O9wcYQ.png

The only way to change your header to fixed in Theme Options > Header & Subheader > Header

https://i.imgur.com/gRaBwrO.png

Thanks

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

olbols

Hi,

That makes it look like this:-

http://www.vitality.ollietubb.com/

The client wants the whole header to be fixed with the logo, menu and social icons. Is this possible?

Thanks,

Ollie

Pablo

You can insert the socials icons by turning on the "Action Bar"

Theme Options > Menu & Action Bar > Action Bar

Then, go to Theme Options > Social and the socials you want to see in the Action Bar.

Thanks

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

olbols

Hi,

Please can you have another look - this is what the client wants. This header but to be fixed.

Is this possible with your theme?

Thanks for your help.

Ollie

olbols

http://www.vitality.ollietubb.com/

Pablo

Disable the "Sticky Header" in Theme Options > Header & Subheader > Header on the bottom of the page and apply this CSS into the Theme Options > Custom CSS & JS > CSS

#Top_bar{
position:fixed !important;
}

Thanks

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

olbols

Hey,

It worked, thank you so much. I changed it to this and it fixed it along with the gap.

#Top_bar{

position:fixed !important;

    top: 31px !important;

}

Appreciate your help.

Thank you,

Ollie

olbols

Just one more thing, changing the 'top' brings the slider further up behind the menu.

Can you advise how to offset the slider so it sits right.

Then, I can do the rest!

Thanks so much,

Ollie

Pablo

The only way to fix it will be with this CSS.

But, it won't display whole slider - to make it displayed, you have to remove whole CSS I sent you.

It's just not possible with CSS to make it displayed properly.

body #Top_bar{
	top:0px !important;
}

.rev_slider{
	margin-top:200px !important;
}

Thanks

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

olbols

Thanks Pablo,

This works great, just with this...

body #Top_bar{

top:0px !important;

}

olbols

Oh no maybe not knocked out fixed header!

Pablo

I told you it's not gonna work properly without the theme files customization.

I suggest you to delete all of the CSS changed and leave it with sticky header or make the files customization.

We do not have option to make the fixed header when using other header type than "Fixed".

I'll take a look one more time on it and I'll give you a reply soon if this is possible to fix this by CSS somehow.

Cheers

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

olbols

OK looks good with this:-

.rev_slider{

margin-top:199px !important;

}

#Top_bar{

position:fixed !important;

    top: 31px !important;

}

Thanks for your help