Weird double menu and missing rows

[lisacole1]

https://baggator.org/
I’ve used this code to force the menu to stay open on smaller screen sizes but I’m getting a double menu - the burger and the open, please can you help.

@media (max-width: 800px) {
body .x-navbar .x-btn-navbar {
display: table;
margin: 0 auto;
}

body .x-navbar .x-nav-wrap.desktop {
     display: none !important;
}

body .x-navbar .x-nav-wrap.mobile {
     display: block !important;
}

}

Also on the front page, built in Cornerstone there is an entire row missing when I look at the site on a smaller screen. I can’t see anywhere where I have hidden it for particular screen sizes. Any insight would be appreciated! Thank you

[tristup]

Hi @lisacole1,

Thanks for reaching out.
I have checked your website but didn’t find the issue you mentioned. Can you please provide any screenshot marked with the issue or any video that helps us to recognize the problem? The section not visible in small devices, please check if that is hidden using Hide During Breakpoints options.

Hope it helps.
Thanks

[lisacole1]

Hi, second issue solved, I made a stupid mistake! Sorry to bother you about that.

I still have a double menu showing. Are you please able to help with that?

[prakash_s]

Hello @lisacole1,

It seems that you are using custom CSS code and that custom CSS code is causing the issue. I would suggest you remove the custom CSS code from the Theme Option —>CSS.

body .x-navbar .x-nav-wrap.mobile {
    display: block !important;
}

After removing the custom CSS code through the browser inspector it works fine.

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps.
Thanks

[lisacole1]

Thanks, I want to hide the hamburger menu and keep the menu open at all times. The site needs to be accessible to people who are not used to the internet and they won’t know what the hamburger does. I took the code from the forum but I can’t see how to hide the hamburger menu. I’ve tried interrogating the element inspector but I just don’t see it.

[prakash_s]

Hello @lisacole1,

In case if you want to hide the hamburger menu then you need to add this custom CSS under X/Pro—>Theme Option—>CSS.

@media (max-width: 980px)
body .x-navbar .x-btn-navbar {
    display: none;
}
}

Please note that the given code would hide the hamburger menu icon and the output would be like this. Please have a look at the given screenshot below.

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps.
Thanks