Solved

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

Justin34
Trailblazer
327 0 82

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!

ALL I THINK ABOUT IS OUR PARKS 🙂
Accepted Solution (1)
EBOOST
Shopify Partner
875 236 263

This is an accepted solution.

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;
}

EBOOST_0-1674177253652.png

 

Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

https://www.eboosttech.net

EBOOST
DONATE ❤❤

View solution in original post

Replies 33 (33)

EBOOST
Shopify Partner
875 236 263

Hi @Justin34 

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: 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;
}

EBOOST_0-1674174101035.pngEBOOST_1-1674174137209.png

 

Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

https://www.eboosttech.net

EBOOST
DONATE ❤❤
Justin34
Trailblazer
327 0 82

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

ALL I THINK ABOUT IS OUR PARKS 🙂
EBOOST
Shopify Partner
875 236 263

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;
}

 

 

Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

https://www.eboosttech.net

EBOOST
DONATE ❤❤
Justin34
Trailblazer
327 0 82

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!

ALL I THINK ABOUT IS OUR PARKS 🙂
EBOOST
Shopify Partner
875 236 263

This is an accepted solution.

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;
}

EBOOST_0-1674177253652.png

 

Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

https://www.eboosttech.net

EBOOST
DONATE ❤❤
Justin34
Trailblazer
327 0 82

Worked perfectly 😄 Thanks so much!

ALL I THINK ABOUT IS OUR PARKS 🙂
loreen_sawatzky
Tourist
8 0 4

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
Shopify Partner
875 236 263

Hi @loreen_sawatzky,

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

#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;
}

a.pngEducational-products-online-Therapeutic-games-and-high-quality-books-–-Rejuvenate-Resources.png

 

Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

https://www.eboosttech.net

EBOOST
DONATE ❤❤
loreen_sawatzky
Tourist
8 0 4

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
Tourist
14 0 1

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
Shopify Partner
875 236 263

Hi @tshark,

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

Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

https://www.eboosttech.net

EBOOST
DONATE ❤❤
tshark
Tourist
14 0 1

my store is www.sharkeysmobiledetailing.com

Its public so no protect pass

EBOOST
Shopify Partner
875 236 263

Hi @tshark ,

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

 

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;
	}
}

 

EBOOST_0-1688092113316.png

 

EBOOST_3-1688092253907.png

 

 

Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

https://www.eboosttech.net

EBOOST
DONATE ❤❤
tshark
Tourist
14 0 1

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
Shopify Partner
875 236 263

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;
    }
}
Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

https://www.eboosttech.net

EBOOST
DONATE ❤❤
tshark
Tourist
14 0 1

Hi, 

When using my header on desktop, the menu titled "full detail" has 2 submenus called "full detail and package". On mobile only one of the submenus shows up. The same thing is happening with the menu "our work", it has 3 submenus titles "gallery" "reviews" and "contact us". On mobile only "gallery" and "reviews" show up. I dont know if this is a glitch or mistake in the code but i cant fix it by deleteing the menus and creating them again, Please help.

julienamoseeds
Tourist
17 0 0

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
Shopify Partner
875 236 263

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.

Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

https://www.eboosttech.net

EBOOST
DONATE ❤❤
julienamoseeds
Tourist
17 0 0

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
Shopify Partner
875 236 263

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%;
	}
}

EBOOST_0-1689844640715.png

 

Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

https://www.eboosttech.net

EBOOST
DONATE ❤❤
julienamoseeds
Tourist
17 0 0

It works perfectly

thanks!

cupofjeaux
Tourist
3 0 1

Hi there! 
I used one of your first solutions to great success to make my Shop nav item a button; however, I recently gave Shop some sub pages as well and now it's not appearing as a button anymore.  Is it possible to modify this code to make it a button again? 

Below is what I originally added:

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

 

It's a site for a client and not live yet, so I don't have permission to share the password, so I'm attaching photos that I hope will help. 

 

Original:

Screenshot 2023-07-26 at 10.44.16 AM.png (sorry for the pixellation, it was an old cached preview) 

 

Current:

Screenshot 2023-07-26 at 10.44.23 AM.png

 

Cup of Jeaux Creative
EBOOST
Shopify Partner
875 236 263

Hi,

Maybe I suggest  code below:

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

 

Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

https://www.eboosttech.net

EBOOST
DONATE ❤❤
hashwear
New Member
7 0 0

can you help me adding a similar button to my website?

meepmediauk
Shopify Partner
23 0 1

Hello, 

I used this code to success making the last menu item on desktop, but on mobile, it makes ALL the last menu items of each parent a button. I only want the button to be applied to ONE specific menu item. Can I identify it to add a button by the menu name, rather than applying it to the last menu item for everything?

sibouss
Tourist
18 0 3

how can i also add this button in the main area of my header on desktop if I have my menu compressed in a drawer?

EBOOST
Shopify Partner
875 236 263

Hi @sibouss ,

Which theme would you like to add? And where would you like add this button? Could you please share your url store and screenshot? We will help to check it.

Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

https://www.eboosttech.net

EBOOST
DONATE ❤❤
sibouss
Tourist
18 0 3

its ok i figured it out..

 

different question - do you know how i can add icons next to all my menu items. For example a house icon next my "home" menu and so on?

EBOOST
Shopify Partner
875 236 263

Hi,

May I suggest to update code these steps:

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

2. Sections-> Add new section with name 'icons-menu.liquid'

3. copy code below to the file just has created at step 2

<style>
{%- for block in section.blocks -%}

  .list-menu a[href="{{ block.settings.url_icon}}"] {
    padding-left: {{ block.settings.width_icon }}px;
    background:url({{ block.settings.icon | image_url:  width: block.settings.width_icon }}) no-repeat left center;
    background-size: {{ block.settings.width_icon | minus: 10 }}px auto;
  }
  .menu-drawer__navigation .list-menu a[href="{{ block.settings.url_icon}}"] {
    margin-left: 1.5rem;
  }
{%-  endfor -%}  
</style>

{% schema %}
{
  "name": "Icon menu",
  "blocks": [
    {
      "type": "icon",
      "name": "Icon",
      "settings": [
        {
          "type": "image_picker",
          "id": "icon",
          "label": "Icon"
        },
        {
          "type": "range",
          "id": "width_icon",
          "min": 0,
          "max": 100,
          "step": 10,
          "unit": "%",
          "label": "icon width",
          "default": 30
        },
        {
          "type": "url",
          "id": "url_icon",
          "label": "Url",
          "info": "Url of sub menu item that you would like to add icon for it( Level 2)"
        }
      ]
    }
  ],
   "presets": [
    {
      "name": "Icon menu",
      "blocks": [
        {
          "type": "icon"
        }
      ]
    }
  ]
}
{% endschema %}

4. Go to customize

5. Add icon menu section to header

6. Add block

EBOOST_0-1713861902068.png

 

 

Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

https://www.eboosttech.net

EBOOST
DONATE ❤❤
tailormade1
Excursionist
18 0 1

For me this also makes the last item in every drawer into a button, whereas I'd like it to be the last parent link only. Any solutions?

https://www.tailormadedesigns.co.uk/
sibouss
Tourist
18 0 3

same here any ideas to fix this @beboosted ?

EBOOST
Shopify Partner
875 236 263

Hi,

You can follow the screenshot below to fix it.

EBOOST_1-1714391547133.png

 

 

Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

https://www.eboosttech.net

EBOOST
DONATE ❤❤