How can I add a pill-shaped donate button to my Dawn theme header?

Justin34 · January 19, 2023, 11:59pm

Hi all,

I am using the Dawn Theme. I would like one of my links in my top navigation to be turned into a pill shaped button. I want the link “Donate” to be turned into that button. Does anyone know how I would go about doing that? I want the color of the button to be green. I also want it to be a decent size button to it kinda stands out since it is one my the most important links in my top navigation.

My site is www.PennsylvaniaParks.org

Thanks in advance!

EBOOST · January 20, 2023, 12:22am

Hi @Justin34

May I suggest to update code these steps:

Go to Store Online-> theme → edit code
Assets/base.css
Add code below to bottom of file

.header  .header__inline-menu .list-menu > li:last-child > a{
	background: green;
	border-radius: 40px;
	text-decoration: none !important;
	padding-left: 30px;
	padding-right: 30px;
}
.header  .header__inline-menu .list-menu > li:last-child > a span {
	text-decoration: none;
}
.menu-drawer__navigation .menu-drawer__menu > li:last-child a{
	background: green;
	border-radius: 40px;
}

Justin34 · January 20, 2023, 12:28am

Is it possible to make the text white? I think white text with green background would stand out better. Thanks so much!

EBOOST · January 20, 2023, 12:49am

Hi @Justin34

Replace code above with code below

.header  .header__inline-menu .list-menu > li:last-child > a{
	background: green;
	border-radius: 40px;
	text-decoration: none !important;
	padding-left: 30px;
	padding-right: 30px;
	color: #fff!important;
}
.header  .header__inline-menu .list-menu > li:last-child > a span {
	text-decoration: none;
	color: #fff;
}
.menu-drawer__navigation .menu-drawer__menu > li:last-child a{
	background: green;
	border-radius: 40px;
	color: #fff!important;
}

Justin34 · January 20, 2023, 12:56am

Perfect!! You know your stuff. Thank you! One last question about this. Everything is perfect on my desktop. But on mobile, the button goes all the way across the navigation. Is there anyway to make the button not as wide on the mobile navigation. Looks a little strange. Thanks so much!

EBOOST · January 20, 2023, 1:14am

Hi @Justin34

You can use code below

.header  .header__inline-menu .list-menu > li:last-child > a{
	background: green;
	border-radius: 40px;
	text-decoration: none !important;
	padding-left: 30px;
	padding-right: 30px;
	color: #fff!important;
}
.header  .header__inline-menu .list-menu > li:last-child > a span {
	text-decoration: none;
	color: #fff;
}
.menu-drawer__navigation .menu-drawer__menu > li:last-child {
	padding: 0 3.2rem;
}
.menu-drawer__navigation .menu-drawer__menu > li:last-child a{
	background: green;
	border-radius: 40px;
	color: #fff!important;
	justify-content: center;
}

Justin34 · January 20, 2023, 1:18am

Worked perfectly Thanks so much!

loreen_sawatzky · May 1, 2023, 7:15pm

Hello! I’m looking to do the exact same thing but with a drop-down menu, instead of a link. This solution worked when I have a single link in the last position in the menu, but not when there is a drop-down. Can you please let me know how to fix this?

https://rejuvenateresources.com/

I’d like the “SHOP” drop-down menu to look like a button (orange background, #FD9D15)

Thank you!

EBOOST · May 2, 2023, 1:24am

Hi @loreen_sawatzky ,

May I suggest to update code these steps:

Go to Store Online-> theme → edit code
2.Assets/base.css
add code below to end of file

#menu-drawer .menu-drawer__menu > li:last-child summary.menu-drawer__menu-item{
    background: #FD9D15;
    border-radius: 30px;
}
.list-menu.list-menu--inline > li:last-child summary.header__menu-item {
    background: #FD9D15;
    border-radius: 30px;
    padding-right: 4rem;
    padding-left: 3rem;
}
.list-menu.list-menu--inline > li:last-child summary.header__menu-item .icon-caret {
    right: 2rem;
}

loreen_sawatzky · May 2, 2023, 1:35pm

Thank you!! I ended up pasting the code into the Custom CSS section on the homepage header block and it was perfect! THANK YOU!

tshark · June 28, 2023, 8:17pm

is there a way to make the button stay all the way on the right side of the screen instead of it just making the button where the last “in-line” menu item is?

EBOOST · June 29, 2023, 2:14am

Hi @tshark ,

Could you share store url and protect pass? I will help to check it.

tshark · June 29, 2023, 5:12pm

my store is www.sharkeysmobiledetailing.com

Its public so no protect pass

EBOOST · June 30, 2023, 2:31am

Hi @tshark ,

May I suggest to update code these steps:

Go to Store Online-> theme → edit code
Assets/base.css
Add code below to end of file

body .header__inline-menu {
	display: block;
}
@media screen and (min-width: 990px) {
	body .header--middle-left {
		grid-template-columns: auto 1fr;
	}
	body .header__inline-menu .list-menu--inline{
		min-width: 100%;
	}
	body .header__inline-menu .list-menu--inline > li:last-child {
		margin-left: auto;
	}
}
@media screen and (max-width: 989px) {
	body .header__inline-menu .list-menu--inline > li {
		display: none;
	}
	body .header__inline-menu .list-menu--inline > li:last-child  {
		display: block;
	}
	body .header {
			grid-template-areas: "left-icons heading navigation icons";
			grid-template-columns: 1fr 2fr;
	}
	body #menu-drawer .menu-drawer__navigation .menu-drawer__menu > li:last-child {
		display: none;
	}
}

tshark · June 30, 2023, 2:11pm

Great Job! Can you make the “book now” button style a white border oval button, just like the view our service area button looks like? Aslo can you make the book now button not show up in the header on mobile devices? like just have it in the normal menu

EBOOST · June 30, 2023, 10:59pm

Hi @tshark ,

You can replace code above with code below:

body .header__inline-menu {
    display: block;
}
body .header__inline-menu .list-menu--inline>li:last-child > a span,
body .header__inline-menu .list-menu--inline>li:last-child > a{
    text-decoration: none;
    position: relative;
}
body .header__inline-menu .list-menu--inline>li:last-child > a:after {
    content: "";
    position: absolute;
    top: var(--buttons-border-width);
    right: var(--buttons-border-width);
    bottom: var(--buttons-border-width);
    left: var(--buttons-border-width);
    z-index: 1;
    border-radius: var(--buttons-radius);
    box-shadow: rgb(255, 255, 255) 0px 0px 0px 1.3px, rgba(0, 0, 0, 0) 0px 0px 0px 1px;
}
body .header__inline-menu .list-menu--inline>li:last-child > a:hover:after{
    box-shadow: rgb(255, 255, 255) 0px 0px 0px 2.3px, rgba(0, 0, 0, 0) 0px 0px 0px 2px;
}
@media screen and (min-width: 990px) {
    body .header--middle-left {
        grid-template-columns: auto 1fr;
    }

    body .header__inline-menu .list-menu--inline {
        min-width: 100%;
    }

    body .header__inline-menu .list-menu--inline>li:last-child {
        margin-left: auto;
    }
}

@media screen and (max-width: 989px) {
    body .header__inline-menu .list-menu--inline>li {
        display: none;
    }

    body .header__inline-menu .list-menu--inline>li:last-child {
        display: block;
    }

    body .header {
        grid-template-areas: "left-icons heading navigation icons";
        grid-template-columns: 1fr 2fr;
    }

    body #menu-drawer .menu-drawer__navigation .menu-drawer__menu>li:last-child {
        display: none;
    }
}

julienamoseeds · July 19, 2023, 8:15am

Hello there!
i’m trying to do the same thing but i’d like to have this specific button on the right.

any suggestions?

EBOOST · July 20, 2023, 2:58am

Hi @julienamoseeds ,

Could you share your url, protect password and which style button that you would like to show? We will help to check it.

julienamoseeds · July 20, 2023, 6:21am

Hi EBOOST!

here is the URL: https://jyc9965w3qdrjqre-71566098721.shopifypreview.com

(no pwd required)
I want the “contact“ button in the header just next to the magnifying glass.
i’ve added “margin-left: 130px;“ but i know it’s not correct
i’ve tried a align-content… but didn’t work

i also need a hover effect
any hint?

EBOOST · July 20, 2023, 9:17am

Hi,

Maybe I suggest you add code below to end of file Assets/base.css

@media(min-width: 990px){
	body .header.header--middle-left {
		grid-template-columns: auto 2fr auto;
	}
	body .header--middle-left .header__inline-menu {
		margin: 0;
	}
	body .header .header__inline-menu .list-menu > li:last-child {
		margin-left: auto;
	}
	body .header .header__inline-menu .list-menu > li:last-child > a {
		margin-left: 0;
	}
	body .header .header__inline-menu .list-menu > li:last-child > a:hover {
		background: #e4572e;
	}
	body .header--middle-left  .header__inline-menu  .list-menu--inline {
		width: 100%;
	}
}

Topic		Replies	Views
In Dawn Theme, add button to right side of header on desktop, but remove or make look good on mobile Store Design menu , design , header	6	106	March 21, 2024
In Dawn Theme, Fix Button To Right Side Of Header On Desktop, and Remove/Make Look Good On Mobile Store Design menu , design , header , shopify-themes	7	132	September 19, 2024
How do I change the style of button in the header from pill shaped to rectangle? Store Design css	7	44	August 7, 2023
How to can you make 2 separate menus in the header? Store Design menu	40	402	January 7, 2025
How can I change the navigation menu style to buttons in Dawn theme? Store Design menu , design , customizations	6	228	November 29, 2024

How can I add a pill-shaped donate button to my Dawn theme header?

Topic summary

Related topics