Header logo overlaps menu items at some screen sizes

[bearshop]

Hello! It’s mostly fine, but at some screen sizes the logo in our header overlaps with menu items:

At small enough sizes, the menu turns into an accordian dropdown, so it isn’t a problem, but how do I prevent this from happening before that point? Thanks!

[Mustafa_Ali]

Hey @bearshop try this one by follow these steps
Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->before the </body>tag if this code work please do not forget to like and mark it solution

<style>
@media screen and (min-width: 768px) {
.main-header ul.main-menu-items.child-number-1 .logo_section {
    transform: none !important;
    position: relative !important;
}
}
</style>

[tim_tairli]

The solution above puts logo next to the menu rather than at the left window edge, as it was before.

Alternatively, you can use this code to keep the logo where it was, but just reserve space for it to the left of the menu to avoid overlap:

.main-menu-items {
  --logo-width: clamp(120px, 12vw, 150px);

  padding-left: var(--logo-width) !important;
}

.logo_section img {
  max-width: var(--logo-width) !important;
}

There is already similar code in the custome.css, but this one is a bit better