The jQuery code:
jQuery( document ).ready(function($) {
$(".home .et_pb_section:first-of-type").insertBefore("#main-header");
$(".home #page-container").addClass("open-up");
$('.home #main-header').waypoint(function() {
$('.home #page-container').toggleClass('open-up');
}, {offset: '50%'});
});
The CSS:
.home #main-header {
position: static;
}
.home #main-header.et-fixed-header {
position: fixed;
}
.home #page-container {
padding-top: 0 !important;
}
.home .open-up #top-menu li ul {
top: initial;
bottom: 100%;
border-top: none;
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #2ea3f2;
-webkit-box-shadow: 2px -2px 5px rgba(0,0,0,.1);
-moz-box-shadow: 2px -2px 5px rgba(0,0,0,.1);
box-shadow: 2px -2px 5px rgba(0,0,0,.1);
margin-bottom: 30px;
}
.home #top-menu .menu-item-has-children>a:first-child {
padding-top: 30px;
margin-top: -30px;
}
.home #top-menu .menu-item-has-children>a:first-child:after {
top: 30px;
}
The Headers Under Heroes webinar was just a small taste of the incredible knowledge that SJ James has. As one of the trailblazers in the Divi community, SJ James has years of experience with the Divi framework and certainly knows how to work well with it.
If you loved the content of the webinar and loved learning from SJ, then we have some great news for you!
Divi Space has just launched the Transforming Divi with CSS & jQuery Course! Grab your seat, the course will open on the first of May (early bird discount below), and we’d love for you to join us! Here is a sneak peek of whats included in the course:
- Private Facebook Group
- Introduction to CSS
- Introduction to Jquery
- Five real world examples where custom CSS has been used to make Divi better
- The jQuery Cheat Sheet
- Moving & Replacing with jQuery
- Preparing a child theme for jQuery & CSS
- Bonus: Inserting Layouts in Template Pages
- Bonus: Editing Modules
For a limited time, you can grab an EARLY BIRD DISCOUNT of 20% OFF the course with the Transforming20. Simply enter the code at the checkout and the discount will automatically apply!
Here you can create the content that will be used within the module.
hello,
this solution works perfect! But for boxed layout have so issue: horizontal scroll I mean. Is any way to fix it?
Hi SJ James,
This tutorial is amazing, loved the way you teach and explain things in that lovely accent 😉
I tried it and it works only if I put the jQuery code in the Theme Option. I have a child theme and I added a custom.js file with the code and it doesn’t work that way. The css is in the child theme also. Any idea what I’m doing wrong?
Thank you!
-Marylene
Just watched this! Really interesting and such a clear explanation, you’re a natural born teacher SJ!!
Hi SJ James, Thanks a lot for the pointer. I got it working. I had to use
jQuery(“#above-header”).prependTo(“#main-header .container”);
instead of prepend. Thank a lot for the help! This tut was so timely.
-Girish
Hi SJ and David, Thanks for this tut. SJ you rock! I tried and implemented this and had one question. I am using this code to move a logo (which is more like a banner) above the menu. I have a section which contains the logo and I gave it an Id of “above-header”.
I added the following jQuery in the Integration Tab.
jQuery(“#above-header”).insertBefore(“#main-header”);
Also I wanted this logo/banner to be on top of the menu on all the pages. So I tweaked the css and used the .page class as I notice all the pages have this class .
.page #main-header {
position: static;
}
.page #main-header.et-fixed-header {
position: fixed;
}
.page #page-container {
padding-top: 0 !important;
}
All that worked great. I also want my section (above the menu) to be fixed and not scroll away when the fixed header comes into play. So the section with the Id of “above-header” should stay fixed with the Primary menu on all pages. Can you let me know how to achieve the same. Thank You
Hey Girish! The best way to do this would be to add the section inside of the #main-header div so it fixes automatically.
Instead of
jQuery(“#above-header”).insertBefore(“#main-header”);
Use
jQuery(“#above-header”).prepend(“#main-header .container”);
Hope that helps and thanks for watching 🙂
Great tutorial. I’ve been looking for something like this for a long time. But is there a way to make a landing page homepage. So the homepage doesn’t have menus on top but at the buttom. More like a upside down homepage.
Hey Maximus, thanks for watching 🙂 There sure is. You could fix your header to the bottom of the p[age instead of the top or you could just remove the :nth-child(0) from the code we created and it will load all of the modules above the header. Lots of different ways to achieve it 🙂
Was hoping the code would be in text in the article …
Hi Ken, sorry we missed adding it but it is there now!