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

Solved

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

SyntaxStruggler
Tourist
9 0 0

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?

 

 

1.png

2.png

3.png

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

Accepted Solutions (2)

diego_ezfy
Shopify Partner
2970 571 922

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;
    }
}

 

diego_ezfy_1-1712130704225.png

 

 


If it helps you please click on the "like" button and mark this answer as a solution!

Thank you.

Kind regards,
Diego

View solution in original post

AnneLuo
Shopify Partner
1255 223 258

This is an accepted solution.

The code has been modified and now looks great.

AnneLuo_0-1712132991685.png

 

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee

View solution in original post

Replies 6 (6)

AnneLuo
Shopify Partner
1255 223 258

Hello, @SyntaxStruggler 

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

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee

SyntaxStruggler
Tourist
9 0 0

Thank you for the reply. 

www.guudstaf.com   

Password: 2808

AnneLuo
Shopify Partner
1255 223 258

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!

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee

SyntaxStruggler
Tourist
9 0 0

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

4.png

 

AnneLuo
Shopify Partner
1255 223 258

This is an accepted solution.

The code has been modified and now looks great.

AnneLuo_0-1712132991685.png

 

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee

diego_ezfy
Shopify Partner
2970 571 922

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;
    }
}

 

diego_ezfy_1-1712130704225.png

 

 


If it helps you please click on the "like" button and mark this answer as a solution!

Thank you.

Kind regards,
Diego