[Resolved] Sticky navigation alignment issue

[Junior Gong]

Hey guys

I have tried all settings in customizer and could not find any hint in docs regarding my issue.
My sticky navigation inner nav is staying centered and I can’t get it to align to the right side right next to the hamburger menu and search icon.

Am I missing something here?

[Leo]

Hi there,

That’s strange. I see the issue but cannot replicate it on my install.

Can you confirm that you are using the latest versions of the theme and premium plugin?
https://docs.generatepress.com/article/generatepress-and-gp-premium/

If so, can you disable all plugins and provide the dashboard access for me to take a look?

Thanks 🙂

[Junior Gong]

Yes, i can confirm I am running latest versions of both

[Leo]

Make sure to see the second part of my answer above:

If so, can you disable all plugins and provide the dashboard access for me to take a look?

[Junior Gong]

Hey guys

did my reply not go through? I created staging version for you and disabled all plugins. see private info

[David]

Hi there,

the issue is because of the Legacy theme settings, so we’re going to need to do the following:

1. Customizer > Layout > Primary Navigation:
Temporarily switch the Navigation Location to the Below Header
Set the Alignment to Right.
Then switch the Location back to the Float Right

2. Add this CSS:

.site-logo.sticky-logo.navigation-logo {
    margin-right: auto;
}

#sticky-navigation .inside-navigation {
    padding: 0 40px;
    max-width: 1440px;
}

[Junior Gong]

Thx David, that solved the issue!
Am I assuming correctly that it’s a temp. glitch and will be fixed in some future update?

[David]

It is a glitch but not a bug that can be fixed – the site must have been built before we made changes to the Navigation and introduced 3.0 flexbox structure, as i see you have a Sticky Navigation Logo in the Customizer > Layout > Primary Nav. This was moved to the Customizer > Sticky Navigation in the most recent updates.

As the logo was already in place GP keeps it there so as not to break the site – but it means with the new versions of the theme it doesn’t behave as it should.

The alternative to the CSS would be to remove the sticky navigation logo from its current place, publish the changes and clear any caches. Then apply the sticky nav logo in its new place. This should bring the theme up to date and without that issue. OR keep those few lines of CSS 🙂

[Junior Gong]

Yes, we have been using GP for a while.
Thx for the clarification. We will proceed with those steps and fix it. It’s a better long-term solution

[David]

You’re welcome

[Speedy]

Yet again David comes up with the solution 🙂

I found this post as I had exactly the same issue and this fixed it. Although it’s now 2023 and I’m on the latest version, so I guess the glitch lives on…

Cheers

[David]

Glad you found this of use.

[Author]

Posts