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

[Justin34]

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]

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

[Justin34]

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

[EBOOST]

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]

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

[Justin34]

Worked perfectly 😄 Thanks so much!

[loreen_sawatzky]

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]

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

[loreen_sawatzky]

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]

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]

Hi @tshark,

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

[tshark]

my store is www.sharkeysmobiledetailing.com

Its public so no protect pass

[EBOOST]

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

[tshark]

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]

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

[tshark]

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]

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]

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]

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]

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

[julienamoseeds]

It works perfectly

thanks!

[cupofjeaux]

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:

 (sorry for the pixellation, it was an old cached preview) 

Current:

[EBOOST]

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

[shy13]

Also solved here:

https://community.shopify.com/c/shopify-design/dawn-theme-add-button-in-header/td-p/1598309

[hashwear]

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

[meepmediauk]

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]

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]

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.

[sibouss]

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]

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

[shiremyrrh]

Is there a way to change the spacing between the button and the other menu items?

[EBOOST]

Hi, 

Could you share store URL? I will help to check then suggest a solution for you.

[tailormade1]

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?

[sibouss]

same here any ideas to fix this @beboosted ?

[EBOOST]

Hi,

You can follow the screenshot below to fix it.