1. PROMO Get 60% OFF Lifetime Pro Membership & access all our Pro Divi Extensions, Divi Layouts, Divi AI Generator, Divi Block, etc.VIEW PRICING
Dismiss Notice
UPDATE Custom Color Scheme + Premade Divi Layouts - A perfect combination to boost productivity. New 'Gadget Repair' layout added.Try our Custom Color Layouts
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.
Learn More About Divi BlockFree Version ~ 340+ Free Blocks

How to align Fullwidth Header Module text to be at the top?

Discussion in 'Divi Tutorials' started by Divi.Help, Nov 14, 2021.

  1. Divi.Help

    Divi.Help Administrator
    Staff Member

    To align fullwidth header module text to the top, you just have to:
    1. Add this CSS class to the Section Settings > Advanced > CSS Class: dh-fh-top
    2. Then add the below CSS in Divi > Theme Options > Custom CSS:
    Code:
    .dh-fh-top .header-content-container {
        align-self: start!important;
        padding-top: 40px!important;
    }
    .dh-fh-top .et_pb_fullwidth_header_container {
        justify-content: start!important;
    }
    **Adjust the padding top value to suit your need.
     
    1. PRO MEMBER PERKS Divi.Help Pro Layout Packs - Agency Divi layout pack featuring modern overlay archive blog layout with hover effects:View Demo
  2. davidoliver

    davidoliver New Member

    By default, the text in the Fullwidth Header Module is vertically centered. However, you can align it to the top of the module using the following steps:

    1. Open the page with the Fullwidth Header Module that you want to align the text to the top of.

    2. Click on the Fullwidth Header Module to open the module settings.

    3. In the "Content" tab, click on the "Design" sub-tab.

    4. Scroll down to the "Header Text" section.

    5. In the "Header Text" section, add the following CSS code in the "Main Element" text box:
    css
    display: flex;
    align-items: flex-start;

    1. Save your changes.
    This CSS code will set the display of the header text to flex, and align the items (which includes the text) to the flex-start position, which will move the text to the top of the module.