Solved

Need help Asap with Dawn theme code

Popcorn
Explorer
104 0 13

Hi, I am having issues with my website. I added a background image and it messed up the other contents on my page. I can no longer see my announcement bar blocks. And my dropdown menus have my background image in them. 

Screen Shot 2022-08-13 at 1.57.06 PM.png

 

I don't know much about coding. And haven't came across any other posts that had similar issues to mine. Im launching my store soon and I really need help with this. My store url is https://lua-wolves-crystals.myshopify.com/ & password is bahcri

 

Here's the code for the announcement bar section, header menu, and background image. 

/* section-announcement-bar */
#shopify-section-announcement-bar {
z-index: 4;
}

.announcement-bar {
background-color: #989898!important;
float: left;
width: 100%;
}

.announcement-bar__link {
display: block;
width: 100%;
padding: 1rem 2rem;
text-decoration: none;
}

.announcement-bar__link:hover {
color: rgb(var(--color-foreground));
background-color: rgba(var(--color-card-hover), 0.06);
}

.announcement-bar__link .icon-arrow {
display: inline-block;
pointer-events: none;
margin-left: 0.8rem;
vertical-align: middle;
margin-bottom: 0.2rem;
}

.announcement-bar__link .announcement-bar__message {
padding: 0;
}

.announcement-bar__message {
text-align: center;
padding: 1rem 2rem;
margin: 0;
letter-spacing: 0.1rem;
}

 

/* Header menu drawer */
.header__icon--menu .icon {
display: block;
position: absolute;
opacity: 1;
transform: scale(1);
transition: transform 150ms ease, opacity 150ms ease;
}

details:not([open]) > .header__icon--menu .icon-close,
details[open] > .header__icon--menu .icon-hamburger {
visibility: hidden;
opacity: 0;
transform: scale(0.8);
}

.js details[open]:not(.menu-opening) > .header__icon--menu .icon-close {
visibility: hidden;
}

.js details[open]:not(.menu-opening) > .header__icon--menu .icon-hamburger {
visibility: visible;
opacity: 1;
transform: scale(1.07);
}

.js details > .header__submenu {
opacity: 0;
transform: translateY(-1.5rem);
}

details[open] > .header__submenu {
animation: animateMenuOpen var(--duration-default) ease;
animation-fill-mode: forwards;
z-index: 1;
}

@media (prefers-reduced-motion) {
details[open] > .header__submenu {
opacity: 1;
transform: translateY(0);
}
}

/* Header menu */
.header__inline-menu {
margin-left: -1.2rem;
grid-area: navigation;
display: none;
}

.header--top-center .header__inline-menu,
.header--top-center .header__heading-link {
margin-left: 0;
}

@media screen and (min-width: 990px) {
.header__inline-menu {
display: block;
}

.header--top-center .header__inline-menu {
justify-self: center;
}

.header--top-center .header__inline-menu > .list-menu--inline {
justify-content: center;
}

.header--middle-left .header__inline-menu {
margin-left: 0;
}
}

.header__menu {
padding: 0 1rem;
}

.header__menu-item {
padding: 1.2rem;
text-decoration: none;
color: rgba(var(--color-foreground), 0.75);
}

.header__menu-item:hover {
color: rgba(var(--color-foreground), 0.75);
}

.header__menu-item span {
transition: text-decoration var(--duration-short) ease;
}

.header__menu-item:hover span {
text-decoration: underline;
text-underline-offset: 0.3rem;
}

details[open] > .header__menu-item {
text-decoration: underline;
}

details[open]:hover > .header__menu-item {
text-decoration-thickness: 0.2rem;
}

details[open] > .header__menu-item .icon-caret {
transform: rotate(180deg);
}

.header__active-menu-item {
transition: text-decoration-thickness var(--duration-short) ease;
color: rgb(var(--color-foreground));
text-decoration: underline;
text-underline-offset: 0.3rem;
}

.header__menu-item:hover .header__active-menu-item {
text-decoration-thickness: 0.2rem;
}

.header__submenu {
transition: opacity var(--duration-default) ease,
transform var(--duration-default) ease;
}

.global-settings-popup,
.header__submenu.global-settings-popup {
border-radius: var(--popup-corner-radius);
border-color: rgba(var(--color-foreground), var(--popup-border-opacity));
border-style: solid;
border-width: var(--popup-border-width);
box-shadow: var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius) rgba(var(--color-shadow), var(--popup-shadow-opacity));
}

.header__submenu.list-menu {
padding: 2.4rem 0;
}

.header__submenu .header__submenu {
background-color:rgba(var(--color-foreground), 0.03);
padding: 0.5rem 0;
margin: 0.5rem 0;
}

.header__submenu .header__menu-item:after {
right: 2rem;
}

.header__submenu .header__menu-item {
justify-content: space-between;
padding: 0.8rem 2.4rem;
}

.header__submenu .header__submenu .header__menu-item {
padding-left: 3.4rem;
}

.header__menu-item .icon-caret {
right: 0.8rem;
}

.header__submenu .icon-caret {
flex-shrink: 0;
margin-left: 1rem;
position: static;
}

header-menu > details,
details-disclosure > details {
position: relative;
}

 

.gradient {
background-image: url(https://cdn.shopify.com/s/files/1/0655/6113/3295/files/Untitled_design_2.png?v=1659251819);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}

Accepted Solution (1)

Ahsan_ANC
Shopify Partner
1362 246 309

This is an accepted solution.

Hi, @Popcorn 

You can try this code


1. Go to Online Store-> Theme->Edit code
2. Asset-> base.css ->paste the below code at the bottom of the file.

Note: plz change the background color from black to your choice.

 

details[open]>.header__submenu {
    background: black !important;
}


.announcement-bar.color-accent-1.gradient {
    background: #989898 !important;
}
Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search

View solution in original post

Replies 3 (3)

Ahsan_ANC
Shopify Partner
1362 246 309

This is an accepted solution.

Hi, @Popcorn 

You can try this code


1. Go to Online Store-> Theme->Edit code
2. Asset-> base.css ->paste the below code at the bottom of the file.

Note: plz change the background color from black to your choice.

 

details[open]>.header__submenu {
    background: black !important;
}


.announcement-bar.color-accent-1.gradient {
    background: #989898 !important;
}
Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search
Popcorn
Explorer
104 0 13

Thank you so, so much! Can't thank you more enough. I've been trying different codes for the past week and I just couldn't get it right. Appreciate the help soooo much! 🙂 

Turbo713
Visitor
1 0 0

This didn't work for me. I think the ShineOn template I'm using makes my header drop down menu background transparent and my footer loses it's color. It's impacting the user experience because the menu is hard to see. Any ideas?