Tagged: shrinking header, sticky header
-
AuthorPosts
-
February 7, 2016 at 7:48 pm #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.
February 7, 2016 at 8:57 pm #579226Hey 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.
February 7, 2016 at 9:47 pm #579248Hi, 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 #580957Hey!
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,
AndyFebruary 10, 2016 at 11:26 am #580991Hi 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 #582354Hi!
I don’t get this result using Chrome. Which browser and OS are you using? please check on another computer as well.
Cheers!
AndyFebruary 12, 2016 at 6:04 pm #582388I 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 #583636Hi!
try this code in Quick CSS field:
#header_main { height: 101px; }
and adjust as needed.
Cheers!
AndyFebruary 16, 2016 at 12:36 am #583835Thanks 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 #585184Hey!
It’s barely noticeable but you can use this:
.header-scrolled + #main { top: -15px; position: relative; }
Cheers!
IsmaelFebruary 24, 2016 at 1:01 am #588077Thanks 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 -
AuthorPosts
- You must be logged in to reply to this topic.