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 ?
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
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
That did not work. Only gave it width. But offscreen
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
It works. but not exactly how i wanted it. I want it full screen. now it’s only 300px.
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
Thank you. It works like a charm now Not sure why we had to say right: 0 though but hey… it’s css
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