Split mega Menu in header (so it's left and right of the icon)

Oliwie0485
Excursionist
19 0 12

Hello, 

I'm currently having a bit of an issue with my store, where the design isn't quite as I want it to he.

 

Currently, when I enable the mega menu in the header on desktop, it sits a row below the horizontally centered store icon. However, I'd like it to be on the same hight as the icon, split so it's to the left and right of the icon, basically wrapping around it.

 

I'd love if someone could help me with adding the necessary theme code so this is possible. 😀

I'm using the theme Studio Version 10.0.0.

Replies 34 (34)

Made4uo-Ribe
Shopify Partner
5081 1210 1476

Hi @Oliwie0485 ,

Can I give a try? Would you midn to share your URL website? with password if its protected. Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


Oliwie0485
Excursionist
19 0 12

Hey! Thank you for offering help! Unfortunately I'm not able to give you access to the site, since it's confidential. 😕  Is there any other way you can help me out?

Made4uo-Ribe
Shopify Partner
5081 1210 1476

Yo uare still new in the studio theme right? this is what you mean?

Ribe_Dagandara_0-1690314991435.png

the icons inline with the nav?

If its like this: 

then this is the code. 

  1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
  2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
  3. In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
  4. And Save.
.header>.header__search {
        grid-row-start: none;
}
.header__icons {
        grid-row-start: none;
}

I hope it help. 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


Oliwie0485
Excursionist
19 0 12

Appreciate the response! I actually meant dropdown menu, not mega menu. 😅 However, I was actually thinking of designing it like this:

Screenshot 2023-07-25 222147.png

 

 

Though since I have less items, they should be spaced a bit further apart and closer to the logo.

 

Where the menu is to the left and right of the icon, all on one level. What would I have to do to make this possible with the studio theme? I only want this on desktop though, so changes shouldn't have an impact on the collapsible menu on mobile. I've got 4 items that should go in this mega menu, two to the left of the logo, and two to the right.

 

Thanks 😄

Oliwie0485
Excursionist
19 0 12

Like this: 

 

Screenshot 2023-07-25 230616.png

Made4uo-Ribe
Shopify Partner
5081 1210 1476

There is 2 option to make it done. 

1. Can use the psuedo element but the logo wont be clickable. 

2. Need to have write liquid code to add some container to separate the Menu. 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


Oliwie0485
Excursionist
19 0 12

I'd be totally fine with either option, as long as it doesn't impact the mobile hamburger menu drop-down. 😊

 

Would you mind guiding me? Which one is easier to do?

Made4uo-Ribe
Shopify Partner
5081 1210 1476

I come up with this solution. But is only for the Desktop view. 

Ribe_Dagandara_0-1690324127004.png

Codes.

@media only screen and (min-width: 990px){
header.header.header--top-center.page-width.header--has-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
nav.header__inline-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}
nav.header__inline-menu li:nth-child(3) {
    margin-right: 100px;   
}
h1.header__heading {
    position: absolute;
    left: 43%;
}
nav.header__inline-menu li:nth-child(4) {
    margin-left: 130px;    
}
}
Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


Oliwie0485
Excursionist
19 0 12

That seems pretty good, but unfortunately, I ran into some issues. 😕

 

This is how it looks when I copy your code into the base.css:

Oliwie0485_0-1690325549028.png

 

And it seems to break dropdowns as well:

Oliwie0485_1-1690325596862.png

 

Do you have suggestions on how to fix these?

I really appreciate your help so far! 😊

Oliwie0485
Excursionist
19 0 12

Here's a better illustration of how I'd like it to be:

Screenshot 2023-07-26 005558.png

Made4uo-Ribe
Shopify Partner
5081 1210 1476

That selector is base on the demo theme in shopify. As you said you cant share your URL website since its confidential. So what Im doing here are just guessing 😅

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


Oliwie0485
Excursionist
19 0 12

Yes, sorry! I don't want to bother you with this too much. I only have four items in the menu, instead of the 6 in the demo. 

 

Could you make this work? I'll happily tip you something if you can figure this out. 😊 Are the dropdowns working in the demo with the adjustments?

Made4uo-Ribe
Shopify Partner
5081 1210 1476

Yes, we can make some adjustment, If its only four. And also Im not changing the drop down menu only the position of the header. The solution im giving is not the exact one. Its really hard to determind which selector I need to used when Im not seeing the actual design that will work on. If you dont like to share in public the store website. You can Pm me. 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


Oliwie0485
Excursionist
19 0 12

Alright 👍

Made4uo-Ribe
Shopify Partner
5081 1210 1476
  1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
  2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
  3. In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
  4. And Save.

 

@media only screen and (min-width: 990px){
header.header.header--top-center.header--mobile-center.page-width.header--has-menu.header--has-social {
    display: flex;
    justify-content: space-evenly;
}
nav.header__inline-menu li:nth-child(3) {
    padding-left: 250px; 
}
h1.header__heading {
    position:absolute;
}
details-modal.header__search, {
    flex: 1;
    display: flex;
    justify-content: center;
}
nav.header__inline-menu  {
    flex: 3;
    text-align: center;
}
}

 

I hope it help. 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


Oliwie0485
Excursionist
19 0 12

Looks much better! But still breaks the dropdown 😕

Oliwie0485_0-1690330457181.png

It's always the third item in the dropdown list which gets pushed to the right.

 

And for some reason, going to a different page other than home, pushes the icon to the left side:

Oliwie0485_0-1690330729516.png

 

 

Made4uo-Ribe
Shopify Partner
5081 1210 1476

I come up with other solution again. 

@media only screen and (min-width: 990px){
header.header.header--top-center.header--mobile-center.page-width.header--has-menu.header--has-social {
    display: flex;
    justify-content: space-evenly;
}
summary#HeaderMenu-products:before {
    content: "";
    padding-right: 250px;
}
h1.header__heading {
    position:absolute;
}
details-modal.header__search, {
    flex: 1;
    display: flex;
    justify-content: center;
}
nav.header__inline-menu  {
    flex: 3;
    text-align: center;
}
}

Check it and let me know. Maybe I can think another solution again.😁

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


Oliwie0485
Excursionist
19 0 12

Hey,

It fixes the issue with the drop-down menu, but unfortunately the logo still gets pushed to the left when on another page. So only on "Home" it's centered.

Oliwie0485_0-1690333541586.png

 

Made4uo-Ribe
Shopify Partner
5081 1210 1476

Can you insert !important on this code. 

h1.header__heading {
    position: absolute !important;
}

Let see if still moving. In my end I cant see the other pages. Only the page I edit, Cause it will gone everytime the website refresh. 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


Oliwie0485
Excursionist
19 0 12

Still happening, even with your suggested edit....

Oliwie0485_0-1690334773797.png

 

Oliwie0485
Excursionist
19 0 12

@Made4uo-Ribe 

Any idea if you'd be able to fix that?

Made4uo-Ribe
Shopify Partner
5081 1210 1476

Can you try to put this code in the theme.liquid file since it also a header. 

<style>
@media only screen and (min-width: 990px){
header.header.header--top-center.header--mobile-center.page-width.header--has-menu.header--has-social {
    display: flex;
    justify-content: space-evenly;
}
summary#HeaderMenu-products:before {
    content: "";
    padding-right: 250px;
}
h1.header__heading {
    position:absolute;
}
details-modal.header__search, {
    flex: 1;
    display: flex;
    justify-content: center;
}
nav.header__inline-menu  {
    flex: 3;
    text-align: center;
}
}
</style>

place this one before the 

</head>

Ribe_Dagandara_0-1690387974952.png

 

 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


Oliwie0485
Excursionist
19 0 12

I'll try that when I'm back home. 😊

This instead of the extra code in the base.css file? Or in addition to that?

Made4uo-Ribe
Shopify Partner
5081 1210 1476

No, this is not in the base.css file. It on the layout folder.

Ribe_Dagandara_0-1690388648604.png

Lets see if they listen. 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


Oliwie0485
Excursionist
19 0 12

Alright, I just tried it, and while the rest is working, I'm still getting the icon issue on all the pages apart from "Home".

Oliwie0485_0-1690391359386.png

 

It's the same issue as with the code in the base.css file. 😕

Any other ideas you might have?

Made4uo-Ribe
Shopify Partner
5081 1210 1476

Can you save this one and share the preview? I want to check what wrong. Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


Oliwie0485
Excursionist
19 0 12

Sure, hold on.

Oliwie0485
Excursionist
19 0 12

@Made4uo-Ribe I've now published it with the additional <style> code in the theme.liquid file.

Made4uo-Ribe
Shopify Partner
5081 1210 1476

Oh, thats is weird. Can you open your website on other browser? Im using chrome. I open in mozilla and incognito also. It looks good on my side. Check my PM.

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


Made4uo-Ribe
Shopify Partner
5081 1210 1476

Yeah I see it now, They have different name selector. Add this one in the code. Add this one before the 2nd curly bracket }. I didnt think that they are different..🤣

a.header__heading-link.link.link--text.focus-inset {
    position: absolute;
}

 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


Oliwie0485
Excursionist
19 0 12

Cool! That works so far, though it makes the icon invisible on the homepage. Everything else works. On other pages it looks alright. 😊

Oliwie0485_0-1690408303981.png

 

 

Oh, and for some reason, the hover animation for the "products" menu item shows when having the mouse over the logo. Take a look at the website, I published it with the update.

Made4uo-Ribe
Shopify Partner
5081 1210 1476

Yes, It will work the hover animation because the area of the logo still part of it. 

Anyway, Im only playing with CSS. If you like more perfect the design I suggest that visit our store. Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


Oliwie0485
Excursionist
19 0 12

So you won't be able to help me further with this invisible icon on home screen issue? 😕

 

Like I said I'd be happy to tip you once you manage to fix it. 😊

maestroparfum
Visitor
1 0 0

where do you put the code?

dawn theme