Return to previous page

Make the header background transparent before scrolling only

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

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..

#398872 Copied Theme version: 9.3.11

7 Answers

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.

#398882 Copied

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

#398884 Copied

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

#398922 Copied

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

#398968 Copied
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
#399198 Copied
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

#399836 Copied

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.

#399899 Copied
Viewing 8 results - 1 through 8 (of 8 total)