Center Mega Menu Tabs

Support Area Forums United Center Mega Menu Tabs

This topic contains 5 replies, has 2 voices, and was last updated by  Ashley Davis 3 years, 2 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
URL to the page in question: http://servingyourpurpose.com
  • Author
    Posts
  • #20761

    Ashley Davis
    Participant

    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

    #20767

    Bill Robbins
    Keymaster

    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

    #20792

    Ashley Davis
    Participant

    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

    #20858

    Ashley Davis
    Participant

    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

    #20861

    Bill Robbins
    Keymaster

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

    
    .widget {
    	text-align: left;
    }
    

    See how that goes.

    #20878

    Ashley Davis
    Participant

    It worked. Thanks Bill!

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Center Mega Menu Tabs’ is closed to new replies.