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

[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!

[Tom]

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 🙂

[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.

[Tom]

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 🙂

[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?

[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.

[Tom]

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?

[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!

[Tom]

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>

[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?

[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.

[Tom]

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;
}

[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!

[Tom]

No problem! 🙂

[Author]

Posts