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

[FRA94]

Hello, 

I have achieved putting the button on my page with the below code taken from this Community Post .

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

desktop (un-centered logo)

mobile (overlapping):

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;

}

[PageFly-Noah]

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

[FRA94]

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

pw: 472024

[PageFly-Noah]

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

<style>
.header__heading, .header__heading-link{
    justify-self: flex-start !important; 
}
</style>

Hope my solution will help you resolve the issue.

[Sonya_2025 · Accepted solution]

Hey, Please follow steps to fix your UI

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

Step two: Remove the css style that marked red

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

[FRA94]

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

[laurence1]

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!

[FRA94]

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:

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 */