Hello,
We are adding a custom button to our menu but want it to be placed on the opposite side. Can anyone help us so on desktop and mobile the layout is on the right?
Topic summary
A user is customizing the Dawn theme to reposition a custom button in their main menu, wanting it aligned to the right side on both desktop and mobile.
Solution Provided:
A CSS code snippet was shared to achieve the desktop layout by modifying the header grid structure and positioning the button container to the right using justify-self: flex-end.
Mobile Layout Issue:
The button appears too wide on mobile devices. A secondary CSS solution was suggested to address this by:
- Reducing font weight and padding
- Adjusting letter spacing
- Repositioning the button 20px to the right
The helper noted uncertainty about finding an appropriate icon for the “showroom” button on mobile. Screenshots were provided showing the before and after states of both desktop and mobile implementations.
Make a theme copy, add the button and share a preview link to this theme copy.
Hi Tim, I already made a copy but i’m not sure how to share a preview link with u. Does this work? > Stock Units - Wij Bouwen Modulaire Units
1 Like
Try this code in the Header section “Custom CSS”:
@media screen and (min-width: 990px) {
.header--middle-left {
grid-template-columns: minmax(100px, 1fr) auto minmax(100px, 1fr);
column-gap: 1rem;
}
}
.header__icons {
display: none; /* you seem already have it hidden anyway */
}
.header-showroom-container {
grid-area: icons;
justify-self: flex-end;
}
On mobile the button seems to be to wide, but not sure what can be done…
Maybe this as well? Not sure if there is an icon for showroom 
@media (max-width:480px) {
.header-showroom-btn {
font-weight: 100;
padding-inline: 4px;
letter-spacing: initial;
position: relative;
right: -20px;
}
}
