Re: Main menu & Product page

Solved

Main menu & Product page

joysa
Shopify Partner
14 0 4

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.

Screen Shot 2024-09-26 at 11.46.29 AM.png

 

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

WhatsApp Image 2024-09-25 at 11.36.32 AM.jpeg

 

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.

Screen Shot 2024-09-26 at 11.59.03 AM.png

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

 

Thank you.

Accepted Solution (1)

namphan
Shopify Partner
1518 191 211

This is an 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;
}
Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? [email protected]

View solution in original post

Replies 10 (10)

namphan
Shopify Partner
1518 191 211

This is an 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;
}
Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? [email protected]
joysa
Shopify Partner
14 0 4

Thank you so much, it worked!

namphan
Shopify Partner
1518 191 211

Hi @joysa,

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

Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? [email protected]

BSSCommerce-B2B
Shopify Partner
1954 562 561

@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:

BSSCommerceB2B_0-1727343065507.png

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

joysa
Shopify Partner
14 0 4

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.

Screen Shot 2024-09-26 at 5.06.44 PM.png

BSSCommerce-B2B
Shopify Partner
1954 562 561

@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 

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

joysa
Shopify Partner
14 0 4

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

BSSCommerce-B2B
Shopify Partner
1954 562 561

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

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

joysa
Shopify Partner
14 0 4

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

Screen Shot 2024-09-28 at 2.58.12 PM.png

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

Screen Shot 2024-09-28 at 3.01.12 PM.png

joysa
Shopify Partner
14 0 4

what is the next step?