How can I fix overlapping menu items in the Dawn theme?

Store Design
1

i am having an issue with overlapping menu items. i want the menu and the logo to sit inline . can anyone help?

1 Like
2

@dripstore1
Hello,
Yes I will Help You
Can You Please Share Your Store URL

3

@dripstore1

Welcome to Shopify Community.
Kindly share your Store URl.

So that, i can help you.

Thank you.

4

This is PageFly - Free Landing Page Builder. I would love to provide my recommendations for your store based on 6 years of providing solutions for about 100.000 active Shopify merchants.

you can use this css code to do that, find the class that contains that content, for example:
class {
display: Inline ;
}

If you feel my answer is helpful, like it or mark it as a solution. Let me know if you have any questions.

Best regards,

PageFly

5

currently the edit i want to make is on a theme which is not published can
you provide an email for me to send you access to the preview of my
updated theme?

6

currently the edit i want to make is on a theme which is not published
can you provide an email for me to send you access to the preview of my
updated theme?

7

https://dripstoreww.com/

8

https://dripstoreww.com/

9

@dripstore1 ,

Share the theme name where the issue there…

my Id is below give me the store access…

10

you can see issue here.

https://dripstoreww.com/

11

@dripstore1 ,

header.header.header--top-left.page-width.header--has-menu {
    display: flex;
    padding: 22px 0 9px 19px;
}

nav.header__inline-menu {
    padding: 0 43px;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid

12

thankyou sir on pc the edit is correct now however on mobile all my icons sit to the left? can you help to make the adjustment without this?

13

@dripstore1

@media only screen and (min-width: 749px) {

header.header.header--top-left.page-width.header--has-menu {
    display: flex;
    padding: 22px 0 9px 19px;
}

nav.header__inline-menu {
    padding: 0 43px;
}
}

Replace Css

1 Like