Full height slider with header menu below
If you find this tweak helpful:
Beginners
Tweaking Elegant Themes involves creating a child theme and editing PHP and CSS files within a text editor. If you have never done this you may want to read our guide on creating a child theme. All tweaks are written with the assumption that you have a default installation of your theme. Any tweaks or changes you may have previously made to your theme could affect the outcome of the tweaks on this site. All tweaks should be tested before applying to a live site.
I’ve been seeing this a lot and had a request for it from both a client and Elegant Tweak reader. The idea is to have a slider at the top of a page that fills the entire width and height of the browser window. As you scroll down, the menu and page content slide up and over the slider. Once the menu reaches the top of the page, it locks into place and the rest of the page content continues to scroll as usual.
You can view the demo here.
CSS
Locate your style.css file or edit your child theme’s style.css
Add the following:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
/* FIXED HEADER ON SCROLL */ .page-id-224 #page-container { padding-top: 0 !important; } .page-id-224 #main-header { position: relative !important; top: 100vh !important; } .page-id-224 #main-header.et-fixed-header { position: fixed !important; top: 0 !important; } #top-slider-224 { position: fixed; top: 0; width: 100%; z-index: 0; height: 100%; background-color: #000; padding: 0; } #top-slider-224 .et_pb_slide { position: relative; height: 100%; } .page-id-224 .et_pb_slider, .page-id-224 .et_pb_slides, .page-id-224 .et_pb_slide, .page-id-224 .et_pb_container .et_pb_module.et_pb_slider { height: 100vh !important; min-height: 100vh !important; } .page-id-224 .et_pb_slider .et_pb_slide { max-height: 100%; } #top-slider-224 .et_pb_container { height: 100vh; width: 100%; } #top-slider-224 .et_pb_slide_description { padding: 30% 8%; } .page-id-224 .et_pb_section { position: relative; z-index: 1; } #text-224 { margin-top: 100vh; } /* ANCHOR FOOTER TO BOTTOM AND PREVENT BOUNCE WHEN CLICKING ON SLIDER BUTTON */ .page-id-224 #et-main-area { position: relative; } .page-id-224 #main-content { position: relative; } .page-id-224 #main-footer { position: relative; z-index: 99999; } |
The styles above apply to only one page on my demo site using the class .page-id-224. Replace the number with the ID number of the page you’re working on or use .home to apply it to your homepage only. I also use the ID #top-slider-224 for the ID of the fullwidth section containing the slider and #text-224 for the ID of the first section below the slider. Replace these with whatever ID you want to use.
Just to recap everything:
- Create a page with the page builder and add a fullwidth section.
- Give the fullwidth section an ID. In my example I used top-slider-224
- Add a fullwidth slider module to the fullwidth section.
- Add your background image and content to a new slide within the slider module.
- In my example, my slide button links to the first section below the menu, creating the automatic scroll down effect when clicked. To do this, give the button URL the ID of the section you create in the next step below. In the example the button URL would be #text-224
- Create the section you want to display below the menu and give it an ID. In my example, the ID again is text-224
- Now you can build the rest of the page as normal, just make sure the section you just created in step 6 is the first section below the fullwidth section we created in step 1.
- Copy and paste all of the CSS provided above into your style.css file. You can do this using a child theme or paste it directly in the Divi Custom CSS box.
- Replace .page-id-224 with the ID of your page. You can find this by editing the page or post and hovering your cursor over the edit button below the title. While hovering over this button, a URL will pop up in the bottom left corner of your browser with post= followed by a number. This is the number you’ll use.
- Replace the section IDs #top-slider-224 and #text-224 with the IDs you used in step 2 and step 6 above.
The slide description has a top and bottom padding of 30%. You’ll probably want to increase this to your liking on responsive screen sizes using media queries. Notice in the smartphone screen size below I use 45vh instead of 45px just to show you the difference in the results.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/*-------------------[480px]------------------*/ @media only screen and ( max-width: 767px ) { #top-slider-224 .et_pb_slide_description { padding: 45% 8%; } } /*-------------------[320px]------------------*/ @media only screen and ( max-width: 479px ) { #top-slider-224 .et_pb_slide_description { padding: 45vh 8%; } } |
If you don’t want the slider to take up the entire window height and would like to leave room for the menu, we can use calc in our CSS to subtract the height of the header. The default Divi header height is 80px so I’ll use that below. If your header is taller, make sure you use the correct height. Replace the appropriate styles above with their counterparts below or you can simply copy the full CSS further below.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.page-id-224 #main-header { position: relative !important; top: calc(100vh - 80px) !important; } .page-id-224 .et_pb_slider, .page-id-224 .et_pb_slides, .page-id-224 .et_pb_slide, .page-id-224 .et_pb_container .et_pb_module.et_pb_slider { height: calc(100vh - 80px) !important; min-height: calc(100vh - 80px) !important; } #top-slider-224 .et_pb_container { height: calc(100vh - 80px) width: 100%; } #text-224 { margin-top: calc(100vh - 80px) } |
Here is the full version of the CSS if you want to leave room for the menu:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
/* FIXED HEADER ON SCROLL */ .page-id-224 #page-container { padding-top: 0 !important; } .page-id-224 #main-header { position: relative !important; top: calc(100vh - 80px) !important; } .page-id-224 #main-header.et-fixed-header { position: fixed !important; top: 0 !important; } #top-slider-224 { position: fixed; top: 0; width: 100%; z-index: 0; height: 100%; background-color: #000; padding: 0; } #top-slider-224 .et_pb_slide { position: relative; height: 100%; } .page-id-224 .et_pb_slider, .page-id-224 .et_pb_slides, .page-id-224 .et_pb_slide, .page-id-224 .et_pb_container .et_pb_module.et_pb_slider { height: calc(100vh - 80px) !important; min-height: calc(100vh - 80px) !important; } .page-id-224 .et_pb_slider .et_pb_slide { max-height: 100%; } #top-slider-224 .et_pb_container { height: calc(100vh - 80px) width: 100%; } #top-slider-224 .et_pb_slide_description { padding: 30% 8%; } .page-id-224 .et_pb_section { position: relative; z-index: 1; } #text-224 { margin-top: calc(100vh - 80px) } /* ANCHOR FOOTER TO BOTTOM AND PREVENT BOUNCE WHEN CLICKING ON SLIDER BUTTON */ .page-id-224 #et-main-area { position: relative; } .page-id-224 #main-content { position: relative; } .page-id-224 #main-footer { position: relative; z-index: 99999; } |
44 Comments
Hello,
albeit this tweak is great, it doesn’t work in my Divi Child theme. I replaced all the “page-id-224” with “home”, as well as “224” with “home” too.
The homepage full width slider doesn’t get bigger like in your demo. I should do something wrong.
Please let me know, thanks.
February 22, 2016
I know this is late but send me the link Riccardo and I would be happy to help you with this if you’re still interested. If you resolved the issue, send us the link so we can all marvel at its beauty 🙂
May 19, 2016
Hello,
Very impressive ! Kind of effect I was looking for….
I wish I could add some transparency to the sliding text background, where can I modify this please ?
Congratulation again for these tricks,
Claude
March 25, 2016
You can do this with a pseudo element. Something like this would apply a semi-transparent layer behind the text:
#top-slider-224 .et_pb_slide:before {
content: “”;
background-color: rgba(0, 0, 0, .5);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
May 19, 2016
Hi, thank you for this incredible tweak. I do have 1 issue. Can’t figure out what to do to import and where to find the style css. Do you have a video tutorial or maybe a step by step description?
Again, thank you very much for sharing 😉
Kind regards,
Amin
May 25, 2016
Hi Amin. After reading through the tutorial again, I can see how maybe it was not very clear with the instructions I provided. I’ve updated the tutorial with step-by-step instructions. Let me know if you still have problems. Thanks.
May 26, 2016
Hello,
The result of your “Full Height Slider” tweak is beautiful! Thank you kindly for your efforts!
I have a slight glitch in that the bottom header is not coming up quite enough on mobile (iPhone 6s and iPad Pro 9.7). The header is partially below screen on mobile. This might be a function of the space needed for the mobile Safari browser.
The calc function works perfectly for me on desktop.
I tried adding additional negative value to the calc function (in the three places in the CSS), but that did not change the mobile views.
Please let me know if you have a solution for the mobile view of the header.
Thanks,
Mike
May 29, 2016
Thanks Mike!! I’m not sure what you mean with your header issue. Can you give me a link to look at or email me a screenshot? I’ve tried the demo page on iPhone 6 and 6+ and everything looks good on Safari and Chrome. Make sure lines 3-5 in the code above are copied and working correctly. This removes the page padding and might be causing your issue.
June 2, 2016
Hi Brad,
Sorry! Here is the link: ipro.co
Yes, lines 3 to 5 are implemented.
The menu on mobile (iPhone 6s) is not visible or fully visible at first loading of the page. After scrolling, I see the menu.
Thanks!
Mike
June 12, 2016
Hmmmmm. The original effect is to hide the menu completely until the user scrolls down. So the fullwidth slider should cover the entire screen on desktop and mobile like in my example. But I think you’re trying to bump it up enough that the menu shows along the bottom of the screen when the page first loads. I’m not sure why it’s not working on Safari on mobile to be honest with you.
It looks fine in Safari’s mobile emulator and it works on Chrome on iPhone 6. It’s just the safari browser on mobile. My guess is either a glitch in Safari, a difference in the way the two browsers render, or part of the code is not formatted correctly and Chrome is able to guess what it’s meant to be but Safari is not. I would go through your CSS and just make sure everything is formatted correctly: every line ends in semicolon, mobile responsive queries are enclosed in brackets, etc. Aside from that, I’m afraid I don’t have a good answer for you.
June 21, 2016
That’s a creative answer to a diilucfft question
July 19, 2016
Wow – this was exactly what I was searching for. However, there seems to be a bug in mine. When I reach the section where the navigation bar appears, the shrinking of the naviagation bar causes a glitch.
http://darlingtonjonesimagery.com/welcome/
June 22, 2016
Hi Darren. It doesn’t look like you have the tweak implemented on the page you linked to. If you want to try again, let me know when it’s ready and I’ll take a look
June 22, 2016
Hello,
2 Questions:
– Where Do I change the Section ID? Is it the field “css-id” in the Custom-css Settings?
And it would be great if we could have the complete code for the fullscreen Slider with the 80px Menu above, because I don´t know which lines of code are additional und which one are substition of existing lines.
Thanks in advance 🙂
June 27, 2016
Correct. The section id is added in the Custom CSS tab within the fullwidth section settings. I also updated the tutorial and provided the full code if you want to leave room for the menu.
June 29, 2016
wanted… x-x hottie beach w/the quad’s I have all is ne sex hot women eded to ride, put sand in this issue line, or u will always be deleted, no pic u will be deleted, this is for this particular weekend sat or sun. play? ride? or both? i possess quad’s, just ne web cam ed you, who is it going to be that come along? good looking guy, hwp, work out, x’, clean, ddf, u-b-x, no drama! and no BFS, I DO NOT TAKE ANOTHER GUY’S GIRL! GET IT!, NO HURRY! free dating site , zip 83800, 96139
May 8, 2017
Hello,
I can set to all pages of the site the styles without having to enter each time the page ID.
Thankyou
June 30, 2016
I’m not 100% sure what you mean. You’re saying you want to add this to every page, but it only works if you add the page ID for every page?
If this is the problem, remove “.page-id-224” from your stylesheet and it will apply it to every page. You’ll just have to be careful. For example, removing it from this rule “.page-id-224 .et_pb_slider” will apply the effect to all sliders on your website. So you might want to replace it with the section ID. Hope all of that makes sense.
July 1, 2016
Hello Brad,
your tweak is really impressive and the tutorial comprehensive, but I still can’t make it work. I went to every step you described, I really don’t know what I’m doing wrong. http://timeoff.ro/claudio-parrinello/ Please let me know if you can help me further. Thank you in advance!
July 19, 2016
Looks like you got it!! Looks great!
October 29, 2016
Hi, thanks so much for this! One quick question, how would you apply it to certain pages, not all the pages, just certain ones. Thanks!
July 27, 2016
Just add the page class like I did: .page-id-224
October 29, 2016
hi, great! can i do it whith a rev slider??
September 27, 2016
You should be able to apply this to the rev slider. Just target the rev slider container ID vs the Divi fullwidth ID that I used
October 29, 2016
My god this trick is what i need for our website (under construction)
I have the same problem of riccardo… i replaced with home but nothing happen
I also trying to figure out how to have this effect with fullwidth code module instead of divi slider background…. because i’m using witht the code a crelly slider..
Your help would be more than precious..
if its possible where could i send you access to see the website?
Thanks a lot
October 28, 2016
I replace .et_pb_slider with .et_pb_fullwidth_code and i used the id of the homepage (.page-id-2) instead of .home…
It works at 50% :/ 2 main problems:
1) when i click on the button to go down to the page to the next section the page goes too down and can’t see the menu
2) the menu “fixed” won’t stay fixed (fixed menu is on inside divi options)..so when i scroll down in the page the menu disappear 🙁
October 28, 2016
Problem 1 should go away when you solve problem 2. As for problem 2, I’m not sure why the menu wouldn’t stick when it reaches the top. Check to make sure you have the CSS from above that targets the sticky header for that page
October 29, 2016
Everything works perfectly now !! Sorry to have disturbed you!
AMAZING TRICK 🙂 thanks
November 2, 2016
Hello, this is just great effect I want to apply immediately on my website. One question – does it work with the Extra Theme, as well?
January 16, 2017
Hi Adam. It should work with the Extra theme. You may have to adjust the CSS selectors accordingly though
March 20, 2017
I followed all the steps but its not working!
Website under construction.
March 18, 2017
This is amazing! Only 1 problem, when I try to implement onto my website, the Navigation wouldn’t stay at the bottom, The navigation header appears at the top of the screen as soon as I scroll down unlike yours.
Any idea what could cause this?
April 6, 2017
Bumping up a 3 years old tutorial just because Elegant Themes still fail to provide a working solution.
I have the exact same problem. Before it was working great just like in the demo, until I change the main menu’s background color & size via theme customizer, and now the menu decides to just jump to the top when I scroll.
I would be really grateful if anyone can get me in the right direction.
My test site is lyd.clandestinobali.com
I’m currently using WordPress 4.9.8 and Divi 3.0.106.
January 29, 2019
Hi Brad, this tutorial is amazing. It works. But when I want to use both Primary Menu (main-header) and Secondary Menu (top-header), just Primary Menu is sticky, the Secondary Menu not.
Can you solve it?
I added some codes like this:
.page-id-757 #top-header {
position: relative !important;
top: 100vh !important;
}
.page-id-757 #top-header.et-fixed-header {
position: fixed !important;
top: 0 !important;
z-index: 100000;
}
May 27, 2017
Hi did you managed to fix this problem ?
December 24, 2017
Thank you Brad
I implemented your code but the image of the slide does not appear complete, it does not show 100% of the height. Could you please guide me how I can solve it.
Link: http://desarrollo.kingfrogsend.com/dgsalud/prueba-de-slide/
Best regards
Adriana
August 26, 2017
Looks like you forgot to give the first section below your slider section an ID and adding the CSS to apply to that ID.
Step six in the tutorial above. And here is the CSS you apply to it:
#text-224 {
margin-top: 100vh;
}
August 28, 2017
Hello!
Thank you Brad. You’re very kind.
I did all the adjustments and all ok
September 4, 2017
Hi Brad I’m trying to attempt a similar thing as your tutorial shows, but because of my severe ignorance in CSS and everything that has to do with web development I’m not exactly sure who to get it to work for my current case. I’m building my first website, and I’m using Divi, I’ve got two headers that I want to sit above my menu similar to your full-page slider, but I don’t want them to take up the entire screen.
I believe I get the just of what I should do but I still need help on the finer points of the tutorial to see if it applies to my current layout.
Any help would be great, thanks for the tutorial as I’ve been scratching my head as to how to do this for a few days now and it seems there’s not a lot of help online for this sort of thing that’s easily accessed.
August 31, 2017
Brad,
Does this still work with Divi after all the updates?
I am having an issue getting it to work though everything
seems to be correct. I am not sure what I am missing.
Thank you.
September 18, 2017
Thank you for this tip that actually works on the last version of Divi. (Nov.2017)
Just a question: I’m trying to remove the text animation effect that come up when the second slide appears. I mean: I’d like to have a STILL text with different slide background images. Is this possible? Thank you! <3
November 23, 2017
Thankyou this is working awesome for me any suggestions as to why i am getting this space on mine before the slider ??
January 22, 2018
Look and awesome.
March 7, 2018
Hello Brad,
thank you for this excellent blog. I appreciate it.
I realised the css but i have one problem. How can i use the Slider above the menu without a parallax?
I tried a lot with “position: fixed | absolute | static” but i failed.
Can you help me?
Regards
Jari
April 3, 2018