Start a new topic

How to Change Mobile Device Menu to Non-Transparent

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




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

txt

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!

Login or Signup to post a comment