Simple way to add a sticky menu to Hubspot's Sprout theme

[Nef]

Hello, 

I am looking to add a sticky menu to a cloned version of the Sprout theme (One of Hubspot's new Themes). 

I have very little experience in css & was hoping someone here could help me with this.

I have added this bit of code I found on here: 

.header-container {
    position: fixed;
    height: 127px;
    z-index: 9999999;
    width: 100%;
    background: #000000;
}
.page-headers{ 
  margin-top: 90px
}

@media (max-width: 768){
.header-container { 
position: static;
 height: auto; 
z-index: 9999999; 
width: 100%; 
background: #000000; 
  }
}

And the code looks like this now: 

.header__container {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin: 0 auto;
max-width: 1340px;
padding: 1.4rem 2.8rem;
position: fixed;
height: 127px;
z-index: 9999999;
width: 100%;
background: #000000;
}
.page-headers{
margin-top: 150px
}
}

@mediascreen and (max-width: 767px) {
.header__container {
padding: 1.4rem;
position: relative;
height: auto;
z-index: 9999999;
width: 100%;

However, the header/ medu looks like this which isn't right: 

Any ideas on how I could fix it?

Thank you,

Nefeli

[daveroma]

Hi @Nef 

The free themes are a good starting point, but they are fairly limited in their functionality.

Please post a demo link to your page so I can inspect the code and try to help you debug.

Also, check out my HubSpot CMS Theme "Drive" which comes with a sticky header option (and a lot of additional functionality) out of the box!

https://marketplace.hubspot.com/products/driveagency/drive

[Nef]

Hello @daveroma,

Thanks for coming back to me and offering to help. 

Here's a page preview link. The text is in Greek so it will look a bit confusing. The menu header's width looks normal on a laptop screen, but not on a regular screen and the padding/ margin at the bottom is completely off across all devices. 

I am aware that it is limited but my company wants to use the available Hubspot tools and then in a year's time when the website grows a bit more & our strategy evolves, they'll reconsider migrating the website to a new theme. Your theme looks fantastic by the way! 

Thank you so much for your help 🙂

Nef 

[daveroma]

Remove the max-width on .header__container and you're golden - see screenshot:

[Nef]

Thank you @daveroma 🙂

I removed it from the theme overrides section however the navigation header's bottom margin is still not right. 

Is there another way I could go about this maybe? 

Thank you for your time 🙂 

[daveroma]

I only recommend tinkering with the code if you're proficient in HTML/CSS. Otherwise I recommend either engaging a HubSpot CMS developer or leveraging the Marketplace for a Module which can add this functionality for you out of the box.

[Nef]

Ok thank you 🙂

If you have any module recommendations feel free to share. 

Thank you for your time and effort. 

Nef