css for menu logo

Hi there,

The navigation as a header option in our premium plugin makes it very easy:
https://docs.generatepress.com/article/navigation-as-a-header/

If not you’d need to add it using the generate_inside_navigation hook:
https://docs.generatepress.com/article/generate_inside_navigation/

How to use a hook:
https://docs.generatepress.com/article/using-hooks/

Hi Leo!

So, I still want to keep the “header” bar as well as the navigation menu. At current, I have the navigation menu at the top, and the header (with site name and tagline) below that.

Let me see if I’ve got the code correct, based on your links…

So would this be added to functions.php:

add_action(‘generate_inside_navigation’,’generate_navigation_logo’);
function generate_navigation_logo()
{
?>
<div class=”site-logo”>

</div>
<?php
}

And then like this for additional css?

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

Let me know if you think this will work. Thanks a million!

I would replace site-logo with navigation-logo.

Looks good to me!

Hi Leo,

I agree, navigation-logo is a better identifier.

This works great. Thanks so much for you help!

Ah, one other thing…

This seems to show a bit strange in mobile view, above the menubar. Anything I can add to make it appear smaller and off to the left in mobile view?

Or, alternately, is there a way to have the logo not load on mobile pages when the “hamburger” style menus is used?

You can add the hide-on-mobile class:
https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

Nice! I’m trying to decide where to put these statements for proper effect….

Would that go around the current PHP snippet, like:

add_action(‘generate_inside_navigation’,’generate_navigation_logo’);
function generate_navigation_logo()
{
?>
<div class=”hide-on-mobile hide-on-tablet”>
<div class=”site-logo”>

</div>
</div>
<?php
}

You can just add it in the same div with the site-logo

Yes, this worked. Thank you for the assistance, Leo!

No problem ??