What's your biggest current challenge? Have your say in Community Polls along the right column.

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

Solved

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

FRA94
Tourist
7 0 3

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)

FRA94_0-1712531438301.png

mobile (overlapping):

FRA94_1-1712532111592.png

 

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;

}

 

Accepted Solution (1)

Sonya_2025
Shopify Partner
296 36 54

This is an accepted solution.

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

 

Step two: Remove the css style that marked red

Sonya_2025_1-1712552618544.png

 

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

Please let me know if it works by giving it a Like or marking it as a solution!
Feel free to reach out.Get Shopify free trial 1$/mon
 EMAIL ME  Motivate me by  PAY ME

View solution in original post

Replies 7 (7)

PageFly-Noah
Shopify Partner
1317 233 277

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

FRA94
Tourist
7 0 3

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

pw: 472024

PageFly-Noah
Shopify Partner
1317 233 277

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.

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Sonya_2025
Shopify Partner
296 36 54

This is an accepted solution.

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

 

Step two: Remove the css style that marked red

Sonya_2025_1-1712552618544.png

 

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

Please let me know if it works by giving it a Like or marking it as a solution!
Feel free to reach out.Get Shopify free trial 1$/mon
 EMAIL ME  Motivate me by  PAY ME
FRA94
Tourist
7 0 3

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
Visitor
2 0 0

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
Tourist
7 0 3

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_2-1712679105557.png

 

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