[Resolved] How to create a menu bar with logo

[Roberto Enrique]

Hi, I would like to know if there’s a way to have a menu bar that behaves like this:

On big screen:

On small screens:

Thanks in advance

[Tom]

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 🙂

[jazmin Harb]

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

Thank you.

[Tom]

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

[Rob]

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

[Tom]

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/

[Alexander]

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

[Leo]

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!

[Vikram]

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

[David]

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.

[Author]

Posts