Topic: Keep site title and format on sticky menu

mchammy75
November 18, 2023 at 10:59 pm

I am trying to maintain the same site title and formatting on the sticky menu when scrolling. For some reason the site title disappears and the formatting changes such as margins and shifting menu items.

nav menu – https://jmp.sh/vU7Oyigi
sticky menu – https://jmp.sh/7HNsSLaM
David
November 19, 2023 at 8:43 am

Hi there,

you would need to hook the site title into the navigation.
this topic explains how:

https://generatepress.com/forums/topic/make-site-title-sticky-with-sticky-navigation/#post-2642689

The CSS may need some tweaking considering your off canvas toggle position. But I can help with that once the title is the nav
mchammy75
November 19, 2023 at 5:25 pm

I made the change to add the PHP code snippet. Now the site title is showing twice on the navigation menu. See https://jmp.sh/oIXTFmxJ.

And when scrolling the hamburger menu is missing and formatting needs fixing. See https://jmp.sh/N1UUUsJO

David

November 20, 2023 at 1:15 am

Try adding this CSS:


@media(min-width: 769px) {
    nav:not(#sticky-navigation) .main-title {
        display: none;
    }

    nav#sticky-navigation .sticky-brand {
        margin-left: unset;
        margin-right: 40px;
    }

    #sticky-navigation .menu-toggle {
        display: block;
        order: -1;
        padding-left: 0;
    }

    #sticky-navigation .inside-navigation {
        justify-content: flex-start;
        padding-inline: 40px;
    }

    #sticky-navigation .main-nav {
        margin-inline: auto;
    }

    #sticky-navigation .main-title a {
        font-size: inherit;
        font-family: inherit;
        font-weight: inherit;
        text-transform: inherit;
    }
}

mchammy75
November 20, 2023 at 9:14 am

This is looking a lot closer. The menu items still need to be shifted over to the left. See https://jmp.sh/9mcMhoUO
Ying
November 20, 2023 at 11:42 am

The menu items still need to be shifted over to the left. See

Do you want it to apply to both sticky nav and normal nav?
mchammy75
November 20, 2023 at 2:41 pm

Yes. I would like the normal and sticky nav to be identical.

Ying

November 20, 2023 at 2:54 pm

Add this CSS to the same media query:

.main-navigation:not(#sticky-navigation) div#primary-menu {
    margin-left: -40px;
}

And remove margin-right: 40px; from this CSS:

 nav#sticky-navigation .sticky-brand {
        margin-left: unset;
        margin-right: 40px;
}

mchammy75
November 20, 2023 at 3:13 pm

I made the changes, but the menu move to the left only very slightly. For reference it looked something like this before https://jmp.sh/vU7Oyigi
Ying
November 20, 2023 at 4:41 pm
The screenshot helps, I didn’t know you wanted it to look like this.

In this case, try this:

1. change this CSS:
```
.main-navigation:not(#sticky-navigation) div#primary-menu {
    margin-left: -40px;
}
```
to:
```
.main-navigation div#primary-menu {
    margin-right: auto;
}
```
2. Undo the #2 in my previous reply, add the margin-right: 40px; back to the CSS.

3. Remove this CSS:
```
#sticky-navigation .main-nav {
    margin-inline: auto;
}
```
mchammy75
November 20, 2023 at 8:08 pm

Thanks. The formatting looks great now. However, now I notice when I start scrolling down initially the menu disappears. See the screenshot where it’s disappeared. https://jmp.sh/Cv9e1zQj

Then as I keep scrolling further down it fades in. It wasn’t behaving like this before. I’m looking to have it remain static at the top as I scroll down.
Fernando
November 20, 2023 at 9:02 pm

I see. If that’s the case and you don’t want any transition, can you remove the codes added here, and disable the Sticky Nav in the Customizer? Once you’ve done this, let me know.
mchammy75
November 20, 2023 at 10:10 pm

Which codes should I remove? I’ve modified so much CSS at this point.

Fernando

November 20, 2023 at 10:27 pm

This one:

@media(min-width: 769px) {
    nav:not(#sticky-navigation) .main-title {
        display: none;
    }

    nav#sticky-navigation .sticky-brand {
        margin-left: unset;
        margin-right: 40px;
    }

    #sticky-navigation .menu-toggle {
        display: block;
        order: -1;
        padding-left: 0;
    }

    #sticky-navigation .inside-navigation {
        justify-content: flex-start;
        padding-inline: 40px;
    }

    #sticky-navigation .main-nav {
        margin-inline: auto;
    }

    #sticky-navigation .main-title a {
        font-size: inherit;
        font-family: inherit;
        font-weight: inherit;
        text-transform: inherit;
    }
}

Plus the ones mentioned by Ying.

mchammy75
November 20, 2023 at 11:22 pm

I’ve commented out the CSS and turned off Sticky Navigation here https://jmp.sh/YCgF5w4y.

Although the site title is now duplicated again and the navigation menu doesn’t move. So I’m not sure if this is what you meant.

What’s I’m trying to achieve is like this website http://www.coolmaterial.com where the navigation menu always hovers at the top consistently without fading in or out, even as you scroll down the page.
Fernando
November 20, 2023 at 11:25 pm
What you did is correct.

Remove the PHP and CSS you added from here: https://generatepress.com/forums/topic/make-site-title-sticky-with-sticky-navigation/#post-2642689

Then, add this CSS:
```
header.site-header {
    position: sticky;
    top: 0;
    z-index: 100000;
}
```

Viewing 16 posts - 1 through 16 (of 20 total)

1 2 →

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Keep site title and format on sticky menu