How to create a menu bar with logo

Our next add-on will handle this, but for now you can do this:

1. Insert your logo into the nav:

add_action('generate_inside_navigation','generate_navigation_logo');
function generate_navigation_logo()
{
?>
	<div class="site-logo">
		<img src="THE URL TO YOUR IMAGE" alt="" />
	</div>
<?php
}

Add CSS to style it:

.main-navigation .site-logo {
    float: left;
    line-height: 60px; /* Adjust this to your menu item height */
    margin-right: 1.5em;
}

2. Add a mobile logo to the mobile menu bar:

add_action( 'generate_inside_mobile_menu', 'generate_add_mobile_menu_logo' );
function generate_add_mobile_menu_logo()
{
	<div class="site-logo">
		<img src="THE URL TO YOUR MOBILE IMAGE" alt="" />
	</div>
}

Give that a try and let me know how it works out - might need some tweaking :)

Where do I insert the code to insert my logo into the nav bar?

Thank you.

Adding CSS: http://generatepress.com/knowledgebase/adding-css/
Adding PHP: http://generatepress.com/knowledgebase/adding-php-functions/

Hi, I would like to have the logo in the nav. Could you tell us where abouts in navigation.php the code needs to be added please.

Thanks in advance

Hi Rob,

This option is coming in our new add-on, but for now, this may help:

Insert your logo into the nav:

add_action('generate_inside_navigation','generate_navigation_logo');
function generate_navigation_logo()
{
?>
	<div class="site-logo">
		<img src="THE URL TO YOUR IMAGE" alt="" />
	</div>
<?php
}

Adding PHP: http://generatepress.com/knowledgebase/adding-php-functions/

Then style it:

.main-navigation .site-logo {
    float: left;
    line-height: 60px; /* Adjust this to your menu item height */
    margin-right: 1.5em;
}

Adding CSS: http://generatepress.com/knowledgebase/adding-css/

hi there,

was it implemented now so i dont have to use the code anymore??

Thanks in advance and keep up the great work, i love generatepress !!

atti

Hi Alexander,

Yes this has already been implemented. Check out this page: https://docs.generatepress.com/article/navigation-logo/

Make sure your GP theme (1.3.44) and Premium (1.2.94) are up to date!

I added php and css both but this is not working...please help me

Hi there,

this is a really old topic - you can simply enable the Navigation as Header option in Customizer > Layout > Header.

https://docs.generatepress.com/article/navigation-as-a-header/

If you have a different requirement, can you start a new topic where you can share a link to your site and we can advise.