[Resolved] Have the logo show in the sticky menu

Home Forums Support Have the logo show in the sticky menu

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #97760
    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

    #97858
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #97984
    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.

    #98130
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #119385
    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.

    #119393
    Tom
    Lead Developer
    Lead Developer

    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!

    #119428
    Sebastien

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

    Thx for looking at this!

    #119500
    Tom
    Lead Developer
    Lead Developer

    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.

    #119682
    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.

    #119770
    Tom
    Lead Developer
    Lead Developer

    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';
    }
    #120411
    Sebastien

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

    Can’t wait to see the next version 🙂

    #120427
    Tom
    Lead Developer
    Lead Developer

    Awesome, glad I could help! 🙂

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.