Navigation Menu To be Fixed

[chrissa0000]

Hello!

How do I make our Navigation Menu to be position:fixed when they scroll down our content this is our website www.besocialscene.com

[tjoyce]

@chrissa0000 - Here's a script you can drop into one of your JS for the template if you can't manage to do it with CSS

$(function(){
  $('.body-container').find('div').first().css({"position": "fixed","top":0,"left":0,"width": "100%", "z-index": "99999","background":"white"});
  $('body').css({"padding-top":"117px"});
});

[chrissa0000]

Hi, Thank you for the code, I have drop into one of the js template for this homepage but still the header is not fixed in position @Stephanie-OG@tjoyce, How do you do this  Add a container around the rest of the content and push it down (e.g. with padding-top) in Hubpost?

[Stephanie-OG · Accepted solution]

I think the global group's been moved into the header-container-wrapper which helps. The following CSS will work on this page: 

.header-container-wrapper .widget-type-global_group {
  position: fixed; 
  z-index: 1000; 
  background-color: #ffffff;
}

.body-container {
  padding-top: 117px;
}

However, this applies to a global group in the header-container-wrapper so you'll need to make sure it's in the header-container-wrapper on all pages and, ideally, give the global group a class (e.g. "my-sticky-header-class") and then swap out ".header-container-wrapper .widget-type-global_group" for that class name (e.g. ".my-sticky-header-class").

---

HubSpot Design / Development

Website | Contact

If this helped, please mark it as the solution to your question, thanks!

[Stephanie-OG]

Hi there!

This is definitely possible but a little tricky to explain without seeing how it's all set up on your portal.

You'll need to add CSS to the global group for the header to the following: 

position: fixed; z-index: 1000; background-color: #ffffff;

(The z-index places it over the rest of the content)

Ideally you should give the global group a CSS class and add that to your stylesheet.

Once this has been done the page content will appear behind it so you'll need to push it down. The header in this case isn't in the "header-container-wrapper" and the pages seem to be coded files so you'll need to find or add a container around the rest of the content and push it down (e.g. with padding-top).

You'll also want to add some mobile media queries to make sure it looks ok on mobile.

Are you familiar with HTML/CSS or do you have access to a developer who could make the change for you?

---

HubSpot Design / Development

Website | Contact

If this helped, please mark it as the solution to your question, thanks!

[chrissa0000]

I am familiar with CSS I ttied to do that in inline styline but the menu list wont position in center