Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #579215

    Hi guys,

    I am using a sticky/shrinking header along with the extra top header, I would like the top header to disappear when the user scrolls down without effecting the appearance/alignment of the main header.

    I tried adding .header-scrolled #header_meta { display: none; } to my custom css which works to hide the top header, however once the top bar disappears it creates a blank white space the size of the top bar below the main header until the user scrolls down further and the main header fully shrinks.

    Also I should mention I modified two values in avia.js to decrease the amount the header shrinks when scrolled.

    What can I add to custom css to get rid of the white space under the main header once the top bar disappears? Thanks.

    #579226

    Hey samadhi_!

    1. Remove the top bar above the header

    Add this on your custom.css or Quick CSS

    
    #header_meta {
    display: none;
    }

    and let me know if it works better.

    Regards,
    Basilis

    • This reply was modified 8 years, 9 months ago by Basilis.
    #579248

    Hi, that just removes the top bar header all together. I want the top bar visible but not to be sticky and that part is currently working using .header-scrolled #header_meta { display: none; }.

    The problem is when you slowly scroll down to the point where the top bar header disappears it creates an empty white rectangle the same size as the top bar header below the main header which remains until you fully scroll down.

    #580957

    Hey!

    I checked your website (s. private content), but it does not happen as you describe for me. Could you fix it? if not please highlight your intentions using screenshots (imgur.com, dropbox).

    Regards,
    Andy

    #580991

    Hi Andy, I uploaded 3 images to imgur (before, during & after scrolling). The 2nd image has a red arrow pointing to the white space issue that occurs when scrolling. I hope the pictures help to clarify, thanks.

    #582354

    Hi!

    I don’t get this result using Chrome. Which browser and OS are you using? please check on another computer as well.

    Cheers!
    Andy

    #582388

    I have a few computers here and It’s happening on every browser/OS I have tested it on, windows 7, windows 10, OSX, firefox, chrome, safari etc.

    To replicate it try scrolling by clicking and dragging the scroll bar down, instead of using your mouse wheel or the scroll down arrow.

    #583636

    Hi!

    try this code in Quick CSS field:

    #header_main {
    height: 101px;
    }
    

    and adjust as needed.

    Cheers!
    Andy

    #583835

    Thanks for the help Andy but unfortunately that didn’t solve it.

    Changing the main header height creates new alignment issues with all the header elements.The only solution I can think of is having the page elements below the header shift upwards at the moment the top header disappears to compensate for the new empty space but I can’t figure out how to accomplish it.

    #585184

    Hey!

    It’s barely noticeable but you can use this:

    .header-scrolled + #main {
        top: -15px;
        position: relative;
    }

    Cheers!
    Ismael

    #588077

    Thanks Ismael, I was able to get it resolved by modifying your code.

    If anyone with a similar issue ends up reading this and using Ismael’s code, it throws off the alignment of the scroll to top button so you will also need to adjust the scroll to top button with something like the code below.

    #scroll-top-link {
    bottom: 79px !important;
    }

    Thanks again.

    #588742

    Hi,

    Great, glad you got it working and thanks for sharing the solution!

    Regards,
    Rikard

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