Archived

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

  • 0

Fixed Top Portion?

Question

Posted · Report post

Currently, I am using javascript to add padding to "page-main" when it calculates the height of "header". However, since it has to wait for the document to be "ready" it causes a delay in which the page doesn't correct itself until it's "ready".  The question is then:

 

Can I use CSS or change something in the framework to achieve this same layout where "page-main" scrolls under "header"?

 

or

 

Is there a way to calculate the height of "header" sooner? When I try to wait for the "load" event then nothing works at all for some reason.

 

Share this post


Link to post
Share on other sites

5 answers to this question

Posted · Report post

Hi there, yes you can use css to add padding to the header or any other element on the site. You could also set the heading position to fixed using css. An example is below, to find out more on css and how to apply in the framework check out - http://www.pagelines.com/wiki/Custom_CSS

 

#header
{padding-top:40px ;
position:fixed;}

Share this post


Link to post
Share on other sites

Posted · Report post

The thing is I already have the header fixed. What I am trying to achieve is to have "page-main" completely visible. 

 

The current solution I have is :

 

1. Set #header to fixed

2. Calculate height of header on "ready" event.

3. Adding padding  to #page-main that is about equal to the height of #header

 

Is their anyway to achieve this type of layout without javascript?

 

Is there a way to do this using LESS?

Share this post


Link to post
Share on other sites

Posted · Report post

I don't actually know what you're trying to achieve, why use javascript to calculate your headers height ?

Share this post


Link to post
Share on other sites

Posted · Report post

I am trying to have #page-main be completely visible &  scroll under the header even if the window is resized.

Share this post


Link to post
Share on other sites

Posted · Report post

If you position:fixed and top:0 your header, the rest of the page will scroll under automatically.

Share this post


Link to post
Share on other sites