Aligning the DIVI Secondary menu to left or center is easy with a few lines of CSS. When you create a new menu in DIVI you can assign the default location for the menu to be the Primary, Secondary or Footer menu. Today’s tip is for aligning the Secondary menu.

Make sure you have a existing secondary menu ( which appears on top of the Primary menu ). In the image below I have created a new menu called “Secondary Menu” and have set the display location on the bottom to be the Secondary Menu.

Secondary Menu location in DIVI

Secondary Menu display location in DIVI

 

The image below shows the Secondary and Primary menu. As you can see, by default the secondary menu is aligned to the right.

Location of Primary and Secondary menu in DIVI

Location of Primary and Secondary menu in DIVI

 

We will now add the CSS for alignment of the secondary menu. Head over to your style.css in your child theme and paste the following CSS.  Alternatively you can also go to DIVI -> Theme Options and paste the css in the Custom CSS box.

Secondary Menu Aligned to the Left

Add the following css to align the secondary menu to the left.

/* Secondary menu to the left */
#et-secondary-menu {
float: none;
}

Secondary Menu to the left in DIVI

Secondary Menu to the left in DIVI

 

Secondary Menu Aligned to the Center

Add the following CSS to align the secondary menu to the center.

/* Secondary menu to the center */
#et-secondary-menu {
float: none;
text-align: center;
}

 

Secondary Menu to the center in DIVI

Secondary Menu to the center in DIVI

 

I hope this tip helps you to quickly align your secondary menu in DIVI using CSS. You can browse through my other useful tips for DIVI and WordPress on my DIVI Blog.

 

4 Comments

  1. Carter

    Hey this isn’t working for me. It’s having trouble with this line:

    #et-secondary-menu {

    Has there been an update? Thanks!

    Reply
    • Girish Dadlani

      Hi Carter,
      I have tested this and it works in all scenarios. Are you adding the CSS to the DIVI Theme Options. This will only work if you have the secondary menu enabled in WordPress. Let me know if you are stuck and I can have a look at your website.
      Girish

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

I would love to hear about how I can help you with your business website. I have a Masters in Computer Science from Pace University, New York. Having worked in the software industry for many years, I am now freelancing and have specialized in using the DIVI theme from Elegant Themes, since the past eight years. Do have a look at my portfolio to view my other completed projects. Feel free to contact me and I will get back to you immediately.