Alignment Issue with Custom Section and CSS on Desktop (Dawn)

[SyntaxStruggler]

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:

{% for link in linklists.new.links %} {{ link.title }} {% endfor %}

.c-menu2 { display: flex;

}

.c-menu2 {
;
align-items: center;
/*display: none; */

}
}

Best regards,

Bero

[AnneLuo]

Hello, @SyntaxStruggler

You should maintain the same width and paddings as the head section. Can you share your store url?

[SyntaxStruggler]

Thank you for the reply.

www.guudstaf.com

Password: 2808

[AnneLuo]

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

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

[SyntaxStruggler]

The menu is now aligned, but the header has become distorted and narrower.

[diego_ezfy]

@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

[AnneLuo]

The code has been modified and now looks great.