Solved

Mega menu

blosom
Shopify Partner
15 1 0

Hello everyone.

last few days i am unable to move from problem in mega menu.

 

I am using dawn theme and website is blosomlab.sk

I would like to move menu links/buttons to same position as its "section name"
see:

blosom_0-1703695245475.png

blosom_1-1703695394751.png

 

I am not able to find an working solution. The requiment is that it should stay in same position on all width.

I can do "offset"-margin, but it will be fixed. I was hoping that it would be possible to somehow "connect" it to same possition as object in upper menu grid

blosom_2-1703695714701.png

 

My personal toughts are, that if it would be possible to create same grid in this white section of menu, it would be done. But i cant find way how.

 

Thank you all in adwance!

 

password: dawnn

 

 

Accepted Solution (1)
techlyser_web
Shopify Partner
1019 192 193

This is an accepted solution.

Hi @blosom 
you have to add one more media query for that ,You can add code by following  these steps 

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid


<style>

      @media screen and (max-width: 1024px){
             .mega-menu .mega-menu__list--condensed {
                 display: block;
                 padding: 0 35rem;
             }
      }

</style>
 

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

View solution in original post

Replies 7 (7)

techlyser_web
Shopify Partner
1019 192 193

Hello @blosom 
password?

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
blosom
Shopify Partner
15 1 0

Hello, i am sorry i forgot there is password ->dawnn

MansoorAb
Shopify Partner
12 0 1

Try adding 
padding: 0 42rem;
to following in component-mega-menu.css

.mega-menu .mega-menu__list--condensed {
display: block;
padding: 0 42rem;
}

MansoorAb_0-1703697614433.png

 





techlyser_web
Shopify Partner
1019 192 193

Hello @blosom 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid


<style>

  .mega-menu .mega-menu__list--condensed {
     padding: 0 42rem;
 }
@media screen and (max-width:1024px){
     .mega-menu .mega-menu__list--condensed {
         padding: 0 35rem;
     }

}

</style>

Tablet View

techlyser_web_0-1703699444751.png

 

Desktop View

techlyser_web_1-1703699559228.png

 

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
blosom
Shopify Partner
15 1 0

Hi @techlyser_web  and @MansoorAb , thank you for prompt reply ! Love it

feedback:
after @MansoorAb  recomendation, menu bar (white one) is good on wide screen but about 990 - 1100px it will stay at "last position" and dont move more to left. Also div in which is text/buttons will shrink and 4.th from bottom wil be divided into two lines. It yould be nice to have it in one line

after @techlyser_web solution it looks better, but between 1024 - 1220 px menu is stuck on padding 42 (i guess) and in this range is fixed.

 

blosom_0-1703710370762.png

 

MansoorAb
Shopify Partner
12 0 1

@blosom Thanks for the feedback. 

techlyser_web
Shopify Partner
1019 192 193

This is an accepted solution.

Hi @blosom 
you have to add one more media query for that ,You can add code by following  these steps 

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid


<style>

      @media screen and (max-width: 1024px){
             .mega-menu .mega-menu__list--condensed {
                 display: block;
                 padding: 0 35rem;
             }
      }

</style>
 

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com