Jump to content

Archived

This topic is now archived and is closed to further replies.

jcritty

Fixed Header

Recommended Posts

jcritty

Trying to get the full header to act the way the fixed nav bar does.

 

Have added position:fixed and width 100% to the #header in CSS, but the content for the rest of the page is now on top of the header...

 

Any ideas?

Share this post


Link to post
Share on other sites
greenfly

hello @jcritty 

 

Could we have a look at your site please? 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
jcritty

Just turned off the maintenance mode for you.

 

jeremycrittenden.com

Share this post


Link to post
Share on other sites
greenfly

Could you remove you Custom CSS you have added to make this change and we can suggest an alternative for you. 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
greenfly

Hi Jeremy 

 

Try the following code 

.header {
  background-color:#000000  ;
  position:fixed;
  width:100%; /* make the header fit the browser */
}
.pl-area-wrap {
  padding-bottom:20px;
  padding-top:250px;
}

The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
greenfly

Hi Jeremy 

 

You can see here how changing the padding on top of the main page content means the content sits below the header http://d.pr/i/DDsR

 

Have you tried changing the setup of your page to full width instead of boxed and you may not need to use the extra CSS to add the padding to the top of the main page content. 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
jcritty

It's currently set to percentage based, full width.

 

I see it in the image, yes.  But adding the CSS you gave me to the custom code section hasn't had any effect.  The main content is still living on top of the header, even with that padding

Share this post


Link to post
Share on other sites
jcritty

Anything else you think I could try?

Share this post


Link to post
Share on other sites
James B
Hi there.
 
This puts the header on top of the site content.
 
.header {
    background-color: #000000;
    position: fixed;
    width: 100%;
    z-index: 100;
    top:0;
}
 
This moves the content down to make sure it is when the page loads and doesn't go up under the header.
 
#dynamic-content {
    margin-top: 200px;
}

 

http://screencast.com/t/rid3s66Gdw


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
jcritty

Worked like a charm!  Thank you so much!

Share this post


Link to post
Share on other sites

×