How To Make A Full Screen Fixed Header

In today's tutorial we will be recreating the homepage header of iheartpagelines.com. This type of design is perfect for a single page of a website such as your home page.

For this tutorial we will be using the splash-up section simply because its awesome. But you are welcome to use a text-box or embed if you do not have a pro subscription just make sure that you select height of window in the settings.

Laying out the sections

The first thing we need to do is layout the sections we will be using. Here is what we will need:

  • Splash-up Section
  • Text-box section (set to height if window)
  • Mega-Nav (optional)
  • Everything else (other section that you maybe using- this can also be done later)

The first 3 need to be layout in that order within the template area.

fixed

The purpose of the text-box section is to keep the sections below it from sliding up once we add a fixed position to the splash-up. It will also keep things responsive when the screen gets smaller.

Now for the magic

Now that we have our sections in place we need to have some classes to them.

First we need to add a class of ihp-fixed-hero   to the splash-up along with this css to your custom less area. This will give the splash-up a fixed position and make it 100% wide.

.ihp-fixed-hero {
position: fixed;
width: 100%;
z-index:1;
}

You should now have a fixed splash-up next we need to add a class of trick-space to the text-box section along with this CSS-

.trick-space {
    z-index: -1;
}

This will put the text box behind the splash-up so you can use the splash-up buttons and menus.

Minor issues

Because Platform always adds a new section to the very top of the template it will throw the text-box off until you drag it below the text-box. The text-box must always be after the splash-up with height of window selected and nothing must be on top of it or you will loose the effect.

Media Queries

I applied all my styles under a desktop media query so that when the screen got below 1025px things would go back to normal and I also hid the text-box used to keep things together as well .

/*\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/
/*                            */
/*       Desktop query        */
/*                            */
/*\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/

@media screen and (min-width: 1025px){
 /*welcome hero*/
.ihp-fixed-hero {
  position: fixed;
  width: 100%;
  z-index:1;
}

/*trick section*/
.trick-space {
    z-index: -1;
}
}

/*\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/
/*                            */
/*       Mobile query         */
/*                            */
/*\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/

@media screen and (max-width: 1024px){
/*hide the text-box on mobile*/
your-text-box-id {
    display: none;
}
}

***Also note that all the sections on that page will need to have a background color because by default all the section in Platform 5 are transparent so be sure to give a solid color or image background.

***Update***

You will also need to add a higher z-index to the sections on that page to make the background color show up. Add the class of ihp-normal  to sections when you notice the background you set is not showing up.

.ihp-normal {
z-index: 100;
}

 

I hope this article was useful to someone if you any questions feel free to post it in the comments.

You can also find us on Twitter and Facebook.

About the author

Aires Dagraca, is the creative force behind Xolani Studios, a Web Design Company that focuses on bringing the best web experience to their clients. He also enjoys Gaming, Web Design, Graphic design and family time with his wife and kids. For business inquiries reach out to him here.

A special note from the author.

iHeart pagelines

8 Responses to "How To Make A Full Screen Fixed Header"
  1. Thanks Aires! This is a great tutorial. Question have you deployed this technique in DMS? I attempted it using the canvas sections but found it to result in a mess of layers...not the clean stable result in PL5. I would really love to use this in DMS if you have any additional tips. Thanks for your work here!

    • I have not tried this in DMS but I will give it a try and let you know how it goes. I am pretty sure the drag and drop grid is going to be an issue with the elements.

  2. Hey Aries, thanks for the great website! I was messing around with this today and decided to remove the CSS and even though it is gone, the site seems to be caching it. I may have missed it, but is there a place to flush the cache? I must be missing something really simple.

          • I am extremely embarrassed to say it was my fault, but it took me forever to figure that out. I was putting a lot of text into sub headers in the hero section of Elements and there was a missing / tag. Truly, I need to go back to 1996 when I first started this stuff.

  3. Hi Aires,
    Follow-up question on this technique: How do you cover the lower portion of the SplashUp section the hangs below the footer of the page? I have been playing around with the fine tuning and I cannot produce a clean solution. Any advice would be appreciated. Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *


How To Make A Full Screen Fixed Header

Published on by | 8 Comments

In today's tutorial we will be recreating the homepage header of iheartpagelines.com. This type of design is perfect for a single page of a website such as your home page.

For this tutorial we will be using the splash-up section simply because its awesome. But you are welcome to use a text-box or embed if you do not have a pro subscription just make sure that you select height of window in the settings.

Laying out the sections

The first thing we need to do is layout the sections we will be using. Here is what we will need:

  • Splash-up Section
  • Text-box section (set to height if window)
  • Mega-Nav (optional)
  • Everything else (other section that you maybe using- this can also be done later)

The first 3 need to be layout in that order within the template area.

fixed

The purpose of the text-box section is to keep the sections below it from sliding up once we add a fixed position to the splash-up. It will also keep things responsive when the screen gets smaller.

Now for the magic

Now that we have our sections in place we need to have some classes to them.

First we need to add a class of ihp-fixed-hero   to the splash-up along with this css to your custom less area. This will give the splash-up a fixed position and make it 100% wide.

.ihp-fixed-hero {
position: fixed;
width: 100%;
z-index:1;
}

You should now have a fixed splash-up next we need to add a class of trick-space to the text-box section along with this CSS-

.trick-space {
    z-index: -1;
}

This will put the text box behind the splash-up so you can use the splash-up buttons and menus.

Minor issues

Because Platform always adds a new section to the very top of the template it will throw the text-box off until you drag it below the text-box. The text-box must always be after the splash-up with height of window selected and nothing must be on top of it or you will loose the effect.

Media Queries

I applied all my styles under a desktop media query so that when the screen got below 1025px things would go back to normal and I also hid the text-box used to keep things together as well .

/*\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/
/*                            */
/*       Desktop query        */
/*                            */
/*\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/

@media screen and (min-width: 1025px){
 /*welcome hero*/
.ihp-fixed-hero {
  position: fixed;
  width: 100%;
  z-index:1;
}

/*trick section*/
.trick-space {
    z-index: -1;
}
}

/*\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/
/*                            */
/*       Mobile query         */
/*                            */
/*\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/

@media screen and (max-width: 1024px){
/*hide the text-box on mobile*/
your-text-box-id {
    display: none;
}
}

***Also note that all the sections on that page will need to have a background color because by default all the section in Platform 5 are transparent so be sure to give a solid color or image background.

***Update***

You will also need to add a higher z-index to the sections on that page to make the background color show up. Add the class of ihp-normal  to sections when you notice the background you set is not showing up.

.ihp-normal {
z-index: 100;
}

 

I hope this article was useful to someone if you any questions feel free to post it in the comments.

You can also find us on Twitter and Facebook.

About the author

Aires Dagraca, is the creative force behind Xolani Studios, a Web Design Company that focuses on bringing the best web experience to their clients. He also enjoys Gaming, Web Design, Graphic design and family time with his wife and kids. For business inquiries reach out to him here.

A special note from the author.

iHeart pagelines

8 Responses to "How To Make A Full Screen Fixed Header"
  1. Thanks Aires! This is a great tutorial. Question have you deployed this technique in DMS? I attempted it using the canvas sections but found it to result in a mess of layers...not the clean stable result in PL5. I would really love to use this in DMS if you have any additional tips. Thanks for your work here!

    • I have not tried this in DMS but I will give it a try and let you know how it goes. I am pretty sure the drag and drop grid is going to be an issue with the elements.

  2. Hey Aries, thanks for the great website! I was messing around with this today and decided to remove the CSS and even though it is gone, the site seems to be caching it. I may have missed it, but is there a place to flush the cache? I must be missing something really simple.

          • I am extremely embarrassed to say it was my fault, but it took me forever to figure that out. I was putting a lot of text into sub headers in the hero section of Elements and there was a missing / tag. Truly, I need to go back to 1996 when I first started this stuff.

  3. Hi Aires,
    Follow-up question on this technique: How do you cover the lower portion of the SplashUp section the hangs below the footer of the page? I have been playing around with the fine tuning and I cannot produce a clean solution. Any advice would be appreciated. Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *


Error: Please enter a valid email address

Error: Invalid email

Error: Please enter your first name

Error: Please enter your last name

Error: Please enter a username

Error: Please enter a password

Error: Please confirm your password

Error: Password and password confirmation do not match