Responsive Sticky Navbar with Dropdown

[bstock98]

Hello Everyone,

I am looking to solve an issue with the navbar on a site that I am building currently. I currently need to find two main solutions, that are a little out of my ability.

First:

I need to make the navbar sticky and responsive to the mobile viewing as well. I have tried making it sticky in the past, but was unable to solve the problems it caused for mobile. There also appears to be this small white strip at the top of the navbar that I would like to getr rid of. I have been working off of the starter kit within the hubspot marketplace if that helps for reference.

Second:

I need to make this navbar have dropdowns that look and feel smooth. I would love the dropdown to open on hover and have a white background to the links.

I will attach the navbar info below, as well as a preview link to the site that I am working on.

Navbar css:

.navbar {
  padding: 20px 0;
  background:#000;
}
.navbar img {
  margin: -20px 0;
  max-height: 80px !important;
  width: auto !important;
}
.navbar .links {
  text-align: right;
  font-size: 0;
}
.navbar .links a {
  display: inline-block;
  line-height: 40px;
  font-size: 14px;
  font-weight: 700;
  padding: 0 20px;
  color: #ff8210;
  text-transform: uppercase;
}
.navbar .links a:hover {
  color: #fff;
  
}
.navbar .links a:active {
  color: #000;
  
}
.navbar .links li:last-of-type a {
  font-weight: 700;
  background: {{ colorPrimary }};
  color: #fff;
  margin-left: 10px;
}

Page Link:

https://www.signumbiosciences.com/hyvia-about-science?hs_preview=qfKsoOHO-28102935122

Plese let me know if there is anything else you need from me to help, I appreciate it.

Ben S.

[mike-ward · Accepted solution]

Hi Ben @bstock98 ,

Your first point is pretty straightforward, this should help. This will fix the navbar and push down the body content that would otherwise be covered up. That @media tag is a media query that will mean these rules are only applied on desktop:

@media (min-width:768px) {
.navbar {
    position: fixed; /* fixes it to the screen */
    top: -1px; /* pushes it up 1px to get rid of any white lines caused by sub-pixel rendering */
    height: 80px; /* fix the height, because you need to push the body content down */
    width: 100%;
}

.body-container-wrapper {
    margin-top: 80px; /* same height as the navbar */
}
}

You'll need a separate media query for targeting mobile to do a similar thing:

@media (max-width: 767.98px) {
    .navbar .links {
        margin-bottom: 20px; 
    }
    .navbar .container {
        background: #000;
    }
}

For your second part, this is a bit more involved. Did you actually add the sub-menu items to your HubSpot menu yet? I think not as I don't see them in the HTML. Do that first and see how the default styling comes out, then it's usually just a case of fiddling with the CSS a little to get it nice. If you can get to that point then feel free to post again here and I can take another look.

And thanks for providing a preview link! It makes it much easier to help 

Cheers,

Mike

---

Did I answer your question? If your question is answered, please mark it as a solution. If you need more help, hit that big orange 'Reply' button!

[bstock98]

@mike-wardThank you so much for the help.

I did not yet those submenu items yet. I will do that and see if I can try to make it look nice on my own. If not I will post again for help.

Thank you again for your help,

Ben S.