Skip to main content

Have questions? I can help!

< All Topics
Print
Table of Contents

Your logo and main menu live in the site header, which is managed through the Divi Theme Builder.
This means you can edit them once, and the changes will automatically show up across your entire website — no need to update every page individually (yay!).

Accessing your Global Header

Go to Theme Builder>Global Header and click edit

Theme Builder Divi

 

Click on Global Header

 

Click on the Menu module setting. In here, you can make changes to the logo, elements, colours and font.

This is what it looks like on Divi 4

This is what it looks like on Divi 5

Update Your Logo

  1. Once the header opens, hover over the menu module (usually on the left side of the header).
  2. Click the gear icon to edit.
  3. In the Content>Logo settings, click Upload or Select Image to choose your new logo from the Media Library.
  4. Edit the link, elements, background as you like, and click the green checkmark  to save, then Save the entire layout (bottom right purple circle ? click the save icon ). Exit the builder when done.

Tip:

  • Make sure your logo file is a transparent PNG for best results.

  • Ideal logo height: around 60–80px tall so it doesn’t push your header too wide.

  • You can upload a smaller version if your logo looks too large once published.

 

Edit or Update Your Menu Links

  1. Still inside the menu module, under Content > Menu, you’ll see a dropdown — choose which WordPress menu to display (usually “Main Menu” or “Primary Menu” - this should be ones you have created previously. ).
  2. To change the menu items themselves, exit the Divi Builder (save your changes first!) and go to:
    Dashboard > Appearance > Menus
  3. From here you can:

    • Add or remove pages.

    • Rename menu labels.

    • Drag and drop to reorder items.

 

Design tabs

The Menu Text options in Divi allow you to fully customise the appearance and behavior of your menu text. These settings give you control over everything from font style to alignment, ensuring your menu aligns with your design goals.
Note: the interface will look slightly different on Divi4.
Menu module - Menu Text options

Where to Find the Menu Text Options

  1. Open the Module Settings: Click the gear icon or the module itself to access the settings.
  2. Navigate to the Design Tab: Locate the Menu Text option group.

Menu Text Customisation Settings

  • Active Link Color: The active link represents the current page being viewed. This setting allows you to select a color for active links, helping users differentiate them from other menu links. You can choose a color from your site's palette or use the eyedropper tool to pick a custom shade.
  • Menu Font: Choose the font style for your menu text. By default, the theme’s standard font is selected. You can select another font from the dropdown or upload a custom font to match your branding.
  • Menu Font Weight: You can adjust the boldness of your menu text by selecting from the available font weights, which range from light to extra bold.
  • Menu Font Style: Customize the style of the menu text. You can apply:
    • Italicized
    • Capitalized
    • Small Capitals
    • Underlined
    • Strike-through
  • Menu Text Color: You can select a custom color for your menu text from your site’s color palette or use the eyedropper for more options.
  • Menu Text Size: You can define the size of your menu text by using the range slider or entering a numerical value. This helps ensure that the text is appropriately sized for your design.
  • Menu Letter Spacing: You can control the spacing between each letter by dragging the range slider or inputting a specific value. Larger values increase the spacing between characters.
  • Menu Line Height: To improve readability, you can adjust the vertical spacing between lines of text by using the slider or entering a numerical value.
  • Menu Text Shadow: Add a shadow effect to the menu text. Once a shadow style is selected, you can configure:
    • Horizontal and vertical shadow direction
    • Shadow blur strength
    • Shadow color
    • Text Alignment: Choose how your menu text is aligned within the module:
    • Left
    • Center
    • Right
    • Justify

Tips for Using Menu Text Options

  • Enhance Readability: Use a clear font and proper line height to ensure the metadata is easy to read.
  • Maintain Visual Balance: Adjust the font size and letter spacing to align with the rest of your blog module’s design.
  • Add Depth Subtly: Use light shadows to make the text stand out against complex backgrounds.
  • Stick to Branding: Match the font, color, and style with your site’s typography for a cohesive look.

 

More read:

https://help.elegantthemes.com/en/articles/10353582-the-divi-menu-module-divi-5