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:

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:

  1. Create a page with the page builder and add a fullwidth section.
  2. Give the fullwidth section an ID. In my example I used top-slider-224
  3. Add a fullwidth slider module to the fullwidth section.
  4. Add your background image and content to a new slide within the slider module.
  5. 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
  6. Create the section you want to display below the menu and give it an ID. In my example, the ID again is text-224
  7. 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.
  8. 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.
  9. 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.
  10. 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.

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.

Here is the full version of the CSS if you want to leave room for the menu:

 

    44 Comments

  1. 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.

    Riccardo

    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 🙂

      Brad (admin)

      May 19, 2016

  2. 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

    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%;
      }

      Brad (admin)

      May 19, 2016

  3. 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

    Amin Lelieveld

    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.

      Brad (admin)

      May 26, 2016

  4. 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

    Mike McCarthy

    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.

      Brad (admin)

      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

        Mike McCarthy

        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.

          Brad (admin)

          June 21, 2016

    • That’s a creative answer to a diilucfft question

      Snowy

      July 19, 2016

  5. 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/

    Darren George

    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

      Brad (admin)

      June 22, 2016

  6. 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 🙂

    Michael

    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.

      Brad (admin)

      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

  7. Hello,
    I can set to all pages of the site the styles without having to enter each time the page ID.

    Thankyou

    Cr

    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.

      Brad (admin)

      July 1, 2016

  8. 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!

    Laurentiu

    July 19, 2016

    • Looks like you got it!! Looks great!

      Brad (admin)

      October 29, 2016

  9. 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!

    Samuel Jackson

    July 27, 2016

    • Just add the page class like I did: .page-id-224

      Brad (admin)

      October 29, 2016

  10. hi, great! can i do it whith a rev slider??

    sebastian

    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

      Brad (admin)

      October 29, 2016

  11. 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

    Fulvio

    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 🙁

      Fulvio

      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

      Brad (admin)

      October 29, 2016

      • Everything works perfectly now !! Sorry to have disturbed you!
        AMAZING TRICK 🙂 thanks

        Fulvio

        November 2, 2016

  12. 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?

    Adam

    January 16, 2017

    • Hi Adam. It should work with the Extra theme. You may have to adjust the CSS selectors accordingly though

      Brad (admin)

      March 20, 2017

  13. I followed all the steps but its not working!

    Website under construction.

    bhargav

    March 18, 2017

  14. 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?

    Fred

    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.

      Andrie

      January 29, 2019

  15. 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;
    }

    Remy

    May 27, 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;
      }

      Brad (admin)

      August 28, 2017

      • Hello!

        Thank you Brad. You’re very kind.

        I did all the adjustments and all ok

        Adri Salazar

        September 4, 2017

  16. 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.

    Escapetoeurope

    August 31, 2017

  17. 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.

    Vai

    September 18, 2017

  18. 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

    Mario

    November 23, 2017

  19. Thankyou this is working awesome for me any suggestions as to why i am getting this space on mine before the slider ??

    belinda

    January 22, 2018

  20. 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

    Jari

    April 3, 2018

Post a Reply

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

Pin It on Pinterest

Share This