Add image in navbar

[MyNL]

Hi.
I want to add an image (a logo or something else, it doesn't really matter) on the left side of the navbar.
Isn't there a way to do it other than using the header image and putting the navbar on the right side of the header (via the header-right widget)?

[AnitaC]

What theme are you using? You are referring to two totally separate areas - Header and Nav. So we'd need to see the theme in order to assist you.

---

Need help with customization or troubleshooting? Reach out to me.

[MyNL]

Oh i'm sorry, i forgot that. I'm using Magazine Pro.

I know they are totally areas, i'll try to explain myself. I'm trying to put an image in the navbar but if there's no way i can try to do something like in this site https://geekflare.com/ . That's not a navbar with an image on the left, simply it's the header image with the menu in the header right section.

[AnitaC]

Geekflare's image and nav is in the Header. The theme is Authority Pro also by StudioPress. The top nav bar in Magazine is the Primary Navigation. The Header is where you see the theme name and the Nav is in the Header Right Widget area.

You'd need to totally re-work Magazine to function like that. If you have the Pro Pack of StudioPress themes, you can use the code from Authority to re-work it.

---

Need help with customization or troubleshooting? Reach out to me.

[MyNL]

Why? I can insert a menu in the Header Right Widget area too.
The thing is, why isn't there a tool to ad an image on the left side of a primary/secondary navbar? I mean, i think i can do something like Geekflare by putting the menu in the Header Right Widget area and doing some of work but it's weird to do that, at least for me.

Almost every blog or site out there nowadays have a small image on the left side of the nav like this:
<nav><div id="logo">/* image */</div><div id="menu-items">/* list of item*/</div></nav>
(I gave a basic example of course)

[AnitaC]

You can certainly do it however you want. I am not sure where you got the code from. You are providing the HTML output of what may be a code in the functions drawing off the "logo" configuration. I can't tell because you didn't give the URL to the website where you got that code.

If you want to leave your site exactly the way it is and use header right, you can use this tutorial Susan did for adding a widget area to the Primary Nav. Just change out out the code to header right. Then add your image to that widget. You'll need to tweak the CSS for whatever image you want to add there.

---

Need help with customization or troubleshooting? Reach out to me.

[Victor Font]

You can put anything you want in a Genesis menu, either in the left or right. You would have to modify this code snippet to work for you:

Add Navigation Extras

Using you code as an example, inserting this into functions.php should get you close to what you want:

add_filter( 'wp_nav_menu_items', 'my_menu_img', 10, 2 );
function my_menu_img( $menu, $args ) {
	//* Change 'primary' to 'secondary' to add extras to the secondary navigation menu
	if ( 'primary' !== $args->theme_location )
		return $menu;

	$menu =. '<div id="logo">/* image */</div>;
	
	return $menu;
}

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[MyNL]

These are helpful advice but they only work on large screens. On mobile, the navbar is hidden and there's a toggle button instead of it (so if i put an img in the navbar like viktor suggest, on small devices it is hidden or bad supported)
Anita suggestion is nearly the same and it will have the same problem.

I think that the only real solution is to use the site image on both large and small devices. In large devices, with navbar in the header right (without looking the code it should seems like a navbar with an img on the left). In small devices, with some css, i can make them stand on the same line.

if I have not explained myself, i will attach some example images

[Author]

Posts