[Resolved] Have the logo show in the sticky menu

[Rene Marves]

I’m still new to wordpress and am setting up a new site. I’m using the Mantle child theme to get the sticky menu effect and bought the premium addon package to customize the site. So far, all is great.

Now, I’m trying to get the logo I have in the header to show in the menu when the page is scrolled down and the menu moves up and starts being sticky and translucent (from the mantle theme) but I just can’t figure out a way to make that happen.

As a reference, the site I’m setting up is http://www.pmi.gt

Any help is appreciated

[Tom]

Hi there,

Sorry for not getting back to you sooner!

This is a bit of a tough one.. First, you’ll want to add your header into the navigation:

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
}

Then, hide it by default:

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

Then we’ll show it when the sticky navigation takes effect:

.stickynav .main-navigation .site-logo {
    display: block;
}

That should do it 🙂

[Rene Marves]

Tom,

Thank you!! That was just perfect! 🙂 It would have taken me forever to figure that out. I implemented the code and it looks great. I think I still need to tweek the image size a little, but it’s already looking good.

I also just noticed that the menu changes to be 2 lines before it gets compressed to the mobile view. How can I adjust this threshold?

Thanks again.

[Tom]

Unfortunately the threshold can’t be adjusted without editing core files.

What you can do is create more breakpoints to reduce font size etc.. of your menu.

For example:

@media (max-width:1000px) {
      .main-navigation li a {
            font-size: 13px;
      }
}

You may need to play around a bit to get it just the way you want it 🙂

[Sebastien]

Thank you for this great tip.

Everything works just fine except the last tip about the breakpoint that I would like to update as well. The code “media” provided seems to have no effect. Is there a specific place? I tried in the css of my child theme created as described in http://generatepress.com/forums/topic/keep-menus-visable-with-scroll/#post-119228.

[Tom]

Placing it in your child theme CSS should work.

The CSS will only work once the screen size reaches 1000px or below.

If it’s not working, could you possibly link me to your site?

Thanks!

[Sebastien]

OK. Here is the link: http://rf-efh.org/

Thx for looking at this!

[Tom]

It looks like it’s working to me.

You added this code:

@media screen and (max-width: 805px) {
    .main-navigation li a {
        font-size: 13px;
    }
}

Then you resize down to 805px and below, you’ll see the navigation text reduce to 13px.

[Sebastien]

OK, so indeed it’s breaking at 805px and now I understand the “only” thing it’s doing is to reduce the font size to 13. In fact I was looking at the breakpoint to switch between the full menu to the reduced menu (menu icon + text “menu”). Is it another piece of code?

By the way, is there a way to tweak this “reduced menu” (alignment, choose a different label than “menu”). I found how to do this for the secondary nav, but not the first.

Thank you again for your help.

[Tom]

Ah – try this: https://gist.github.com/generatepress/c23aef2d05807c39bb32

Adjust the 1000px to your desired breakpoint.

To change the menu label, you can use a filter (until our new add-on is released, which has a Customizer option for it):

add_filter ( 'generate_mobile_menu_label','generate_custom_mobile_menu_label' );
function generate_custom_mobile_menu_label()
{
      return 'Whatever';
}

[Sebastien]

Thank you Tom. It works perfectly as requested. You are a boss.

Can’t wait to see the next version 🙂

[Tom]

Awesome, glad I could help! 🙂

[Author]

Posts