[Support request] split menu center image/logo

[Femke]

Hi,

I am trying to create a navigation menu with my logo in the center. I have gone through the steps https://docs.generatepress.com/article/centering-logo-navigation/ . The menu is split with a menu seperator and showing the text ‘menu seperator’. But instead of the text there should be the logo. I have added the css as is mentioned in the article. Hope you can help out, thanks!

[David]

Hi there,

any chance you can remove your coming soon page so i can see what the issue is.

[Femke]

Hi David,

I have disabeled the coming soon page.
(I also have another issue with the menu bar not showing at all now) Just opened a new ticket for that.
Hope you can help out!
Thank you!

[David]

So first thing can you add a logo to the Site Identity so it appears in the static navigation.
Where did you add the CSS?

[Femke]

Hi, I have added the logo and put back the CSS (sorry I deleted it to test something). Now it seems to work out with the logo in the middle. What I need it to do is to not show the logo until you scroll down. So the logo should only show in the sticky menu when scrolling down. At the moment when scrolling down, the logo is located on the left side in the menu instead of in the center.

Also, the menu items seem very far apart, is there a way to get them a bit closer to eachother?

[David]

This method won’t work with the Sticky Navigation. So if you can keep it how it is and just disable the sticky navigation ill look at a way of fixing the header and hiding the logo until you scroll down.

[Femke]

Ok great, thank you. I have disabled the sticky navigation.

[David]

So add this CSS:

.site-header {
    position: fixed;
    width: 100%;
    z-index: 100;
}
.site-logo {
    opacity: 0;
    transition: opacity 0.3s ease-in;
}
.site-logo.logo-show {
    opacity: 1;
}

Then add this Javascript:

<script>
var scrollPosition = window.scrollY;
var targetLogo = document.getElementsByClassName('site-logo')[0];

window.addEventListener('scroll', function() {

    scrollPosition = window.scrollY;

    if (scrollPosition >= 30) {
        targetLogo.classList.add('logo-show');
    } else {
        targetLogo.classList.remove('logo-show');
    }

});
</script>

[Femke]

Thanks, I have added the css but where can I add the Java script?

[David]

Simplest way is add it to a Hook Element.

https://docs.generatepress.com/article/hooks-element-overview/

Select the WP_footer hook and set the Display Rules > Location: Entire Site.

[Femke]

That worked! Nice! Thank you!

Any chance you can have a quick look at something else? Something strange is happening on the homepage. when I want to add a new section, it is vertically displayd. I think a setting is messed up with column with but I cannot find in anywhere, driving me nuts.

Do you have an idea

[David]

Is this issue inside the Elementor editor? I can’t see a problem on the sites home page.

[Femke]

Yes its in Elementor editor

[David]

Might be something you want to ask Elementor about.
But why not delete that Section and rebuild it.

[Femke]

I have disabled all the plugins and only activated the ones i use. Now, my layout in Elementor looks normal again. Must have been one of the plugins. Thanks again for your help, really great support!

[Author]

Posts