Mega menu - help with opacity background on hover of entire website, also animation/transition

Store Design
, , , , , ,
1

Hi all,
@ThePrimeWeb @Made4uo-Ribe @KetanKumar @websensepro

I am new to shopify and am currently in the process of trying to replicate my current squarespace website in shopify. So far its going ok but I am facing few issues as I am not too good with coding (no real knowledge - only some and most of it being a hit and miss scenario with the help of Ai)

I would like your assistance with tweaking my mega menu and few other areas in the website if possible.

We can start with the mega menu

Mega Menu - Shopify

  • Currently there is a hover element which sets the submenus to the far left, I want to line the middle middle or the 2nd from right to left always with the SHOP parent folder. Now in squares space I did a js coding that sets and interval parameter for the submenus and through that once I’ve set the number It remains in the desired position no matter how much you shrink the window. IT would always appear under the relevant parent folder. Eliminates the need for tons of media queries and so on. And has a bit of CSS to tweak the gap between the submenus a bit more till you land to the perfect spot.

I tried to re-use my code from there with the shopify classes but I must be doing something wrong as it’s not doing anything.

  • I would also like to add an opacity effect for the mega menu when its hovered over - So it has an opacity overaly or background colour of 0.8 for opacity and background colour was 255 255 0.6 I think the white one.

  • And lastly Id like to give it a nice transition upon hover

my live website:

www.limited-clothing.co.uk - I’ve done 99% of the website with the exception of the cart being a plug-in and also having help for the mega menu but then I had to tweak it myself with the help of Ai - But from what I know there is an interval parameter for the submenus so you can literally shift them left right. I can share that if needed.

and my shopify one:

https://f424af-2.myshopify.com/

No passwords

So far I am doing the replication almost like for like but with shopify is a bit more difficult for me as you have access to the existing theme codes and I am not sure whether I should write a code to override those or to directly change them and so on.

Your help will be highly appreciated.

Would be great if senior or executive shopify partners join the conversation for this.

Also, would like to apologise in advance if tagging people is not allowed. Please let me know if thats the case.

Regards

1 Like
2

@Makeitperfect

you mean like this view

KetanKumar_0-1710081456329.png
KetanKumar_0-1710081456329.png1920×1080 194 KB

3

Hi,
@KetanKumar
Yes,

The menu in my current website slides down from the top side and the submenus are always aligned with the SHOP parent folder no matter at what width the browser window is :].

Also my website changes into a tablet/mobile interface below 1200px.

My current websites menu is not the best transition/animation effect I want but is good enough to have me tick the box for the mega menu.

I tried replacing the entire mega menu liquid file with an updated code, added new css and nothing worked so decided to reach out :].

Also can you let me know if it’s against the rules to tag people in posts? Dont want to get in trouble :slightly_smiling_face:

Thank you for your reply

4

Hi again,

Any thoughts on this at all :confused: ?

Ive exhausted all possible options and attempts - not sure how else to go about this without breaking the bank

I appreciate your time and effort in this matter, thank you

1 Like
5

@Makeitperfect

oh sorry but both are different code so take some other code change required

6

@KetanKumar

Hi,

Yes, these are different platforms both but since shopify allows access to the backend of stuff such as default theme codes and mega menu codes and all that I was just hoping someone can help me replicate the style of my currently live and performing website.

Would be great if someone can assist with this, with adding the opacity/overlay effect to the mega menu and also some animation styles.

Or at least some sort of guidance as to which areas I need to focus on in order to make this work.

would it be the theme.liquid section + the base.css and I have custom.liquid.css as well created. Or should I be mainly concentrating on the mega-menu.liquid file area. I may not have the names right but I do remember the menu also having a code.

Regards