Mobile menu not displaying right

Sydney
#1

Izrezak
Izrezak495×583 92.7 KB

this is my menu. I want it displayed correctly in the middle. What I did to make hamburger appear on the right is change cm from 12 to 2. Respectively I gave col 10 to logo. How do I fix this ?

#2

Hello there,

I am sorry to hear that you have run into an issue. I am happy to help out.

I need direct investigaion to find out the problem and suggest the solution. Can you share a link to your website here?

Regards,
Kharis
aThemes Support

#3

https://ibracunovodstvo.com

thank you

#4

Hi,

Thank you for sharing the link as requested.

I did some inspections and you’d add the below simple CSS code to fix the issue.

    @media only screen and (max-width: 767px) {
      #mainnav-mobi {
        min-width: 300px;
      }
    }

Add that code to Appearance > Customize > Additional CSS from dashboard.

Regards,
Kharis
aThemes Support

#5

That did not work. Only gave it width. But offscreen

#6

Hi,

Thank you for trying the code.

I did further checking and you’d replace the code with this one:

    @media only screen and (max-width: 767px) {
      #mainnav-mobi {
        min-width: 300px;
        right: 0;
      }
    }

Regards,
Kharis
aThemes Support

#7

It works. but not exactly how i wanted it. I want it full screen. now it’s only 300px.

#8

Hi,

Thank you for getting back.

Try this code:

    @media only screen and (max-width: 767px) {
      #mainnav-mobi {
        min-width: 100vw;
        right: 0;
      }
    }

Regards,
Kharis
aThemes Support

#9

Thank you. It works like a charm now :smiley: Not sure why we had to say right: 0 though but hey… it’s css :smiley:

#10

We need it since the mobile menu DIV is positioned as absolute inside a relative DIV. When we add right: 0;, it sticks to the right side of the parent relative DIV.

Adding, you can visit this link in case you want to learn more about this.

Regards,
Kharis
aThemes Support