Moving logo into main navigation (magazine pro theme)

[Saqib Ali]

As the title suggests I'd like to move the logo into .nav-primary http://britishhomeopathic.co.uk/

I'd also like to move the search bar into the .nav-primary area.

And now there's a blank space I'd like to get rid of this also if possible.

How would I go about doing this?

I'm assuming php right?

http://britishhomeopathic.co.uk

[ᴅᴀᴠɪᴅ]

Yes php.

But what you'd be better doing is moving the primary nav into the header, in between the header and the search. Then making the whole header sticky.

There is documentation on how to move the primary nav;
http://my.studiopress.com/snippets/navigation-menus/#reposition-primary but you'd need to use the hook genesis_header instead of genesis_before_header as they use in the example.

Then make the whole header sticky, there are numerous tutorials about that show how to do this. here's one https://ozzyrodriguez.com/tutorials/fixed-header-wordpress/

---

I love helping creative entrepreneurs build epic things with WP & Genesis.

Follow on Twitter

[Brad Dalton]

Use this code to add something to any nav menu

---

Tutorials for StudioPress Themes.

[Saqib Ali]

Thanks guys I was able to get it working with the snippets.

I'm still trying to add the logo to the top left but for some reason, it's not working, I must be not using the hook correctly.

[Saqib Ali]

And also the slider now is getting eaten up by the nav-primary.

[Saqib Ali]

Was I supposed to do this?

//* Reposition the primary navigation menu
remove_action( 'genesis_after_header', 'genesis_do_nav' );
add_action( 'genesis_header', 'genesis_do_nav' );

[Brad Dalton]

To add your logo to the nav menu, please use the code i linked to above.

---

Tutorials for StudioPress Themes.

[Saqib Ali]

Thanks, appreciate you highlighting the same link @braddalton.

I tried the first approach but I was going around in circles.

I've copied and pasted the code from the link into my functions.php file but I only see options for being to add:

- Changing primary to secondary / vice versa
- Search
- Time and Date

How would I go about adding the logo into the top left or as the first item?

add_filter( 'wp_nav_menu_items', 'theme_menu_extras', 10, 2 );
/**
 * Filter menu items, appending either a search form or today's date.
 *
 * @param string   $menu HTML string of list items.
 * @param stdClass $args Menu arguments.
 *
 * @return string Amended HTML string of list items.
 */
function theme_menu_extras( $menu, $args ) {
	//* Change 'primary' to 'secondary' to add extras to the secondary navigation menu
	if ( 'primary' !== $args->theme_location )
		return $menu;
	//* Uncomment this block to add a search form to the navigation menu
	/*
	ob_start();
	get_search_form();
	$search = ob_get_clean();
	$menu  .= '<li class="right search">' . $search . '</li>';
	*/
	//* Uncomment this block to add the date to the navigation menu
	/*
	$menu .= '<li class="right date">' . date_i18n( get_option( 'date_format' ) ) . '</li>';
	*/
	return $menu;
}

[Brad Dalton]

Create a variable equal to your image

$image = 'http://example.com/image';

Then swap out the code for the date with the variable for your $image.

---

Tutorials for StudioPress Themes.

[Saqib Ali]

Cheers @braddalton really appreciate the help and good job with the video.

[Brad Dalton]

You could also use esc_url( $url ) to sanitize your URL like this:

$image = esc_url('http://example.com');

Or

Pull the image from your child theme's images folder using get_stylesheet_directory_uri()

$image = sprintf( '%s/images/logo.jpg', get_stylesheet_directory_uri()  );

---

Tutorials for StudioPress Themes.

[Author]

Posts