1. PROMO Upgrade to Pro Membership @ $99 / Lifetime & access all our 16+ premium Divi extensions: Divi Block, Carousel Toolkit, etc.LEARN MORE
Dismiss Notice
NEW Divi.Help Pro Carousel AI Toolkit - Magically turn your Divi design into carousel, simply by using our online toolkit. No plugins needed. Now it works with Divi 5 as well!Try our carousel AI toolkit
BEST Divi Block - A revolutionary drag & drop tool to easily mix & match 960+ premade blocks (Light & Dark) to kick start your Divi site design. Special module designs are included as well. Also newly added AI generator & color. Now it works with Divi 5 as well!
Learn More About Divi BlockFree Version ~ 340+ Free Blocks

Solved Making header sticky without messing up the footer and horizontally and vertically align menu

Discussion in 'Free Divi Community Forum' started by andalltha, May 7, 2020.

  1. andalltha

    andalltha Member

    Hi there!

    I'm building a website with Divi. I encountered a few problems. I spent hours trying to resolve them but I just can't.

    I want the header to always stick to the top of the screen (see screenshot1.jpg) but when I set the header to sticky in the section settings in the Theme Builder it messes up the footer and stuff. Maybe I made a mistake but I can't see which one.

    I'd also like the section links in the menu dropdown to be horizontally and vertically aligned. It gets horizontally aligned only on desktop and it never gets vertically aligned, no matter how many different ways I tried.

    The last thing I wonder is how to make the menu links black and not grey when hovered (see screenshot2.jpg). I also tried lots of stuff and nothing changes.

    Thank you, have a nice day!
     

    Attached Files:

    #1 andalltha, May 7, 2020
    1. PRO MEMBER PERKS Divi Block Pro - Premade logo carousel design for your Divi site without using any plugins:View Demo
  2. Divi.Help

    Divi.Help Administrator
    Staff Member

    What about setting it to be position fixed?
    Try the below CSS in Divi > Theme Options > Custom CSS:
    Code:
    Log In or Sign Up to view this code.
    Try the below CSS in Divi > Theme Options > Custom CSS:
    Code:
    Log In or Sign Up to view this code.
     
    #2 Divi.Help, May 8, 2020
  3. andalltha

    andalltha Member

    Thank you very much for the useful answers. Everything works but one problem still remains.

    When the header is set to fixed in the section settings, it messes up the dropdown menu and it raises the footer's height (see screenshot). The footer must share the same height than the header's one. Maybe I ask silly questions but I really can't make it. Hope I'll learn more soon.

    Have a nice day!
     

    Attached Files:

    #3 andalltha, May 11, 2020
    1. PRO MEMBER PERKS Divi Ultimate Archive Plugin - Tons of elegant premade sidebar styles to choose from for your Divi site:Learn More
  4. Divi.Help

    Divi.Help Administrator
    Staff Member

    It should work just fine. Will need to see the issue live to troubleshoot.
    It's because you set the Row Settings min-height to include the header height: calc(100vh - 103px)

    Since you made it position fixed, then header is now not within the content area & you should exclude the header height: calc(100vh - 50px)
     
    #4 Divi.Help, May 12, 2020
  5. andalltha

    andalltha Member

    Thank you for the answer!

    It's live, you can troubleshoot now. As you can see on the screenshot attached, the menu is a mess when the header is set to fixed.
     

    Attached Files:

    #5 andalltha, May 12, 2020
    1. PRO MEMBER PERKS Divi Block Pro - Premade logo carousel design for your Divi site without using any plugins:View Demo
  6. Divi.Help

    Divi.Help Administrator
    Staff Member

    Try to go to your Section Settings & remove these:

    left: 50%;
    transform: translateX(-50%);
     
    #6 Divi.Help, May 13, 2020
  7. andalltha

    andalltha Member

    Thank you so much! It works!
     
    #7 andalltha, May 13, 2020
    1. PRO MEMBER PERKS Divi Block Pro - Easy-to-use drag & drop interface to mix & match 456+ premade Divi blocks & export as json file:Learn More
(You must log in or sign up to post here.)