Hi Stephanie,
My apologies for the delay in responding.
I have tried the same on my mobile device, but the menu was not transparent. Can you please provide some more details for us:
1) is that a Modern Team or a Modern Communication Site?
2) could you please go to Site Contents > ShortPoint Dashboard > Theme Builder > Modern > Utilities > Import/Export and send us the exported code of your website settings? You can simply paste it here or attach it as a text file.
Looking forward to your reply,
Kind Regards,
Oksana Alsoshyna
Hi Oksana,
The site is a Modern Communication site.
I've attached the txt file with the exported code.
Regards,
Stephanie
Hi Stephanie,
After importing your settings to my environment, I had the same result as you reported. Nevertheless, after resetting the customization settings to default, the mobile site menu was displayed on a white background, the way it should be. I'm checking now what settings we can change. Will update you soon.
Kind Regards,
Oksana
Hi Stephanie,
Thank you for raising this topic with us. My name is Mihai Petre, I'm with the ShortPoint development team and Oksana has forwarded this to me for help.
Please add the following Custom CSS code in the ShortPoint Theme builder, at the bottom of everything else you have already added, in order to fix the look and feel of the menu on mobile devices:
@media screen and (max-width: 480px) {
.ms-Nav, .Files-leftNav {
background-color: white !important;
}
}
Thank you and hope this helps!
Kind regards,
Mihai Petre
Thank you, Mihai. The code you provided worked perfectly.
Regards,
Stephanie
Glad to be of help. Thank you for helping us improve our product!
Hello Mihai,
I'm having this problem on tablet devices, too. Can you let me know what code I might need to add to correct the transparent menu on a tablet device?
If you need a screen shot, I will have to attach it tomorrow (Thursday, 11/7) when I have access to the tablet again.
Regards,
Stephanie
Hi Stephanie!
Thanks for reaching out again.
In order for us to target tablet devices as well we need to increase the value of the max-width property in the code I gave you above.
These values are called media query breakpoints and they allow us to target different devices according to the pixel width of their screen. For tablets that value is generally 768px. It will also include devices which are smaller, like phones. Can you please let me know if updating the code to the following works for you?
@media screen and (max-width: 768px) {
.ms-Nav, .Files-leftNav {
background-color: white !important;
}
}
Sincerely,
Mihai
Hi Mihai,
This worked perfectly. :) Thank you for the quick response!
Regards,
Stephanie
You're quite welcome! Have a wonderful day and looking forward to hear from you if you have any more issues.
Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.
Get started todayThousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.
Get started Learn more
Try ShortPoint now
Stephanie Case
I have looked at a page created using ShortPoint elements on a mobile device (tested on iPhone and Android phones) and cannot get the top menu to open without a transparent background. It's very difficult to see the menu items after it opens. The page has been created for a Modern site.
Is there something I'm missing in the Theme builder that would enable the menu to be less transparent and, therefore, easier to read?
I've attached picture of the page but it's really hard to see the menu on it (which is why I'm asking my question, obviously!) :)
Regards,
Stephanie Case