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

[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:

[shy13]

Also solved here:

https://community.shopify.com/topic/1598309

[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.

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

[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?

[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]

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

{% 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

[sibouss]

same here any ideas to fix this @beboosted ?

[EBOOST]

Hi,

You can follow the screenshot below to fix it.

[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.