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 · Accepted solution]

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!

[namphan]

Hi @joysa,

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

[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 </body> tag

<style>
.navigation__submenu {
    left: 19px!important;
    width: 100vw!important;
    max-width: 100vw!important;
}
.navigation__submenu-list {
    width: 100vw!important;
    border: 1px solid #B1987C;
}
</style>

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.

[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?