Adding a button into header with dawn theme

[mckayemeeves]

Hello!

My website is mothera.co and I am trying to turn the “buy with prime” collection on the far right into a button so it looks like the image below. How can I do this?

[EBOOST]

Hi @mckayemeeves

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 bottom of file

.header .header__inline-menu .list-menu > li:last-child >a {
	background: url(https://cdn.shopify.com/s/files/1/0468/6617/0015/files/buy-with-prime-logo.png?v=1673389582&width=1500) no-repeat center;
	background-size: contain;
	font-size: 0;
	min-height: 42px;
}
#menu-drawer .menu-drawer__menu > li:last-child > a{
	background: url(https://cdn.shopify.com/s/files/1/0468/6617/0015/files/buy-with-prime-logo.png?v=1673389582&width=1500) no-repeat center;
	background-size: contain;
	background-position: left 25px center;
	min-height: 42px;
	font-size: 0;
}
.header .header__inline-menu .list-menu > li:last-child >a span,
#menu-drawer .menu-drawer__menu > li:last-child > a span {
	text-decoration: none!important;
}

[mckayemeeves]

Thank you @EBOOST ! That was very helpful! Is there a way to make the badge bigger? It is currently quite small.

[EBOOST]

Hi @mckayemeeves

You can replace old code with code below

.header .header__inline-menu .list-menu > li:last-child {
	position: relative;
	min-width: 60px;
}
.header .header__inline-menu .list-menu > li:last-child >a {
	background: url(https://cdn.shopify.com/s/files/1/0468/6617/0015/files/buy-with-prime-logo.png?v=1673389582&width=1500) no-repeat center;
	background-size: contain;
	font-size: 0;
	width: 60px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	margin-left: ;
	height: 60px;
}
#menu-drawer .menu-drawer__menu > li:last-child {
	min-height: 60px;
}
#menu-drawer .menu-drawer__menu > li:last-child > a{
	background: url(https://cdn.shopify.com/s/files/1/0468/6617/0015/files/buy-with-prime-logo.png?v=1673389582&width=1500) no-repeat center;
	background-size: contain;
	background-position: left 45px center;
	width: 105px;
	font-size: 0;
	height: 60px;
}
.header .header__inline-menu .list-menu > li:last-child >a span,
#menu-drawer .menu-drawer__menu > li:last-child > a span {
	text-decoration: none!important;
}

[mckayemeeves]

Thank you so much for your help! This is perfect!