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 d…

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-chi…

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

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.

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 nee…

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-c…

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: .he…

Also solved here: https://community.shopify.com/topic/1598309

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 “galle…

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; pad…

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

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

Store Design

sibouss April 23, 2024, 5:09am 29

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?

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	156	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	171	September 19, 2024
How do I change the style of button in the header from pill shaped to rectangle? Store Design css	7	76	August 7, 2023
How to can you make 2 separate menus in the header? Store Design menu	40	641	January 7, 2025
How can I change the navigation menu style to buttons in Dawn theme? Store Design menu , design , customizations	6	291	November 29, 2024

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

Related topics