- Posts
Hi there,
Is there a way that I can lock the header on my site so that it remains at the top of the page when you scroll (like your header on this BoldGrid site)? I’m using the Cobalt theme.
Thanks,
Ali
Hi Ali,
Thanks for the question about locking the header so that it remains at the top of the screen when you scroll. It’s actually a very simple CSS change that you can add in the customizer.
- Log in to the Administrator Dashboard
- Click on Customize
- Click on Advanced
- Click on Custom JS & CSS
- Add the following code to the CSS section under the existing code:
.site-header {
position: fixed;
top: 0;
width: 100%;
z-index: 2000;
}6. Make sure to click on PUBLISH (or Update) in order to save your changes.
This will make the header fixed. At least, when I loaded the Cobalt theme and put in this code, it worked!
If you have any further questions, please let us know.
Hi Arnel,
Thank you for this, it worked!
However, now the header seems to be covering the page title on each page (for example the top of this page should say Contact us: http://biz242.inmotionhosting.com/~resili20/bg_resiliencechallenge.nz/contact-us/) – is there a way I can stop this from happening? I’d also like to reduce the height of the header so that it stops just below my logo image – would that be possible?
Many thanks
Hi Ali,
If you want to extend the header use this code in your CSS editor:
.entry-title, .page-title {
margin: 250px 0;
}
I’m not aware of a way to extend the header to show the page title but then reduce your header as well. I’m not sure if I am understanding your design request. I hope this helps with the first part of your request though.
Sincerely,
Carlos D
Hi Carlos,
Thank you, but that doesn’t quite solve my problem. I am wanting to do two things:
- Stop my header from overlapping with my page title.
When I add the code to lock my header (.site-header {
position: fixed;
top: 0;
width: 100%;
z-index: 2000;
}) it changes the layout of my page so that the header overlaps and covers my page title. This results in the page titles not being visible, even when you scroll to the very top of the page. They are visible when I remove this code, but I would like to keep it as I need my header to always be visible. How can I lock my header and not have it cover my page title text?2. Reduce the height of my header
Currently my header contains my logo on the left and primary menu on the right, and has a large amount of white space underneath these two things. I would like to reduce the height of my header so that it ends just below my logo and menu, is this possible?
Thanks again for your help,
Ali
Hi Ali,
I apologize for misunderstanding. I will review your site and have a look at it with the additional details you have mentioned and try to come up with a solution for you. I will need some time to do this, however, I will respond with another answer to this question once I have some more details to give you. I appreciate your patience and look forward to providing you a more accurate solution.
Sincerely,
Carlos DHi, Ali!
Thanks for your patience and allowing me time to determine a solution for you. When I review your website, it appears as though you have already added the code that Arnel provided for you. I recommend modifying the code Arnel previously provided to you. You should be able to replace that code with this to achieve the desired appearance:
.site-header {
position: fixed;
padding-top: 0;
padding-bottom: 0;
width: 100%;
z-index: 2000;
}
.entry-title, .page-title {
margin: 115px 0;
}This will remove any padding from the top and bottom of the header. Then it will also increase the margin for the page titles to appear below the header, rather than hidden behind the header.
You can adjust the values for padding-top and padding-bottom to see what looks best for all your pages throughout your website. Also, you can modify the margin value, however, the minimum value depends on the size of the header. However, with the values I have provided, it should result in what you are looking for.
I hope this helps.
Sincerely,
CarlosHi Carlos,
That’s great, thank you.
If I change the bottom code to:
.entry-title, .page-title {
margin: 200px 0;
} I can see my page title (where it was previously covered by the header), however there is now also 200px of white space below the page title – is there code that I can use that will put 200px above the title, but not below it?
Thanks 🙂
AliAlso, have you had a chance to figure out a solution to my question here? https://www.boldgrid.com/support/question/changing-background-and-text-color-of-footer-widgets/
Thanks!
Ali
This got me so close…is there a way to do this same thing, but at the footer of the page? I’m trying to have a static footer menu across all the site pages. Thanks so much!
Hi Rick-
The answer to this is going to change depending on the Theme you’re using. In any of BoldGrid’s themes, you can accomplish this with this custom CSS rule:
.site-footer{ position: fixed; width: 100%; bottom: 0; }The site you sent over privately is using the Twenty Seventeen Theme and has an empty, transparent footer, so you’ll need to add some content and a background color, and increase the z-index, similar to this:
.site-footer{ position: fixed; width: 100%; bottom: 0; background: #131313; z-index: 200; }The value #131313 matches the almost-black background the rest of your website is using, but you can change that color to suit your needs.
- The topic ‘[Resolved] Locking the header so it remains at the top when you scroll’ is closed to new replies.
