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.
The image below shows the Secondary and Primary menu. As you can see, by default the secondary menu is aligned to the right.
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 */
Secondary Menu Aligned to the Center
Add the following CSS to align the secondary menu to the center.
/* Secondary menu to the center */
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.
Submit a Comment
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.
Works great thank you!