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 blogs: MontereyBayFun.com. I also used a similar technique on MontereyPremier.com and on this site as well.

You can view the demo here.

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.


DISCLOSURE: I may be an affiliate for some of the products that I recommend. If you purchase those items through my links I will earn a commission which helps cover the cost of the free resources we provide. If you ever have any questions about my affiliations, please do not hesitate to ask..

Pin It on Pinterest

STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!