Center menu location in Swifty

Hi Kate-

Swifty is designed with the menu and logo in the same row by default, but it is possible to accomplish what you’re looking for.

First off, I’m not entirely certain how your menu got to be vertically stacked like that. I think that might have been added by your web designer, using the QuickStarter Menu plugin. Try disabling that plugin to see if you get the normal horizontal menu appearance.

Then, the next step is to modify the logo and menu columns so that they’re both the full width of the page. Navigate to Customize > Advanced > Custom JS & CSS. Here you’ll find two fields, your Custom Theme JS, and your Custom Theme CSS.

Paste this code into your Custom Theme JS:

jQuery('div.col-md-6.header-6').removeClass('col-md-6').addClass('col-md-12');
jQuery('div.col-md-6.header-7').removeClass('col-md-6').addClass('col-md-12');

Then, to center both your logo and your menu, paste this code into your Custom Theme CSS:

.site-title { text-align: center; }
.navbar-default { float: unset; }
.navbar-header { text-align: center; }
.navbar-toggle { float: unset; }

If you’re interested in a theme that lets you completely customize your header without using any code, I recommend checking out the Crio WordPress Theme for Business.

• This reply was modified 3 years, 9 months ago by Jesse Owens.

Hi Kate-

I’m glad to hear that disabling that plugin got you a step closer to your goal! I’ll try to tackle each of your questions.

I pasted the code to modify the logo and menu columns […] it didn’t do anything other than change the location of the primary menu

You’re right, this code was designed to center the Primary Menu, so I made a bad assumption about your goal from the beginning. If you’re happy with the way the secondary menu is centered now without that plugin, you can disregard the code I provided above.

Otherwise, can you describe what you’d like to accomplish with those menus, so I can help further?

I am still a bit disappointed with this theme’s ability to customise the primary header

I can definitely understand. Bringing more customizability for your site’s header is one reason we developed our newest theme, the Crio SuperTheme. It includes features to let you fully customize your header appearance, and even make custom headers for different pages. If you’d like to give it a spin in a testing environment, here’s a link you can use to try it on our Cloud WordPress platform.

I can’t seem to edit the custom link to be in a box so it’s more obvious

Check out this video where I’ll walk you through the process:

Specifically, if you wanted to make your Contact Us menu item into a button, you could use the following CSS Code:

#menu-item-750, #menu-item-750 a {
    background: #608eca;
    border-radius: 10px;
    color: white !important;
}

I designed that code to match your More buttons near the bottom of your home page.

[…]large white empty space there between the logo and header and above the main navigation… any suggestions? Move the main navigation up next to the logo maybe instead of being under it?

You could move your current menu into the Primary Menu location if you combine it with your current Contact Us menu item.

You can also trim down a little on the whitespace with these two CSS Rules:

.site-description { margin: 0; max-height: 0; }
#header-widget-area { margin: 0; }