How can I fix Dawn theme code issues affecting my background and dropdown menus?

Store Design
1

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
Screen Shot 2022-08-13 at 1.57.06 PM.png2176×749 408 KB

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;
}

2

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;
}
3

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! :slightly_smiling_face:

4

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?