How can I add a pink background to my menu in the Debut theme?

Store Design
1

I want to add a pink background color behind the menu in the header, but just the menu part. I want the pink to stretch across the screen aswell. Another thing, I love how the " desktop view" looks but the full screen view crops the banner and column images, how do I get the desktop view to be the same as the full screen view?

https://da-real-ase-doll-factory.myshopify.com/

Pass: Help

2 Likes
2

@Kenyakreates

Please add the following code at the bottom of your assets/theme.css file for the menu.

@media only screen and (max-width: 749px){
nav#AccessibleNav {
    background-color: #ff5894;
	height: 45px;
    line-height: 45px;
}
.site-nav--centered{ padding-bottom: 0px !important; }
.site-nav a{ color: #fff !important; }
}

Hope this helps.

Also could you please provide screenshot for your banner issues?

3

@Kenyakreates

sorry for that issue can you please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css ->paste below code at the bottom of the file.
    this code apply for after 5 - 6 second
.site-nav--centered {
    padding: 15px 0px;
    background: #ff5894;
    margin: 0px;
}
.site-nav--centered span.site-nav__label {
    color: #fff;
}
4

Still overlapping, and I provided the link and password.

overlapping.png
overlapping.png1920×1080 364 KB

1 Like
5

@Kenyakreates

sorry i can’t see

KetanKumar_0-1629034433782.png
KetanKumar_0-1629034433782.png1920×1080 221 KB

6

@Kenyakreates

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css ->paste below code at the bottom of the file.
@media only screen and (min-width: 750px){
.image-bar--x-large .image-bar__content, .image-bar--x-large .image-bar__item {
    height: 835px !important;
}

[class*=index-section--flush]+[class*=index-section--flush] {
    margin-top: -111px !important;
}
}