Make the header background transparent before scrolling only

This topic has 8 replies, 2 voices, and was last updated 1 months, 1 weeks ago ago by Tony Rodriguez

  • Avatar: Ankit Khandelwal
    Ankit Khandelwal
    Participant
    June 10, 2024 at 07:19

    Make the header background transparent before scrolling only. This will be applicable only on front page..

    7 Answers
    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    June 10, 2024 at 07:46

    Hello, @Ankit Khandelwal,

    Thank you for contacting us and for using XStore.

    We are pleased to inform you that the issue you reported has been successfully resolved. To see the changes, please clear your browser’s cache and revisit your site.

    For your reference, the solution involved enabling the “Header Overlap” option. This can be found under the navigation path: XStore > Theme Options > Header Builder > Multiple Headers > Edit Front Page Header.

    Additionally, we have provided a reference image in the private content area for your convenience.

    We hope this resolves your concerns. Should you require further assistance, please do not hesitate to contact us.

    Best Regards,
    The 8Theme Team

    Please contact administrator
    for this information.
    Avatar: Ankit Khandelwal
    Ankit Khandelwal
    Participant
    June 10, 2024 at 07:51

    That great and I need one more favor that please add top margin above slider, so that slider will shift below the header.

    And reduce the vertical gap between main header & primary menu. Please check the background again now again white header background is visible which is supposed to be transparent same is checked on Chrome & Edge browser

    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    June 10, 2024 at 12:24

    Hello, @Ankit Khandelwal,

    Thank you for your response.

    Let me explain to you.

    Make the header background transparent before scrolling only

    1/ If you wish to make the header background transparent, You must be enable
    header overlap option.

    and I need one more favor that please add top margin above slider, so that slider will shift below the header.

    2/It seems not possible. if we add a gap above the slider, the header will not be transparent anymore.

    And reduce the vertical gap between main header & primary menu.

    3/ To reduce the gap, You need to remove the padding of header main and also remove the bottom margin of logo.

    We hope this information is helpful. Should you require further assistance, please do not hesitate to contact us.

    Best Regards,
    The 8Theme Team

    Avatar: Ankit Khandelwal
    Ankit Khandelwal
    Participant
    June 10, 2024 at 15:49

    Point 2.
    Gap Over the slider – If you manage to give gap (top margin) of Slider then white background is good. So, kindly set the placement as Slider start after bottom of header portion. So, that video and header will not clash/over lap

    Point 3
    Please reduce the padding and give the screenshot. We have decrease the padding 3px but no change is seen

    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    June 11, 2024 at 09:10

    Hello, @Ankit Khandelwal,

    2/ To reduce the spacing between header & bottom header, please add this under XStore > Theme options > Theme custom CSS > Global CSS:

    .header-main {
        padding-bottom: 0 !important;
    }
    .header-main h1 {
        margin: 0 !important;
    }

    3/ To add the gap above slider, Please edit the home page, then add the top margin to the first section.

    We hope this helps. Should you require further assistance, please do not hesitate to contact us.

    Best Regards,
    The 8Theme Team

    Avatar: Ankit Khandelwal
    Ankit Khandelwal
    Participant
    June 14, 2024 at 17:00

    Please note that background in header in mobile version also be transparent before scrol .. Kindly make the setting accordingly

    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    June 15, 2024 at 07:00

    Hello, @Ankit Khandelwal,

    We are pleased to inform you that the issue you reported has been successfully resolved. We kindly ask you to verify the resolution at your earliest convenience.

    For your reference, relevant images have been uploaded to the private content area. Please review them to ensure everything meets your expectations.

    Should you have any further questions or require additional assistance, please do not hesitate to contact us.

    Best Regards,
    The 8Theme Team

    Please contact administrator
    for this information.
  • Viewing 8 results - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.