Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • #1223821

    Hello,

    I tried what is described by @Guenni007 here https://kriesi.at/support/topic/header-logo-center-menu-below-scroll-out-only-logo/ making also the menu background white and it is working let’s say 90%.

    The problem is that, exactly in the moment in which the logo scrolls out, the content of the page springs upward. I moved the menu bar a bit to the right to see what happens, and I saw that the content of the page springs upward in order to reach the upper part of the window, as the menu bar would not exist and would not occupy space.

    Can you help me?

    Thank you,

    Mauro

    #1223963

    Hey Mauro,

    Could you post a link to where we can see the results you are getting please?

    Best regards,
    Rikard

    #1223981

    yes you had to style the #main padding-top too.

    i have written a new script that also adds a class to the #main container which will be added or removed at the same time.
    So if the navigation is fixed, it is outside of the markup and this height has to be added to the padding-top on #main.

    function sticky_on_top() {
    ?>
    <script>
    	window.onscroll = function() {myFunction()};
    
    	var header = document.getElementById("header_main_alternate");
    	var main = document.getElementById("main");
    	var sticky = header.offsetTop;
    
    	function myFunction() {
    	  if (window.pageYOffset > sticky) {
    	    header.classList.add("stickynav");
    	    main.classList.add("pad");
    	  } else {
    	    header.classList.remove("stickynav");
    	    main.classList.remove("pad");
    	  }
    	}
    </script>
    <?php
    }
    add_action('wp_footer', 'sticky_on_top', 9999);

    you can than correct the “missing height” of the navigation in quick css by:
    on that page i do it only for non responsive case

    @media only screen and (min-width:768px) {
    #header_main_alternate.stickynav {
        width: 100%;
        position: fixed;
        top: 0;
        background: #fff;
        box-shadow: 0 3px 10px -3px #aaa
    }
    #main.pad {
        padding-top: 50px;
    }
    }

    see working example here: https://webers-testseite.de/pureinstall/negele/
    this page was originally intended to show if a slider can be set above the whole.
    Below I realized exactly that.

    • This reply was modified 4 years, 6 months ago by Guenni007.
    #1223995

    By the way – on that page i have only in account the scroll event. If it should be perfect there had to be an onresize event too. Because on resize the offsetTop changes. But i didn’t want to make it too complicate on that page.
    Because on resize function are very performance intensive. So a debounce function had to be prepared too.
    Etc. pp.

    #1223996

    Thank you Guenni! I’am trying right now, trying to set the right sizes.. I’ll let you know! Mauro

    #1224044

    Ok, let me say first that I am not an expert. So I put in functions.php the code (1) you had posted in the previous topic + your new code (2). It works much better. In order to adapt it to my site, I tried to change the number “130” in the string of your first code:

    if ($(document).scrollTop() > 130) {

    Now when I change it, it doesn’t change much. I if put small numbers, like >9, i see big changes (actually until >80). But I put >100 or >130 or 150 > the result is the same.

    Any idea why?

    Thank you,

    Mauro

    #1224045

    no the one is than from the older post obsolete.

    #1224050

    Ah ok!
    So using only the codes you posted here, the problem of the “missing height” is 100% solved. But the new sticky header appears to early :/

    #1224699

    may i see the page it concerns.
    Think of i’m participant as you are – so i do not see private messages – otherwise you had to wait til mods are here.

    in contrast to the other code this should not happen here, because the distance to the upper border is taken from the header.offsetTop value here.

    #1225200

    Hi,

    Could you please share a link of your website so we can see the issue? :)


    @guenni007
    thanks for your help as always :)

    Best regards,
    Yigit

    • This reply was modified 4 years, 5 months ago by Yigit.
    #1225206

    Hi,

    thank you for your interest! My website is still not online, I’am building it. Can I give you a temporary administrator password?

    Thank you,

    Mauro

    #1225330

    Hi Mauro,

    Yes, please share credentials in private.

    Best regards,
    Victoria

    #1228006

    I sent the message, but maybe you didn’t get it. I try it again. Here are my credentials. Thank you

    #1229135

    Hi,

    Thank you for the update.

    You can prevent the sticky menu from displaying too early by controlling the window.pageYOffset value. In the script, look for this line:

    if (window.pageYOffset > sticky) {
    

    Replace it with:

    if (window.pageYOffset - 200 > sticky) {
    

    Best regards,
    Ismael

    #1229142

    Now it works! Thank you!

    #1229289

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

Viewing 16 posts - 1 through 16 (of 16 total)
  • The topic ‘Header center, menu below, scroll out only logo.’ is closed to new replies.