[Support request] split menu center image/logo

Home Forums Support split menu center image/logo

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #885353
    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!

    #885367
    David
    Staff
    Customer Support

    Hi there,

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

    #886222
    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!

    #886351
    David
    Staff
    Customer Support

    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?

    #886456
    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?

    #886491
    David
    Staff
    Customer Support

    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.

    #886493
    Femke

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

    #886532
    David
    Staff
    Customer Support

    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>
    #886653
    Femke

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

    #886665
    David
    Staff
    Customer Support

    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.

    #886692
    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

    #886798
    David
    Staff
    Customer Support

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

    #886800
    Femke

    Yes its in Elementor editor

    #886830
    David
    Staff
    Customer Support

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

    #886886
    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!

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.