CMS Development

chrissa0000
Contributor

Navigation Menu To be Fixed

SOLVE

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

0 Upvotes
1 Accepted solution
Stephanie-OG
Solution
Key Advisor

Navigation Menu To be Fixed

SOLVE

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;
}

 

sticky-header.gif

 

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").

 


Stephanie O'Gay GarciaHubSpot Design / Development

Website | Contact

 

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

View solution in original post

0 Upvotes
tjoyce
Recognized Expert | Platinum Partner
Recognized Expert | Platinum Partner

Navigation Menu To be Fixed

SOLVE

@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"});
});
0 Upvotes
chrissa0000
Contributor

Navigation Menu To be Fixed

SOLVE

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?

0 Upvotes
Stephanie-OG
Solution
Key Advisor

Navigation Menu To be Fixed

SOLVE

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;
}

 

sticky-header.gif

 

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").

 


Stephanie O'Gay GarciaHubSpot Design / Development

Website | Contact

 

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

0 Upvotes
Stephanie-OG
Key Advisor

Navigation Menu To be Fixed

SOLVE

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?

 


Stephanie O'Gay GarciaHubSpot Design / Development

Website | Contact

 

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

0 Upvotes
chrissa0000
Contributor

Navigation Menu To be Fixed

SOLVE

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

0 Upvotes