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

Highlighted
New Contributor

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: 

 

Nef_0-1597653582427.png

 

 

Any ideas on how I could fix it?

 

Thank you,

Nefeli

0 Upvotes
6 Replies 6
Highlighted
Regular Contributor | Gold Partner

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

 

0 Upvotes
Highlighted
New Contributor

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 

0 Upvotes
Highlighted
Regular Contributor | Gold Partner

 

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

 

 

removemaxwidth.png

0 Upvotes
Highlighted
New Contributor

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 🙂 

 

 

0 Upvotes
Highlighted
Regular Contributor | Gold Partner

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.

0 Upvotes
Highlighted
New Contributor

Ok thank you 🙂

 

If you have any module recommendations feel free to share. 

 

Thank you for your time and effort. 

 

Nef

0 Upvotes