# Adding a sticky menu **URL:** \ **Category:** CMS Development\ **Created:** [July 12, 2018, 1:17pm UTC](https://community.hubspot.com/t/adding-a-sticky-menu/9427 "2018-07-12T13:17:42Z")\ **Posts on this page:** 13\ **Page:** 1
**Author:** ![dricketts](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dricketts/32/33328_2.png) [@dricketts](https://community.hubspot.com/u/dricketts)\ **Post date:** [July 12, 2018, 1:17pm UTC](https://community.hubspot.com/t/adding-a-sticky-menu/9427/1 "2018-07-12T13:17:42Z")
Hi all, I’m trying to make the header on my company’s website ([https://www.kctrust.co.uk/](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 ![16x16_smiley-happy.png.png](https://d2qpr2jzcazej7.cloudfront.net/original/2X/2/22d5e40d253def47f5f4ea7f0e3e70be19010689.png) ---
**Author:** ![tjoyce](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tjoyce/32/88832_2.png) [@tjoyce](https://community.hubspot.com/u/tjoyce)\ **Post date:** [July 12, 2018, 1:25pm UTC](https://community.hubspot.com/t/adding-a-sticky-menu/9427/2 "2018-07-12T13:25:11Z")
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 - ```auto .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: ```auto .page-headers{ margin-top: 90px } ``` * * * If this answer helped, please, mark as solved 😄 * * * [tim@belch.io](mailto:tim@belch.io) | [forms.belch.io](https://forms.belch.io) | Design your own Beautiful HubSpot Forms; No coding necessary. Drop by and say Hi to me [on slack](http://slack.belch.io/). ---
**Author:** ![dricketts](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dricketts/32/33328_2.png) [@dricketts](https://community.hubspot.com/u/dricketts)\ **Post date:** [July 12, 2018, 2:27pm UTC](https://community.hubspot.com/t/adding-a-sticky-menu/9427/3 "2018-07-12T14:27:43Z")
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 ---
**Author:** ![tjoyce](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tjoyce/32/88832_2.png) [@tjoyce](https://community.hubspot.com/u/tjoyce)\ **Post date:** [July 12, 2018, 2:34pm UTC](https://community.hubspot.com/t/adding-a-sticky-menu/9427/4 "2018-07-12T14:34:02Z")
@dricketts - sure, try changing the code to this: ```auto @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](mailto:tim@belch.io) | [forms.belch.io](https://forms.belch.io) | Design your own Beautiful HubSpot Forms; No coding necessary. Drop by and say Hi to me [on slack](http://slack.belch.io/). ---
**Author:** ![dricketts](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dricketts/32/33328_2.png) [@dricketts](https://community.hubspot.com/u/dricketts)\ **Post date:** [July 12, 2018, 3:14pm UTC](https://community.hubspot.com/t/adding-a-sticky-menu/9427/5 "2018-07-12T15:14:15Z")
Thank you @tjoyce and [@Simon\_Goldie](https://community.hubspot.com/t5/user/viewprofilepage/user-id/65506). 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? ---
**Author:** ![Simon\_Goldie](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/simon_goldie/32/97348_2.png) [@Simon\_Goldie](https://community.hubspot.com/u/Simon_Goldie)\ **Post date:** [July 12, 2018, 3:26pm UTC](https://community.hubspot.com/t/adding-a-sticky-menu/9427/6 "2018-07-12T15:26:44Z")
As I mentioned your col-sm is being set to 100% width so they need to be reduced and floated. Try this: ```auto @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%; } } ``` ---
**Author:** ![tjoyce](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tjoyce/32/88832_2.png) [@tjoyce](https://community.hubspot.com/u/tjoyce)\ **Post date:** [July 12, 2018, 3:30pm UTC](https://community.hubspot.com/t/adding-a-sticky-menu/9427/7 "2018-07-12T15:30:00Z")
@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) ```auto .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 ---
**Author:** ![dricketts](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dricketts/32/33328_2.png) [@dricketts](https://community.hubspot.com/u/dricketts)\ **Post date:** [July 12, 2018, 4:01pm UTC](https://community.hubspot.com/t/adding-a-sticky-menu/9427/8 "2018-07-12T16:01:23Z")
Thanks @tjoyce and [@Simon\_Goldie](https://community.hubspot.com/t5/user/viewprofilepage/user-id/65506) for your suggestions. Unfortunately, neither of the suggestions worked as you could no longer read the menu as it was squished. Thanks anyway ![16x16_smiley-happy.png.png](https://d2qpr2jzcazej7.cloudfront.net/original/2X/2/22d5e40d253def47f5f4ea7f0e3e70be19010689.png) ---
**Author:** ![AHignell](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/ahignell/32/199919_2.png) [@AHignell](https://community.hubspot.com/u/AHignell)\ **Post date:** [September 18, 2023, 10:33am UTC](https://community.hubspot.com/t/adding-a-sticky-menu/9427/9 "2023-09-18T10:33:57Z")
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! ---
**Author:** ![MCattanach](https://avatars.discourse-cdn.com/v4/letter/m/7feea3/32.png) [@MCattanach](https://community.hubspot.com/u/MCattanach)\ **Post date:** [June 13, 2024, 11:35am UTC](https://community.hubspot.com/t/adding-a-sticky-menu/9427/10 "2024-06-13T11:35:50Z")
Hey Mark, I am only new to using Hubspot CRM for building websites, but I am also looking to make the header, with logo and menu, sticky to the top of the page. I have tried adding the code you suggest above to the HeadHTML section of Additional code snippets, when going to Global Header Settings but this does not have the desired outcome? Could you please navigate me to where I go to insert or add this code you suggest? ---
**Author:** ![Simon\_Goldie](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/simon_goldie/32/97348_2.png) [@Simon\_Goldie](https://community.hubspot.com/u/Simon_Goldie)\ **Post date:** [July 12, 2018, 2:39pm UTC](https://community.hubspot.com/t/adding-a-sticky-menu/9427/11 "2018-07-12T14:39:02Z")
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. ---
**Author:** ![HFirdaus](https://avatars.discourse-cdn.com/v4/letter/h/dc4da7/32.png) [@HFirdaus](https://community.hubspot.com/u/HFirdaus)\ **Post date:** [December 6, 2023, 5:45pm UTC](https://community.hubspot.com/t/adding-a-sticky-menu/9427/12 "2023-12-06T17:45:05Z")
Hello @dricketts Which theme did you use for your site ([https://www.kctrust.co.uk/](https://www.kctrust.co.uk/)) how did you enable the sticky note? ---
**Author:** ![EWood](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/ewood/32/91285_2.png) [@EWood](https://community.hubspot.com/u/EWood)\ **Post date:** [August 27, 2024, 11:04pm UTC](https://community.hubspot.com/t/adding-a-sticky-menu/9427/13 "2024-08-27T23:04:01Z")
Hey @tjoyce! Revisiting this post years later. It sounds similar to what we’re hoping achieve which is sticky header that is dyanamic to the device. Wondering if you have any recommendations on using a similiar snippet in the advanced settings of the page editor’s head html? We’re using a template from the marketplace and don’t have the developer background to create a child theme and make an adjustment to css file. Is this type of adjustment possible in the head html? Thank you so much for any additional insights! \*\*\*I’m CSM posting on behalf of a customer.