- This topic has 11 replies, 2 voices, and was last updated 5 years, 9 months ago by
.
Because the header is flexible (changes size vertically when scrolling) there is a glitch where the header is expanding to be larger than the default and this means that it is overlapping the top of the titlebar.
Is there some way to make sure that no matter what the vertical size of the header is, the top of the titlebar always begins from the bottom edge of the header instead of being overlapped?
Here is a screenshot showing the header coming down over the top of the top 40% of the title bar.
Hi @jm,
I hope you are well today and thank you for your question.
Could you please share me your site URL where it’s happening so that I can troubleshoot it?
Best regards,
Shufflehound teamHi yes, added to private info.
Thanks
I visited your shared site but didn’t see the issue on it as shown in the attached screenshot.
Could you please test it clearing your browser cache?
We’re continuously clearing our browser cache throughout development and using multiple browsers for testing also. This issue persists on multiple browsers and directly following cache clearing, as well as all other times as well.
We use chrome primarily for testing and this issue is present on multiple pages but most commonly on product pages and category pages.
Please go to a product page, and then scroll up and down a few times – the header switches from a fixed height header to being vertically larger than when first arriving on the page, it becomes flexible when scrolling.
Please see that after scrolling down the page, when you scroll back to the top that the header is now overlapping the titlebar. This happens on multiple pages.
Thanks
I think the two questions I’m asking are:
1. How can I prevent the header from overlapping the titlebar (or other lower content when there is no titlebar like the homepage main image) when the page is scrolled to the top (after resizing to be larger than when scrolling)?
2. If there’s no way to do this, how can is disable the functionality which makes the header larger vertically when it is at the top of the page than when it is scrolling w/ sticky. Currently scrolling header is about 60% of the height of the header when scrolled back to the top of the page (it grows larger when at the very top). I might need to disable this functionality so that the header remains the same height no matter what the position is.
Solution for this topic
Please go to a product page, and then scroll up and down a few times – the header switches from a fixed height header to being vertically larger than when first arriving on the page, it becomes flexible when scrolling.
Please see that after scrolling down the page, when you scroll back to the top that the header is now overlapping the titlebar. This happens on multiple pages.
Please update the theme on your site to the below latest version as described here https://support.shufflehound.com/updating-theme/
If still the issue occurs then please add the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
header.primary-desktop { height: auto !important; }1. How can I prevent the header from overlapping the titlebar (or other lower content when there is no titlebar like the homepage main image) when the page is scrolled to the top (after resizing to be larger than when scrolling)?
2. If there’s no way to do this, how can is disable the functionality which makes the header larger vertically when it is at the top of the page than when it is scrolling w/ sticky. Currently scrolling header is about 60% of the height of the header when scrolled back to the top of the page (it grows larger when at the very top). I might need to disable this functionality so that the header remains the same height no matter what the position is.
To help us keep support thread separates could you please create a new thread for each of your other questions instead of asking them in your single thread as it makes the thread messy and hard to read.
If you want to you can also add reference of this thread in your newly created thread.
We would be more than happy to help you with your new thread.
Guys I don’t want to be rude because your customer service is normally very good, but please take my request seriously and also take the time to digest the information that I’m presenting.
I don’t want to be using a beta theme version on my site anyway, but to see if the problem would be solved I tried it and it’s lucky I backed up my site because it destroyed the stylings on the site. Not only didn’t it stop the header issue, but it added weird unnecessary paddings around the nav elements.
Secondly, the css snippet you provided also doesn’t work. If you read my request, the problem is that the header is flexible when scrolling and so it changes sizes and overlaps the titlebar. I don’t see how making the header “height: auto !important” would solve this at all – it seems like it would make the issue worse if anything.
Lastly, if you take the time to read the two questions I added in the last message you’d see that they are not separate questions that require a separate thread, but they are a broken down explanation of a single problem. If you can help me to do 1) then ok, but if not then helping me with 2) would also be fine. It seems like you didn’t read the questions but just saw that they were there and rushed to move onto the next enquiry you have to answer here.
Again, normally your customer service is very good, but this is seriously frustrating to go to the effort of fully explaining my issue as clearly as possible only to be given 2 “solutions” that neither work and then having my two legitimate questions (that are really just the main question split in two) dismissed without even being read properly.
Here is a simplified version of everything I’ve asked so far:
“How can I stop the header from changing height when scrolling? ie how can I make it fixed?”
Thanks
I don’t want to be using a beta theme version on my site anyway,
It is not a beta theme but the same theme version which released on ThemeForest on the below page.
but to see if the problem would be solved I tried it and it’s lucky I backed up my site because it destroyed the stylings on the site. Not only didn’t it stop the header issue, but it added weird unnecessary paddings around the nav elements.
I have tested it on my test site and it’s working fine for me using latest version of Jevelin theme.
Have you made any changes in the theme files?
Secondly, the css snippet you provided also doesn’t work. If you read my request, the problem is that the header is flexible when scrolling and so it changes sizes and overlaps the titlebar. I don’t see how making the header “height: auto !important” would solve this at all – it seems like it would make the issue worse if anything.
I don’t see the shared CSS code on your site.
Where have you added it?
If you have removed it then please add it again so that I can test it.
Here is a simplified version of everything I’ve asked so far:
“How can I stop the header from changing height when scrolling? ie how can I make it fixed?”
If you don’t want to change its height then please use the above shared CSS code.
If you don’t want to make it sticky then just disable the theme Sticky Header option as shown in the attached screenshots.
Please accept my full apology – I just added the css code to the site and now it appears to have solved the issue mentioned. When I tried it earlier it didn’t seem to be having any effect.
Disregard my last message, thanks for your help with this.
You are always welcome here 🙂
