Center Mega Menu Tabs

[Ashley Davis]

Hi Bill,

Just deleted the call to action in the menu and would like to center the menu.
How do we do that?

Also, is there a way to move the Menu button on the mobile site to the Right side?

Thanks Bill!
Ashley

[Bill Robbins]

Hello Ashley,

I believe you can do those. Here’s how:

1. Go to the Theme Options page and select the Styling tab.
2. Scroll down to the Custom CSS box and paste this:

   
   .cbp-hrmenu  ul {
   	float: none;
   	text-align: center;
   }
   
   .widget ul {
   	text-align: left;
   }
   
   @media only screen and (max-width: 767px) {
   	
   	#mobile-menu {
   		display: block;
   		float: none;
   		text-align: right;
   	}
   
   }
   

3. Update your settings.

The first two styles will set the menu items to align to the center. Since the first one will align all unordered lists to the center, we have to also specify that widgets should be aligned to the left otherwise they would also be in the middle.

The bottom style inside the media query will hopefully right align your mobile navigation button.

Enjoy your weekend,
Bill

[Ashley Davis]

Works great! Thanks Bill.

Client just decided to add a “Home” link in the top menu.
Is there a way to add just the word Home without an empty mega menu drop down showing, and have just the word link back to the home page?

You can see how I currently have it set up with the unwanted purple drop down and no actual link back to the home page. http://www.servingyourpurpose.com

Thanks,
Ashley

[Ashley Davis]

Hey Bill,

Just noticed that for some reason the mega menu widgets are still center aligning the text, but the other widgets on the home page kept to left aligned.

How do we get them all back to left alignment?

Thanks!
Ashley

[Bill Robbins]

You could explicitly state for them to be left aligned this way:

.widget {
	text-align: left;
}

See how that goes.

[Ashley Davis]

It worked. Thanks Bill!

[Author]

Posts