[Resolved] Add logo to sticky menu

[CRISTO]

Looks like this has been addressed before, but not sure I understand. I thought it would be nice to include my site logo in the nav bar….the nav bar is sticky so then the logo would be as well

I went in to layout> primary nav> navigation logo and put in my logo ( a.png file 192×192) but it comes out tiny. Tried making it larger, but still is tiny. Not sure if I am doing this right.

GeneratePress 2.2.2

GP Premium 1.7.8

[David]

Hi there,

the size of Navigation logo is defined by the Customizer > Layout > Sticky Navigation > Menu Item Height

Increasing the height of the menu item and the logo will increase with it.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[CRISTO]

Thanks, but the problem with that is then all the menu items are large, and I don’t want that. Just the logo to be larger.

I would prefer to make both header and menu sticky, but that cannot be done from what I understand.

[David]

If you want tom add your sticky logo ill provide some CSS to make it larger.
The navigation bar will increase in size though, but we can keep the menu items shorter.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[CRISTO]

Isn’t that the same as changing the menu height? But please give me some css and I will give it a try.

[David]

Give this CSS a go:

.sticky-enabled .main-navigation.is_stuck .inside-navigation {
    display: flex;
    justify-content: center;
    align-items: center;
}
.main-navigation.sticky-navigation-transition .navigation-logo img {
    width: 100px;
    height: auto !important;
}
.sticky-enabled .main-navigation.is_stuck .main-nav {
    margin-left: auto;
    margin-right: auto;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[CRISTO]

Thanks, David. Sorry to be difficult….that is close but logo does not show up well. Would like either the regular page header and menu to show or perhaps just the title “The Catholic Travel Guide” in the sticky menu. Is that possible?

Or, should I just make the log bigger?

An example would be https://www.tripadvisor.com/Home-g187171?fid=d67eb527-9ddb-427b-8c5c-1f0ed0a5d926

Hope this makes some sense!

[David]

That option will be coming to the next update, in the meantime you would need to do this:

1. Dashboard > Appearance > GeneratePress – and activate the Elements Module.
2. Dashboard > Appearance > Elements –> New > Hook
2.1. Add this code:

<div class="site-branding">
    <p class="main-title" itemprop="headline">
        <a href="<?php echo site_url(); ?>" rel="home">
            <?php bloginfo( 'name' ); ?>
        </a>
    </p>
</div>

2.2 In the Hook drop down – select inside_navigation
2.3 Check the Execute PHP box.
2.4 On the Display Rules tab – set the location to the entire site.

Once you have done that add this CSS:

.main-navigation .site-branding {
	float: left;
}

.main-navigation .site-branding a {
	line-height: 60px;
	font-size: 20px;
}
.main-navigation:not(.is_stuck) .site-branding {
    display: none;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[CRISTO]

Ok, thanks. will give that a try.

[CRISTO]

when I get to execute php I get this message: Unable to execute PHP as DISALLOW_FILE_EDIT is defined

[David]

Hmmm…. in that case try using the Code Snippets plugin and the code provided here:

https://docs.generatepress.com/article/add-site-title-to-navigation/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[CRISTO]

Getting close…although the site title does not show which I believe was the purpose of the css, but maybe I am wrong. Or, if there is a way to make the logo larger without making the height of the nav bar much larger that would be ok as well. Just need some way to show the user what site they are on.

Actually…if I am not asking the impossible…would like the logo on the left and title to the right of it.

[CRISTO]

Looks like it will be up to me to get a sharper image for the logo, so don’t worry about that for now. Just would like to know if we can stick the title in there somewhere. You said that option would be included in the next update, is that correct? Any idea when that might be?

Thanks,
Gloria

[David]

Did you try adding the title using Code Snippets plugin? here:
https://generatepress.com/forums/topic/add-logo-to-sticky-menu/#post-826755

GPP 1.8 – we’re hoping for a Beta release in the next couple of weeks. Generally its 2 – 4 weeks of beta testing before we go live, but this is a pretty significant update so may take a little longer.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[CRISTO]

I did. Thanks

[Author]

Posts