This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Menu next to header – Possible?

  • Creator
    Topic
  • #6922
    kimchan
    Member

    We have had a request to move the menu next to the header in a Swagger theme we are using. Is this possible and if so can you tell us how to do it?

    Thanks in advance.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Author
    Replies
  • #6933
    Jason Bobich
    Keymaster

    Hello,

    This will be a customization you’ll need to make to the theme. There are several ways you could possibly accomplish it, but there’s not going to be any simple 1-steppers I can give you. You need to hook the menu where you want and then style it to work in that location.

    http://dev.themeblvd.com/tutorial/actions/

    http://dev.themeblvd.com/tutorial/primary-framework-action-hooks/

    If you’re uncomfortable creating your own function that contains wp_nav_menu to output your menu location, you could just use the theme’s default function and move it.

    You can look at the action map, but I’d imagine the logical place to put it would be the “themeblvd_header_addon” hook.

    // Remove default menu from "themeblvd_header_menu" action
    remove_action( 'themeblvd_header_menu', 'themeblvd_header_menu_default' );
    
    // Add default menu function to "themeblvd_header_addon" action
    add_action( 'themeblvd_header_addon', 'themeblvd_header_menu_default' );

    But that’s just going to get the HTML markup in the right place. From there, you’re still going to have to style everything to be positioned where you want with CSS.

    For CSS changes, it’s a good idea to use a tool like firebug or Google Chrome’s built-in developer tools to locate them and then put the edits either in your child theme or in the “Custom CSS” option on your theme options page.

    Also, here’s a helpful tutorial on how to use Firebug – http://vimeo.com/20917974. The only thing I’d suggest not doing is actually making edits to the theme’s CSS files, as it shows at the end of that video. However, the video serves as a good introduction to Firebug and how it can be used to find what CSS is effecting certain areas of your site without ever digging around in any files.

    #8073
    kimchan
    Member

    Hi there Jason!

    Thanks for all the help — the above worked like a charm in the child theme functions.php.

    One question: With this change, when the screen size is tablet sized the navigation goes over the logo on the left — is there any way to fix this just for this resolution? The small and the full screen look fine.

    #8074
    kimchan
    Member

    Hi Jason…just thinking…

    it would even be okay if it went to the simple select menu that currently shows on the mobile — doable?

    #8075
    Jason Bobich
    Keymaster

    This would all just be done within your Custom CSS. You can target your different elements via @media viewport sizes like this:

    /* Tablets */
    @media (max-width: 800px) {	
    	.whatever {
    		...	
    	}
    	.whatever-else {
    		...
    	}
    }
    
    /* Mobile */
    @media (max-width: 480px) {	
    	.whatever {
    		...	
    	}
    	.whatever-else {
    		...
    	}
    }

    You can utilize display: none; to hide something and display: block; to show it.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The forum ‘Swagger Responsive WordPress Theme’ is closed to new topics and replies.