Adding a sticky menu

[dricketts]

Hi all,

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. 

Does anyone have any idea how I can do this? 

Any help would be very much appreciated! Thanks 

[tjoyce · Accepted solution]

Hello @dricketts,

Traditionally, sticky menus are setup like this:

• A second menu is created and hidden on the page
• 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 -

.header-container {
    position: fixed;
    height: 127px;
    z-index: 9999999;
    width: 100%;
    background: white;
}

Adding that css, you should also consider adding more padding between the banner text in the top of your page and the top of the browser window with:

.page-headers{ 
  margin-top: 90px
}

---

If this answer helped, please, mark as solved 😄

---

tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

Drop by and say Hi to me on slack.

[HFirdaus]

Hello @dricketts

Which theme did you use for your site (https://www.kctrust.co.uk/) how did you enable the sticky note?

[tjoyce · Accepted solution]

Hello @dricketts,

Traditionally, sticky menus are setup like this:

• A second menu is created and hidden on the page
• 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 -

.header-container {
    position: fixed;
    height: 127px;
    z-index: 9999999;
    width: 100%;
    background: white;
}

Adding that css, you should also consider adding more padding between the banner text in the top of your page and the top of the browser window with:

.page-headers{ 
  margin-top: 90px
}

---

If this answer helped, please, mark as solved 😄

---

tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

Drop by and say Hi to me on slack.

[dricketts]

Hello @tjoyce,

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. 

Do you have any idea how I can fix this? 

Thanks,

Danielle

[Simon_Goldie]

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.

[tjoyce · Accepted solution]

@dricketts - sure, try changing the code to this:

@media screen and (min-width:767px){
.header-container {
    position: fixed;
    height: 127px;
    z-index: 9999999;
    width: 100%;
    background: white;
}
.page-headers{ 
  margin-top: 90px
}
}

The above code should only make the header sticky on tablet and desktop versions.

---

If this answer helped, please, mark as solved 😄

---

tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

Drop by and say Hi to me on slack.

[AHignell]

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!

[dricketts]

Thank you @tjoyce and @Simon_Goldie.

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?

[tjoyce]

@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)

  .header-container .col-sm-3{
  	width:100%;
  }
  .header-container .col-sm-9{
  	width:100%;
  }

Then, on your logo container, add 

col-xs-9

and on your menu container add

col-xs-3

Hope that makes sense

[dricketts]

Thanks @tjoyce and @Simon_Goldie for your suggestions. 

Unfortunately, neither of the suggestions worked as you could no longer read the menu as it was squished.

Thanks anyway 

[Simon_Goldie]

As I mentioned your col-sm is being set to 100% width so they need to be reduced and floated. 

Try this:

@media (max-width: 768px) {

.header-container .col-sm-9 {
    width: 30%;
    float: right;
}
.header-container .col-sm-3 {
    width: 70%;
    float: left;
    padding-top: 10px;
}
.header-container .logo {
    width: 75%;
}

}