Tagged: ,

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • February 7, 2016 at 7:48 pm #579215
    samadhi_

    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.

    February 7, 2016 at 8:57 pm #579226
    Basilis

    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, 10 months ago by Basilis.
    February 7, 2016 at 9:47 pm #579248
    samadhi_

    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.

    February 10, 2016 at 10:53 am #580957
    Andy

    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

    February 10, 2016 at 11:26 am #580991
    samadhi_

    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.

    February 12, 2016 at 5:37 pm #582354
    Andy

    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

    February 12, 2016 at 6:04 pm #582388
    samadhi_

    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.

    February 15, 2016 at 5:55 pm #583636
    Andy

    Hi!

    try this code in Quick CSS field:

    #header_main {
height: 101px;
}

    and adjust as needed.

    Cheers!
    Andy

    February 16, 2016 at 12:36 am #583835
    samadhi_

    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.

    February 18, 2016 at 6:40 am #585184
    Ismael

    Hey!

    It’s barely noticeable but you can use this:

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

    Cheers!
    Ismael

    February 24, 2016 at 1:01 am #588077
    samadhi_

    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.

    February 25, 2016 at 5:26 am #588742
    Rikard

    Hi,

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

    Regards,
    Rikard

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