[Resolved] Sticky and Split Navigation, Not using a logo, Site Title disappears on scroll

Home Forums Support Sticky and Split Navigation, Not using a logo, Site Title disappears on scroll

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #911534
    Shery

    Hi. I’ve looked through the forum here but I do not find this exact problem. I followed this, but I’m not using a logo: https://docs.generatepress.com/article/centering-logo-navigation/

    How can I make the Site Title appear on scroll? I also followed this, but it didn’t work for me: https://generatepress.com/forums/topic/site-title-disappears-on-sticky-header-navigation/

    Thank you!

    #912278
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    The first step would be to use your navigation as your header: https://docs.generatepress.com/article/navigation-as-a-header/

    That will allow you to have the site title inside the navigation element.

    Then we’ll likely need to adjust your CSS to re-center the title. Let me know when it’s ready and I’ll supply the CSS 🙂

    #912364
    Shery

    Thank you for responding.

    I’ve made the switch to ‘navigation as a header’. But the site-title is now on the left.

    I’m also using a mobile menu starting at screen width 899px. Is it possible to display the site-title at the top and push the nav menu down?

    Thank you again for your help.

    #912603
    Tom
    Lead Developer
    Lead Developer

    Try this CSS:

    .navigation-branding {
        position: absolute;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        z-index: 200;
    }
    
    #primary-menu {
        width: 100%;
    }
    
    @media (max-width: 899px) {
        .main-navigation:not(.slideout-navigation) .inside-navigation {
            flex-direction: column;
        }
    
        .navigation-branding {
            position: relative;
        }
    }

    Let me know 🙂

    #912707
    Shery

    The first part works great! Thank you SO much!

    The second part, I’m really sorry, I didn’t explain it very well.
    I’m using the Off Canvas Panel with the overlay style on mobile only. Here is an example of what I would like to do. I hope it makes sense. Is this easy to achieve? Example

    #913108
    Shery

    Actually… the X or slideout exit, is on the left side of the screen for screens 768px and smaller. But it’s on the right side of the screen from 769px and up. I’d like to be in the same place for all sizes (it’s activated at 899px) and also have the menu icon and the X be together.

    #913458
    Tom
    Lead Developer
    Lead Developer

    Ah, we’ll need to hook the logo into the off canvas panel:

    add_action( 'generate_inside_slideout_navigation', function() {
        ?>
            <div class="site-branding off-canvas-branding">
                <p class="main-title">Your Title Here</p>
            </div>
        <?php
    } );

    Then we’ll need some CSS to position it. Let me know once it’s there and I’ll help with the CSS.

    Are you wanting the X on the left side all the time?

    #913587
    Shery

    Hi. This code looks like it’s accommodating a logo, not the site title. Should I still use it in a hook element? If so, do I choose “inside_slideout_navigation” or a custom hook? Thank you!

    #913672
    Tom
    Lead Developer
    Lead Developer

    Sorry about that! I just adjusted the function.

    You can totally use a Hook Element with the inside_slideout_navigation hook. In that case, your content would be:

    <div class="site-branding off-canvas-branding">
        <p class="main-title">Your Title Here</p>
    </div>
    #913893
    Shery

    That worked, I’ve got the site title at the top of the overlay page! Thank you very much for that.
    You mentioned CSS to position the menu icon and the X…. I tried it on my own and could not get it right. I could use your help here to position on the left (first choice) or the right (2nd choice). Thank you again for your help.

    Also a new problem has surfaced (I’m so sorry to bother you) and that is that the menu-item-separator is appearing in the mobile menu. I tried the advice in this post, but it didn’t work for me: https://generatepress.com/forums/topic/remove-custom-separator-space-from-mobile-nav/ .

    What can I do to remove this?

    #914449
    Shery

    Hi. I solved the menu-item-separator problem by just creating a different menu (without the ‘menu item separator’ and assigning it to the Off Canvas Menu. So don’t worry about this part.

    I’m still interested in knowing how to position the hamburger icon and X, to occupy the same space (or pretty close) and move the menu down a little. I don’t know why I’m not having luck with this. There are two sizes to work with the 899px screen size and 768px screen size. They both look different.

    Thank you.

    #914494
    Tom
    Lead Developer
    Lead Developer

    Try this:

    @media (max-width: 768px) {
        .slideout-navigation.do-overlay .slideout-exit {
            position: fixed !important;
            top: 5px;
            left: 0;
        }   
    }
    
    .site-branding.off-canvas-branding {
        margin: -17px 0 50px 17px;
    }
    #919729
    Shery

    Thank you Tom. I think I’ve got this working the way I want. Marking topic as resolved. Thank you again for all your help and for having this forum available!

    #919873
    Tom
    Lead Developer
    Lead Developer
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.