Aligning Logo & Navigation

[gadietrich]

I’ve got a particularly difficult client…she’s already had me stripe your beautiful theme of many of its characteristics, and just when I thought there was nothing more, well there is.

How can I make the navigation appear on the same line as the logo of the site? She wants the logo on the left, then the navigation to follow right after it.

Here is where we are at right now: http://dev.graceatworkllc.com/juday

Thanks for the help..hopefully this isn’t too complicated.

Topic

[gadietrich]

How can I move the social media icons to the footer instead of being at the top of the page?

[Jason Bobich]

Hello,

Are you familiar with action hooks in WordPress?

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

These things are hooked to actions in the theme to allow you to move things around. You’ll be able to style things into place better from your CSS if you shift around where the elements are located.

Currently the social icons are in the “themeblvd_header_addon” location with the function “alyeska_header_addon” — Remove it and hook it where you want in the footer.

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

For example:

remove_action( 'themeblvd_header_addon', 'alyeska_header_addon' );
add_action( 'themeblvd_footer_sub_content', 'alyeska_header_addon' );

And the same thing for the menu. The menu is currently hooked to “themeblvd_header_menu” with function “alyeska_header_menu” — So you’d remove alyeska_header_addon from there and hook it themeblvd_header_addon (where the social icons were).

remove_action( 'themeblvd_header_menu', 'alyeska_header_menu' );
add_action( 'themeblvd_header_addon', 'alyeska_header_menu' );

Then, from there, you’ve got your HTML markup arranged into the right places, and so mainly what’s left is just CSS styling to get things positioned how you want.

[gadietrich]

Thanks for the help and information. I’m unfamiliar with action hooks, however, I’ve spent some time reading and studying this, trying to get my head around what this is and does. I figured I could take your example and start working with it. That being said, I took your first example and pasted it into my functions.php file, in my child theme. It didn’t do anything though…any further help or examples you could give would be appreciated.

UPDATE: I had copied your sample code from my email, which didn’t copy all that nicely. When I copied it from the support forum it worked just great. So I have the social media piece in place, now onto the menu! Thanks!

[gadietrich]

OK, one more update: I added the second piece of code you mentioned to my functions.php file. That file now looks like:

<?php
/*-------------------------------------------------------*/
/* Run Theme Blvd framework (required)
/*-------------------------------------------------------*/

require_once( get_template_directory() . '/framework/themeblvd.php' );

/*-------------------------------------------------------*/
/* Start Child Theme
/*-------------------------------------------------------*/

// Your actions and filters go here ...
// See http://dev.themeblvd.com

// Move social icons from the header to the footer

remove_action( 'themeblvd_header_addon', 'alyeska_header_addon' );
add_action( 'themeblvd_footer_content', 'alyeska_header_addon' );

// Move navigation up next to the logo

remove_action( 'themeblvd_header_menu', 'alyeska_header_menu' );
add_action( 'themeblvd_header_addon', 'alyeska_header_menu' );

The social icons are good…those were easier than I expected, however, the menu isn’t cooperating at this point. Can you take a look and let me know what you think?

[gadietrich]

And one last update…I’m good to go, got it all figured out. Thanks again for directing me in the right place.

[Jason Bobich]

Glad you figured it out!

[Author]

Replies