1. NEW YEAR SALE Be a Pro Member @ $99 / lifetime & access all our 16+ premium Divi extensions: Divi Block Pro, 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.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.
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:
    Log In or Sign Up to view this code.
    **Adjust the padding top value to suit your need.
     
    #1 Divi.Help, Nov 14, 2021
    1. PRO MEMBER PERKS Divi Block Pro - Premade logo carousel design for your Divi site without using any plugins: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.
     
    #2 davidoliver, May 14, 2023
(You must log in or sign up to post here.)