Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #33574
    Kate Carter
    Guest

    Hi there, I’m using Swifty theme and I’m trying to change the location of the navigation menu. Currentl there are only a couple of options, none of which just put the menu horizontally under the header/logo as is the most common place for navigation menus. How do I set up a menu to be located horizontally, running along under the company logo and contact us custom link?

    #33643
    Jesse Owens
    Keymaster

    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.

    #33887
    Kate Carter
    Guest

    Thank you so much Jesse!! I disabled the quickstarter menu plugin and it fixed the problem immediately!
    My only other query is that when I pasted the code to modify the logo and menu columns to be full width, it didn’t do anything other than change the location of the primary menu which I have set to be a ‘contact us’ link. It moved it to just above the main navigation instead of being up the top as a header, so I removed the code. I am still a bit disappointed with this theme’s ability to customise the primary header however, I can’t seem to edit the custom link to be in a box so it’s more obvious….as can be done in the pages. In the pages, I can just clone the existing link boxes and move them but I can’t do that in the header menu. Can you help with this?? I would also appreciate any suggestions for making the top section of the home page look a little better and more professional…it is very basic looking especially with such a 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?
    Thanks, Kate.

    #33925
    Jesse Owens
    Keymaster

    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; }
    
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Center menu location in Swifty’ is closed to new replies.