Transparent Header

Transparent Header

  • No Bulky Libraries Used
  • 3-Days Return Policy
  • Easy to use

Product Description

Add the code under header.liquid file just under the <style> tag
{% if section.settings.enable_transparent-header and template == 'index' %}
.header-wrapper{
position: absolute;
width: 100%;
background: transparent;
top: 0px;
background: linear-gradient(to bottom, rgb(0 0 0), rgb(0 0 0 / 0%));

}
.scrolled-past-header sticky-header{
background: var(--gradient-background) !important;
/* color: rgba(var(--color-foreground), 0.75); */
}
/* .scrolled-past-header sticky-header .header__icon.link,.scrolled-past-header sticky-header .header__active-menu-item,.scrolled-past-header sticky-header .disclosure__button,.header__heading-link .h2{
color: rgba(var(--color-foreground), 0.75) !important;
} */
.scrolled-past-header sticky-header .header__heading-link{
display: block !important;
}
{% endif %}
Schema for adding a Setting to enable it

Add the schema

{
"type": "checkbox",
"id": "enable_transparent-header",
"label": "Enable Transparent Header",
"default": false
},
Change the menu Styling and Center align it

Add the code under the base.css file

.header__inline-menu ul li span{
font-size: 14px;
font-style: normal;
font-weight: 700;
letter-spacing: -.56px;
line-height: normal;
}

@media screen and (min-width: 750px) {
header{
display: flex!important;
justify-content: space-between!important;
}
}

Reviews (0)

Reviews

There are no reviews yet

Add a review
Transparent Header Transparent Header
Rating*
0/5
* Rating is required
Your review
* Review is required
Name
* Name is required
Add photos or video to your review

Related products