In Dawn Theme, Fix Button To Right Side Of Header On Desktop, and Remove/Make Look Good On Mobile

Store Design
, , ,

Topic summary

Goal: Style the last header menu item in Shopify’s Dawn theme as a right-aligned button on desktop, and make it look good or hide on mobile.

Initial issue: The added CSS pushed the logo off-center on smaller screens and the button overlapped elements on mobile. Screenshots illustrated misalignment and overlap.

Guidance provided:

  • One responder pointed to specific CSS class changes and removing a conflicting style (details shown in images).
  • Another suggested placing custom CSS in theme.liquid (above ), though the OP initially used base.css.

Outcome (resolved by OP):

  • Desktop: The last menu item is styled as a button and right-aligned (li:last-child with margin-left:auto; header grid adjustments). Logo alignment fixed.
  • Mobile: Other menu items are hidden, only the button shows; button text centered; reduced font size and padding via media queries; menu drawer last item hidden to avoid duplication. The OP shared a complete CSS snippet implementing these changes.

Key techniques explained:

  • CSS media queries (min-width/max-width) to separate desktop/mobile behavior.
  • Using li:last-child selectors to target the final menu item.
  • CSS Grid (grid-template-columns/areas) to control header layout.

Status: OP’s issue is solved. A new participant asked where to find the referenced classes and steps in the code editor; no clarification posted yet, so the thread remains open.

Summarized with AI on December 19. AI used: gpt-5.
1

Hello,

I have achieved putting the button on my page with the below code taken from this [Community Post ](http://In%20Dawn Theme, add button to right side of header on desktop, but remove or make look good on mobile https://community.shopify.com/post/2446238).

However, this code is making my logo un-centered when the screen is minimized.

desktop (un-centered logo)

FRA94_0-1712531438301.png
FRA94_0-1712531438301.png935×200 16 KB

mobile (overlapping):

FRA94_1-1712532111592.png
FRA94_1-1712532111592.png608×406 36.9 KB

The website is www.fullridgeadvisors.com. Password is 472024.

Any help would be very much appreciated.

      .header  .header__inline-menu .list-menu > li:last-child > a{

     background: #5B6C8D;

     border-radius: 4px;

     text-decoration: none !important;

     padding-left: 40px;

     padding-right: 40px;

     color: #fff!important;

}

.header  .header__inline-menu .list-menu > li:last-child > a span {

 text-decoration: none;

 color: #fff;

}

body .header__inline-menu .list-menu > li:last-child > a:hover {

 background: #5B6C8D;

}

.menu-drawer__navigation .menu-drawer__menu > li:last-child {

 padding: 0rem;

}

.menu-drawer__navigation .menu-drawer__menu > li:last-child a{

 background: #5B6C8D;

 border-radius: 4px;

 color: #fff!important;

 justify-content: center;

}

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

 }

}

.header--middle-left {

    grid-template-columns: auto 1fr 0fr;

}

.header__inline-menu .list-menu.list-menu--inline {

    width: 100%;

}

.header__inline-menu .list-menu.list-menu--inline li:last-child {

    flex: 1;

    display: flex;

    justify-content: end;

}
2

This is Noah from PageFly - Shopify Page Builder App

I can help you. Please can you provide the website url. Thank you.

Best regards,

Noah | PageFly

3

hi Noah, thank you! the url is www.fullridgeadvisors.com

pw: 472024

4

Hey, Please follow steps to fix your UI

Step one: Find the css class below and make the same change.

Sonya_2025_0-1712552531256.png
Sonya_2025_0-1712552531256.png1986×802 113 KB

Step two: Remove the css style that marked red

Sonya_2025_1-1712552618544.png
Sonya_2025_1-1712552618544.png1881×835 97.8 KB

If you find this information useful, a Like would be greatly appreciated.

1 Like
5

hi @FRA94 You can add code here in file theme.liquid and above tag

Hope my solution will help you resolve the issue.

1 Like
6

Using @Sonya_2025 's tips and adjusting a few things + added a style code for mobile - I achieved both desktop alignment and a nice mobile UI:

FRA94_0-1712679068277.png
FRA94_0-1712679068277.png765×321 17.8 KB

FRA94_2-1712679105557.png
FRA94_2-1712679105557.png1142×873 76 KB

Code I used for anyone that needs it:

/* -------START------------- ADDED BY IS 4.7.24 to make the last menu item a button */

      .header  .header__inline-menu .list-menu > li:last-child > a{
    	background: #5B6C8D;
    	border-radius: 4px;
    	text-decoration: none !important;
    	padding-left: 40px;
    	padding-right: 40px;
    	color: #fff!important;
}
.header  .header__inline-menu .list-menu > li:last-child > a span {
	text-decoration: none;
	color: #fff;
    text-align: center; /*-------------ADDED BY IS 4.9.24 to center mobile button text */
}
body .header__inline-menu .list-menu > li:last-child > a:hover {
		background: #5B6C8D;
}
.menu-drawer__navigation .menu-drawer__menu > li:last-child {
	padding: 0rem;
}
.menu-drawer__navigation .menu-drawer__menu > li:last-child a{
	background: #5B6C8D;
	border-radius: 4px;
	color: #fff!important;
	justify-content: center;
}

    .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;
      margin-left: 30px;

	}
	body .header {
			grid-template-areas: "left-icons heading navigation icons";
			grid-template-columns: 1fr 2fr; /*----------------can be disabled if you want stacked font*/
	}
	body #menu-drawer .menu-drawer__navigation .menu-drawer__menu > li:last-child {
		display: none;
	}
}
/*-------START---------added this style pice for mobile 4.9.24*/
@media screen and (max-width: 989px) {
    /* Targeting mobile devices */
    .header .header__inline-menu .list-menu > li:last-child > a {
        font-size: 80%; /* Adjust font size to 80% */
      padding-left: 20px;
    	padding-right: 20px;
    }
}
/*--------END--------added this style pice for mobile 4.9.24*/

.header--middle-left {
    grid-template-columns: auto 1fr 0fr;
}
.header__inline-menu .list-menu.list-menu--inline {
    width: 100%;
}
.header__inline-menu .list-menu.list-menu--inline li:last-child {
    flex: 1;
    display: flex;
    justify-content: end;
}

/* -------END------------- ADDED BY IS 4.7.24 to make the last menu item a button */
1 Like
7

Thank you! @Sonya_2025 This worked, plus I added some style and margin edits to make it even better with your help. Thanks again!

8

Hi guys!

I’m having the same issues as the OP having added the same code to the bottom of my base.css file on dawn theme. I can’t understand these 2 steps though, what class am i looking for and where am i finding it in edit code?

Thanks in advance!