Shopify themes, liquid, logos, and UX
Hello,
I came across some code for a custom section and custom CSS in dawn theme. While it looks good on mobile, I’ve encountered an alignment problem on desktop when changing size. Specifically, the content aligns too far to the left.
My goal is to have it in line with the rest of the elements on the left side of the page. Could you please provide guidance or suggestions to address this issue?
Custom CSS:
.c-menu2 {
display: flex;
overflow-x: auto;
margin-top: 10px;
white-space: nowrap;
align-items: center; /* Align items vertically in the center */
max-width: calc(100% - 40px); /* Set maximum width */
margin-left: auto; /* Auto left margin */
margin-right: auto; /* Auto right margin */
}
.c-menu2 .header__menu-item {
margin-right: 10px;
color: #121212; /* Adjust text color */
text-decoration: none; /* Remove underlines from links */
font-size: 14px; /* Adjust font size if needed */
font-weight: bold; /* Adjust font weight if needed */
}
@media only screen and (max-width: 990px) {
.c-menu2 {
flex-wrap: nowrap;
margin-bottom: 4px;
overflow-x: scroll; /* Allow horizontal scrolling on mobile */
padding: 0 10px; /* Add padding to prevent items from being too close to the edge */
max-width: 100%; /* Reset max-width for mobile */
justify-content: flex-start; /* Align items to the left on mobile */
margin-left: 1px; /* Adjust left margin for mobile */
margin-right: 1px; /* Adjust right margin for mobile */
}
}
@media only screen and (min-width: 990px) {
.c-menu2 {
justify-content: flex-start; /* Align items to the left on desktop */
margin-left: 20px; /* Adjust left margin for desktop */
margin-right: auto; /* Reset right margin for desktop */
max-width: 1000px; /* Limit the maximum width on larger screens */
width: 100%; /* Set width to 100% */
overflow: hidden; /* Hide overflow */
}
}
Custom LIQUID:
<div class="c-menu2">
{% for link in linklists.new.links %}
<a class="header__menu-item list-menu__item link link--text focus-inset" href="{{ link.url }}">{{ link.title }}</a>
{% endfor %}
</div>
<style>
.c-menu2 {
display: flex;
}
.c-menu2 {
;
align-items: center;
/*display: none; */
}
}
</style>
Best regards,
Bero
Solved! Go to the solution
This is an accepted solution.
@SyntaxStruggler@SyntaxStruggler, do this to fix it in 20 seconds:
1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:
@media only screen and (min-width: 990px){
[id] .c-menu2 {
justify-content: flex-start;
max-width: 1200px;
margin: 0 auto;
position: relative;
left: -10px;
}
}
If it helps you please click on the "like" button and mark this answer as a solution!
Thank you.
Kind regards,
Diego
This is an accepted solution.
The code has been modified and now looks great.
Hello, @SyntaxStruggler
You should maintain the same width and paddings as the head section. Can you share your store url?
You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code to the head tag
<style>
.shopify-section-group-header-group {
margin: 0 auto;
text-align: center;
}
.c-menu2 {
margin-left: 0 !important;
width: 1200px !important;
max-width: unset !important;
}
.c-menu2 .header__menu-item {
padding-left: 0 !important;
margin-right: 20px !important;
}
</style>
Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!
The menu is now aligned, but the header has become distorted and narrower.
This is an accepted solution.
The code has been modified and now looks great.
This is an accepted solution.
@SyntaxStruggler@SyntaxStruggler, do this to fix it in 20 seconds:
1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:
@media only screen and (min-width: 990px){
[id] .c-menu2 {
justify-content: flex-start;
max-width: 1200px;
margin: 0 auto;
position: relative;
left: -10px;
}
}
If it helps you please click on the "like" button and mark this answer as a solution!
Thank you.
Kind regards,
Diego
Find Global Growth Opportunities For Your Business with Shopify AcademyLearn how to exp...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025