Main menu & Product page

[joysa]

Hello,

Link: shifabynajla.myshopify.com

Password: shifabynajla

The theme is stiletto.

I want the divider under the main menu to be in a different color #B1987C. Please find attached.

Also, the sub menu of collection should be full width. How can I do it?

Also, how can I make the layout of the product page similar to the one below. Currently, in the product page, there are spaces between the product image and the image next to NOTES, I want to make the edges of both images together as in the attached.

Kindly note that these changes require coding, I tried in the customization theme but it didn’t work.

Thank you.

[namphan]

Hi @joysa ,

Please go to Actions > Edit code > Assets > theme.css file and paste this at the bottom of the file:

.header__inner {
    box-shadow: 0 calc(var(--divider-width)* -1) 0 #B1987C inset;
}

[joysa]

Thank you so much, it worked!

[BSSCommerce-B2B]

@joysa ,

Step 1: Go to Admin → Online store → Theme > Edit code

Step 2: Search for the file theme.liquid

Step 3: Add this code before tag

Result:

[joysa]

Thank you, it worked but with a little twist, I need the submenu to appear under the main menu title instead of on the top left.

[BSSCommerce-B2B]

@joysa , I think you should use a mega menu. The reference site is also using a mega menu. This is the tutorial for you: https://www.youtube.com/watch?v=458fPX8buBo

[joysa]

It didn’t work unfortunately. I tried the customization already but no results

[BSSCommerce-B2B]

@joysa , did you try using mega menu? I mean using mega menu first and i will help you with center them.

[namphan]

Hi @joysa ,

If you have any questions, you can contact me directly.
Nice to meet you

[joysa]

Now I am using mega menu plus added your code in theme.liquid. This is what I got.

when I added the code in theme.css instead of theme.liquid, and didn’t enable the mega menu yet. It was better.

[joysa]

what is the next step?