Dawn or Refresh Theme - Header Inline Menu

Store Design
1

Hi good people:-)

I wonder if anyone can help me. In the Dawn or Refresh Theme, how can I make my menu inline and change the background color (only on the menu line and not the entire header)?

Any help would be appreciated:-)

Greetings

Jeanette

2

Hi @Hello22

Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution.

3

Yes sure. It is https://mintestside.myshopify.com/

But there isn’t really anything there yet, as I just started it:-) I just published the Dawn Theme and got stuck on the menu part.

I have attached an illustration of what I mean. I need just the menu background part to be colored and I guess that it needs to be inline for that.

Thank you.

12.png
12.png2400×800 158 KB

1 Like
4

PS - the password to the teststore is ‘test’
:slightly_smiling_face:

5

Hi @Hello22

You can try this solution by following these steps:

Step 1: On the admin page, Online store → Edit code → base.css

Step 2: Add this code to the bottom of the CSS file

.header-wrapper {
  position: fixed !important;
    top: 0px !important;
    width: 100% !important;
    background: pink !important
}
#shopify-section-announcement-bar {
  visibility: hidden
}

Step 3: Enjoy!!!

A note that you can change the background color of the header by replacing the pink in the code with another color or hex color. You can refer to your favorite color on the website.

(https://imagecolorpicker.com/color-code/2596be)

This is our tested video https://www.loom.com/share/eb1d546307ee4045960527b97891993c

I hope that it will work for you.

6

Hi BSS-Commerce

Thank you so much for your suggestion and your video. But the whole header goes pink, and I want just the menu line to be pink:-)

I don’t think it can be done - maybe with the older versions of free themes, but not the ones available right now.

Thanks again:-)

7

Hi @Hello22

You can add more this code at the bottom of the file base.css

@media only screen and (min-width: 990px) {
  .header__inline-menu {
    width: 200% !important;
    text-align: center;
    background: red !important;
}
}

The result is:

view - 2022-12-06T172556.487.png
view - 2022-12-06T172556.487.png1317×938 99.2 KB

I hope that it can help you.

8

That’s it:-) Wow, thank you so much for your help. I put the code on my site and changed the colors, and it looks great. Do you happen to know how to align it to bottom, so that it doesn’t have the white spacing between the image and the pink menu?

33.jpg
33.jpg1903×846 131 KB

9

Hi again
I figured it out - I was able to change the bottom padding in the header area :grinning_face_with_smiling_eyes:
Thank you again for your help.

1 Like
10

Hej BSS-Commerce

I just noticed, that the code makes my page too wide - it scrolls out of range. I did not notice that the other day :blush:

Do you know how I can fix this? Thank you again for your help :grin:

https://mintestside.myshopify.com/
The password is ‘test’

11

Hi @Hello22

Please give us a little time. We will check it and suggest you a solution if possible.

12

Okay, thank you :grinning_face:

13

I was supposed to put in both the codes, right?
It would be great if it can not be fixed and if the announcement bar would show :grin:

Thank you.

14

Hi @Hello22

You can try this code to replace the old code:

@media screen and (min-width: 750px) {
	.header-wrapper .page-width {
	    max-width: unset !important;
	    padding: 10px 0 0 !important;
	}
	.header__inline-menu {
	    width: 100% !important;
	    text-align: center;
	    background: red !important;
	}
	.header__inline-menu .header__icons {
	       padding-right: 5rem !important;
	}
	.header__inline-menu .header__search {
	       padding-left: 5rem !important;
	}
	.header__inline-menu .menu-drawer-container {
	       padding-left: 5rem !important;
	}
}

I hope that it will work for you.

15

We’re getting very close:-) But there’s still a little shift. The announcement bar and fixed menu is perfect :grinning_face:

16

Hi @Hello22

I think you can combine the old code and the new code. Please replace the old code with this code:

@media screen and (min-width: 750px) {
	.header-wrapper .page-width {
	    max-width: unset !important;
	    padding: 10px 0 0 !important;
	}
	.header__inline-menu {
	    width: 100% !important;
	    text-align: center;
	    background: red !important;
	}
	.header__inline-menu .header__icons {
	       padding-right: 5rem !important;
	}
	.header__inline-menu .header__search {
	       padding-left: 5rem !important;
	}
	.header__inline-menu .menu-drawer-container {
	       padding-left: 5rem !important;
	}
}
.header-wrapper {
  position: fixed !important;
    top: 0px !important;
    width: 100% !important;
}
#shopify-section-announcement-bar {
  visibility: hidden
}

This is a video for you to refer https://www.loom.com/share/d47884f851544aebaa7f217b729c3449

I hope that this can help you solve the issue.