Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

In this Divi tutorial I am going to show you how to create large square main menu buttons in your Divi main menu.

I used this technique on the main menu for one of my recent projects.

For this demo I have not made any changes to the header customizer settings other than to disable the search icon and make the header text bold. This is ideal for menus that dont have a lot on menu items. If you have too many menu items, it might help if you can change the header settings in the customizer to fullwidth.

This is what we need to do in the CSS to make this happen:

  • Remove the drop down carrots and adjust the padding for items that have a drop down menu.
  • Adjust the top navigation and the top menu link padding and margins.
  • The CSS will adjust most of the link colors and the background colors.
  • Make adjustments in the sub-menu to give it a similar effect.
  • All the CSS will be applied only to devices over 981px wide. The media query is included in the CSS

 

The Magic of CSS

Now lets start to dazzle things up a bit with some CSS.

If you are working with a child theme you can go to Appearance>Editor and open your stylesheet. If not, go to Appearance>Divi Theme Options>ePanel>Custom CSS (which is located at the bottom of the ePanel)

 


/* ----------------------------------- */
/* Menu - Active Item Background Color */
/*           by Geno Quiroz            */
/* ----------------------------------- */

@media only screen and (min-width : 981px) {


/* remove carrot from menu with drop down */
	#top-menu .menu-item-has-children > a:first-child, #et-secondary-nav .menu-item-has-children > a:first-child {padding-right: 0px;}
	#top-menu .menu-item-has-children > a:first-child:after, #et-secondary-nav .menu-item-has-children > a:first-child:after {display:none;}


/* menu padding */
	#et-top-navigation {
		padding-top: 0px!important;
		font-weight:100;}
	#top-menu li {
    		margin-left: -3px;
		padding-right: 0px;}
	#top-menu li > a { 
		padding: 33px 30px 33px 30px!important;}


/* remove color fade in on menu text */
	#top-menu a {
		color: #000;}

/* current menu item colors */
	#top-menu li.current-menu-item {
		background-color: #0065cb;} /*change background color here*/
	#top-menu li.current-menu-item > a {
		color:#fff!important;}

/* menu item hover colors */
	#top-menu li:hover {
		background-color: #0065cb;} /*change background color here*/
	#top-menu li > a:hover {
		color: #fff;
		opacity: 1!important;}	


/* current menu ancestor background color */
	.current-menu-ancestor {
    		background-color: #0065cb;} /*change background color here*/
	.current-menu-ancestor a {
    		color: #fff!important;}


/* sub menu adjustments */	
	.sub-menu {
    		padding: 0px!important;}
	#top-menu li li a {
    		padding: 19px 5px 19px 8px!important;}
	.current-menu-ancestor .sub-menu a {
    		color: #000!important;}
	.current-menu-ancestor .sub-menu a:hover {
    		color: #fff!important;}

}
		

 

Notes

I have marked the 3 places where you will need to change the buttons background color to your own. Those items are marked: /*change background color here*/

If you change font colors in the customizer, they may override this CSS. For example if you change the font colors in the Fixed Header Customizer settings, they will override this and you will have to adjust accordingly. In some cases if you are using a child theme, you may have to add additional CSS into the Divi Theme Options CSS Panel to override the customizer settings.

On the other hand I do recommend playing with the Primary Header background colors in the customizer settings to give it some additional styling options. For example try changing the background color to Black and the Font to white and watch how it just POPS!!

Have fun!


Well that’s all for now. I hope you find this article useful.


The following two tabs change content below.
Geno is an entrepreneur who has been designing websites since 1996. He also enjoys all things design, traveling, hanging out with friends, encouraging other believers, and experimenting with new technologies. When not doing any of the above, you can find Geno blogging or writing Divi customization tutorials here on Quiroz.co.

©2012-2019 Geno Quiroz | Teach Learn Build Love | Divi Expert ServicesJohn 3:16

Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes.

STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!

Pin It on Pinterest