Solved

Menu and cart alignment using Dawn theme

chriscaldwell11
Shopify Partner
15 1 4

Hello!

I am wanting to make the Shopify main menu so that the cart icon is on the same line as the logo and menu items. Additionally, how would I apply a slight drop shadow below the menu bar? Similar to the second screenshot attached. I'm trying to make the menu on Shopify look identical to an HTML/CSS based site as in the second photo. Thank you for any help!

 

menu-float.jpg

 

drop-shadwo.jpg

 

Accepted Solutions (3)
chriscaldwell11
Shopify Partner
15 1 4

This is an accepted solution.

Thank you so much for this help, the shadow works perfectly.

Now the challenge is  to get the menu alignment in Shopify: https://floatron.myshopify.com/ to look like my home site located here:  https://chriscaldwell.com/Floatron-3/index.html

The menus display different alignments. I want them to look like the same and It should work in Safari browser, too. The attached screenshots are from Safari on Mac. The menu alignment on Shopify is way off. Not sure where to fix this. Thank you

 

c.jpgd.jpg

 

 

 

 

View solution in original post

BSSTech-Venture
Shopify Expert
434 104 117

This is an accepted solution.

You can insert the code below to file css

nav.header__inline-menu {
   right: 0;
   transform: translateX(-142px);
}

 Final Result: 

view (15).png

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

View solution in original post

BSSTech-Venture
Shopify Expert
434 104 117

This is an accepted solution.

Insert the below code to your file css: 
 

.header__inline-menu .list-menu--inline {
  flex-wrap: nowrap !important;
}

Final Result: 

image.png

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

View solution in original post

Replies 11 (11)

Kyle_liu
Shopify Partner
27 6 6

1、Edit theme.

2、Add the following content to "Custom CSS":
". header wrapper -- border bottom{
Box shadow: 0px 3px 5px rgba (0, 0, 0, 0.4);
}"

Kyle_liu_0-1714976141515.png

Kyle_liu_1-1714976163915.png

 

 

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to contact me on (liushuaicc@shinetechsoftware.com)

BSSTech-Venture
Shopify Expert
434 104 117

Hi @chriscaldwell11 

Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

chriscaldwell11
Shopify Partner
15 1 4

Hello,

The pw is **QuincyJones11!! 

It's coming along, getting closer (thank you Kyle) and looks fine in Chrome/Edge, but not yet in Safari. Also the media queries need work, too as the headings are too large on my phone

Thanks for any and all help!

 

BSSTech-Venture
Shopify Expert
434 104 117

Please! Can you give me your store link 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

chriscaldwell11
Shopify Partner
15 1 4
BSSTech-Venture
Shopify Expert
434 104 117

I see you fixed point the cart icon is on the same line as the logo and menu items
I'll edit a slight drop shadow below the menu bar for you 

You can try this code by following these steps:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file base.css or theme.css 

Step 3: Insert the below code at the bottom of the file -> Save

sticky-header.header-wrapper.color-scheme-1.gradient.header-wrapper--border-bottom {
    box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2) !important;
}

Final Result:

view (12).png

Hope this help!

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

chriscaldwell11
Shopify Partner
15 1 4

This is an accepted solution.

Thank you so much for this help, the shadow works perfectly.

Now the challenge is  to get the menu alignment in Shopify: https://floatron.myshopify.com/ to look like my home site located here:  https://chriscaldwell.com/Floatron-3/index.html

The menus display different alignments. I want them to look like the same and It should work in Safari browser, too. The attached screenshots are from Safari on Mac. The menu alignment on Shopify is way off. Not sure where to fix this. Thank you

 

c.jpgd.jpg

 

 

 

 

BSSTech-Venture
Shopify Expert
434 104 117

This is an accepted solution.

You can insert the code below to file css

nav.header__inline-menu {
   right: 0;
   transform: translateX(-142px);
}

 Final Result: 

view (15).png

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

chriscaldwell11
Shopify Partner
15 1 4

Thanks so much. I have just a couple more questions. When I begin to shrink the browser window, I need to change the break point or something so the menu doesn't do this weird stacking. Not sure how to figure the break point and what media query to use?

You can see what's happening in the screenshot. Is there a way to prevent this? 

 

menu.jpg

BSSTech-Venture
Shopify Expert
434 104 117

This is an accepted solution.

Insert the below code to your file css: 
 

.header__inline-menu .list-menu--inline {
  flex-wrap: nowrap !important;
}

Final Result: 

image.png

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

chriscaldwell11
Shopify Partner
15 1 4

This worked PERFECTLY. I'm so appreciative for your help! It's fun to see it working properly.

Thank you!