Titlebar being overlapped by header

Home Forums Jevelin Theme Titlebar being overlapped by header

Home Forums Jevelin Theme Titlebar being overlapped by header

This topic contains 11 replies, has 2 voices, and was last updated by  Shufflehound Support 3 months, 3 weeks ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    RESOLVED Posts
  • jm
    Participant

    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?

    jm
    Participant

    Here is a screenshot showing the header coming down over the top of the top 40% of the title bar.

    Attachments:
    You must be logged in to view attached files.

    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 team

    Hi 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?

    Attachments:
    You must be logged in to view attached files.

    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/

     


    Please login to access this file

     

    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

    • This reply was modified 3 months, 3 weeks ago by  jm.

    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.

     

    https://themeforest.net/item/jevelin-multipurpose-premium-responsive-wordpress-theme/14728833#item-description__changelog

     

    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.

    Attachments:
    You must be logged in to view attached files.

    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 🙂

Viewing 12 posts - 1 through 12 (of 12 total)