Need cart visible and announcement banner black background with white text - & search icon move

[NeginA]

I am providing an image that needs changes. Your help is very much appreciated!

1. Need search icon to the right of the navigation menu

2. Need announcement message in black and white text

3. Cart icon is in black and need shown but in white over the announcement message

This is Shopify Dawn Theme

url: www.undigabledigs.com

[EBOOST]

Hi @NeginA ,

May I suggest to update code these steps:

1. Go to Store Online-> theme → edit code

2. Assets/base.css
3. add code below to end of file

.shopify-section-group-header-group.announcement-bar-section {
	z-index: 1;
}
@media(min-width: 990px){
	
	body  .header > .header__search {
	  grid-area: navigation;
	  margin-left: auto;
	}
	#cart-icon-bubble svg path {
		fill: #fff;
	}
}
@media(min-width: 750px){
	body .announcement-bar {
	    background: #000;
	}
	body .announcement-bar__message {
	    color: #fff;
	}
}

[NeginA]

This was perfect! Thank you so much. The only thing is that on mobile the header is still white background for the announcement message/banner… can you help with that?

[EBOOST]

Hi,

If you would like to show white on mobile you can replace old code with code below:

.shopify-section-group-header-group.announcement-bar-section {
	z-index: 1;
}
@media(min-width: 990px){
	
	body  .header > .header__search {
	  grid-area: navigation;
	  margin-left: auto;
	}
	#cart-icon-bubble svg path {
		fill: #fff;
	}
}
body .announcement-bar {
    background: #000;
}
body .announcement-bar__message {
    color: #fff;
}

[NeginA]

I want to show black on mobile- its showing white on mobile instead

url: undigabledigs.com

[EBOOST]

Hi @NeginA ,

Sorry. I mean it will show like desktop the same.

[NeginA]

Unfortunately, on mobile its not showing black

this is the code I have base.css

[EBOOST]

Hi,

You need replace old code with new code above.

[NeginA]

You’re so helpful! Thank you X 100!!

[NeginA]

Is there a way to hide the navigation menu and search icon on the product pages only?

[EBOOST]

Hi,

May I suggest to update code these steps:

1. Go to Store Online-> theme → edit code

2. Layout/theme.liquid

3. Add code below like the screenshot below to class of body tag

{{ template }}

4. Go to Assets/base.css

5. Add code below to end of file

body.product #menu-drawer .menu-drawer__navigation,
body.product .header .header__search,
body.product .header .header__inline-menu {
	display: none;
}

[NeginA]

Thank you! My last issue is adding the grey divider line in the footer of shopify dawn theme

[NeginA]

Hi again!

I am hoping to achieve this look for mobile with the Dawn theme

I currently have this on mobile but would like menu and all icons on one menu instead with logo slightly bigger in the middle and announcement bar at the bottom of the footer floating (see screenshot for example)

[NeginA]

Want this look instead

[EBOOST]

Hi,

I am not sure which would you like. However you can try to code below:

@media(max-width: 989px){
	
	.shopify-section-group-header-group.announcement-bar-section {
		position: fixed;
		bottom: 0;
		z-index: 13;
		left: 0;
		width: 100%;
	}
	.header__heading-logo-wrapper .header__heading-logo{
		max-width: 50%;
	}
	.header--top-center header-drawer .header__icon--menu {
		height: auto;
		width: auto;
	}
	.header--top-center header-drawer .header__icon--menu span {
		padding-left: 4rem;
	}
	.header--top-center header-drawer .header__icon--menu .icon {
		left: 1.5rem;
	}
}

[NeginA]

incredible! thank you

[NeginA]

Is it possible to have just the icons up at the top and then place a divider. Have the logo right underneath the menu area? Basically have the logo stand on its own on mobile but all the icons up at the top above it and have “menu” written next to he hamburger menu icon?

[NeginA]

Here is what I mean