I'm trying to make the header on my company's website (https://www.kctrust.co.uk/) 'sticky' so it's fixed as you scroll. I've tried to follow a few tutorials online but none of the code is matching up.
As the user scrolls past the view of the main navigation, the second menu (which has sticky css properties) fades in
As a user scrolls back up the page and the main navigation comes back into view, the sticky navigation fades away.
This requires CSS and either a jquery plugin or jquery code to be written. However, a super simple (but not super elegant) way to accomplish this is to drop the following css into your CSS file -
As the user scrolls past the view of the main navigation, the second menu (which has sticky css properties) fades in
As a user scrolls back up the page and the main navigation comes back into view, the sticky navigation fades away.
This requires CSS and either a jquery plugin or jquery code to be written. However, a super simple (but not super elegant) way to accomplish this is to drop the following css into your CSS file -
Thank you so much for this! The sticky header is now working on desktop but the menu is no longer working on mobile as the button for the menu has dropped below the header image.
Worth pointing out that the problem on mobile is that your col-md and col-sm widths are set to 100% on your mobile layout - thats causing them to drop down and be outside of the fixed height header.
Hi Stephanie, this is exactly what I'm trying to do, but I'm not sure where exactly I need to drop this code? Is it header.css in the page's theme? And should it be at the top, with any additional code etc? TIA!
This was sooo helpful! The sticky menu is now resolved and the menu button is back on mobile. Thank you!! Really appreciate the help.
One thing we've always had a problem with is the logo and menu button lining up on mobile. I tried editing the 'col-sm' and 'col-md' but this only made them smaller. Do you know if there's any way to improve this?
@dricketts - you have an override style that's preventing the bootstrap from working on mobile. It can be found in your style.css file and the code looks like this (it should be removed)