FRA94
April 7, 2024, 11:27pm
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 Solved: In Dawn Theme, add button to right side of header on desktop, but remove or make look good... - Shopify Community ).
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;
}
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
April 8, 2024, 12:50am
3
hi Noah, thank you! the url is www.fullridgeadvisors.com
pw: 472024
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.
1 Like
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
FRA94
April 9, 2024, 4:14pm
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:
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
FRA94
April 9, 2024, 4:16pm
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!
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!
