Monitor Reply

Support

Transparency of mobile menu

Permalink Browser Info Environment October 11, 2018 at 6:24 PM

Hello!

I love this theme! So very easily customized! My only thing I can't find to put in the custom css is the opacity of the drop down mobile menu. My client would like the background to be transparent. Any help you could give would be greatly appreciated!

Type:	Ticket
Status:	Archived

pilipala replied on Oct 12, 2018 at 8:19 am Permalink Reply 1 Attachment

Hi

I have just tested customisation of the submenu background in the design panel, and the CSS from the customisation is being ouputted before the theme's default styles, so the theme styles are overwriting the transparency customisation. We will look into this.

This should be how you would do it (but please note it is not working as explained above):
1. From any page click on the gear icon at the top left of the menu.

2. Then click on "Design" and click on "Customize".

https://documentation.concrete5.org/editors/in-page-editing/the-tool...

You can change individual properties in the menu here, or add custom CSS.

3. Click on "Submenu background" and move the slider to your preferred transparency below the box that says rgba. Then select choose (see attached image).

4. When you have made your changes, click "Save Changes" (bottom right of your page) and then you will be prompted whether the changes are for this page only or the entire site.

5. Click on the pencil icon and choose "Publish Changes".

This is not working, so please just add the custom CSS in the design panel. So instead of selecting "Submenu background", scroll down, and click on the gear icon next to "Custom CSS", add your CSS in the pop up box, click "Save".

For example (adjust rgba value for transparency value and colour):

div.ccm-page .dropdown-menu {
        background-color: #FFF;
   background-color: rgba(255, 255, 255, 0.4);
}

Save changes as above.

Thanks, Jennifer

heyerarc replied on Oct 12, 2018 at 6:59 pm Permalink Reply

Jennifer,

It looks like it works as the menu is sliding down but once it is down all the way the background changes to solid white.

heyerarc replied on Oct 12, 2018 at 6:55 pm Permalink Reply

Thank you so much! I will give that a try right now.

pilipala replied on Oct 12, 2018 at 9:30 pm Permalink Reply 1 Attachment

Hello,

You may need to clear cache and refresh your browser to see the CSS changes, or possibly you may need to adjust the rgba value if you want it more transparent (e.g. try changing the 0.4 to 0.3). Although if you make it too transparent, it will be difficult for people to read the links. I've attached an image of my test site using that CSS so that you can compare your transparency with mine.

If that still doesn't work, you could try this CSS instead:

div.ccm-page .navbar-default .navbar-nav .open .dropdown-menu {
    background-color: #FFF;
    background-color: rgba(255, 255, 255, 0.4);
}

If it still doesn't work for you, you can send us the link to your test site if you want us to look at your CSS. Please note this is a public thread, so if you want to send it privately, please pm or email contact@pilipalawebdesign.com

Thanks,

Jennifer

pilipala replied on Oct 13, 2018 at 6:47 am Permalink Reply

I read your support query again, and realise that you are trying to make your mobile menu transparent, not your drop down menu! Sorry, I misread that initially. That would explain why it didn't work... The CSS below should work. The styles within the media query are for the main menu, and the first styles are for the mobile menu. You can change the rgba values to your preference.

div.ccm-page .navbar-collapse.in {
  background-color: #ffffff;
  background-color: rgba(255, 255, 255, 0.4);
}
div.ccm-page .navbar-fixed-top {
   background-color: #ffffff;
   background-color: rgba(255, 255, 255, 0.4);
}
div.ccm-page .navbar-fixed-top.opaque {
   background-color: #ffffff;
   background-color: rgba(255, 255, 255, 0.4);
}
@media (min-width: 992px) {
    div.ccm-page .navbar-fixed-top {
   background-color: #ffffff;

Viewing 15 lines of 22 lines. View entire code block.

 
div.ccm-page .navbar-collapse.in {
  background-color: #ffffff;
  background-color: rgba(255, 255, 255, 0.4);
}
div.ccm-page .navbar-fixed-top {
   background-color: #ffffff;
   background-color: rgba(255, 255, 255, 0.4);
}
div.ccm-page .navbar-fixed-top.opaque {
   background-color: #ffffff;
   background-color: rgba(255, 255, 255, 0.4);
}
@media (min-width: 992px) {
    div.ccm-page .navbar-fixed-top {
   background-color: #ffffff;
   background-color: rgba(255, 255, 255, 0.6);
}
div.ccm-page .navbar-fixed-top.opaque {
   background-color: #ffffff;
   background-color: rgba(255, 255, 255, 0.9);
}
}

The theme menu styles are located here:

juniper\themes\juniper\css\build\topmenu.less

But I would use this for reference, and change it in "custom CSS" as described above.

You can inspect the CSS using a tool like Firefox page inspector, if you find you want to adjust more styles in the menu:

https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector...
https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to...

Thanks,

Jennifer

heyerarc replied on Oct 16, 2018 at 3:12 pm Permalink Reply

Jennifer,

That did it! Thank you so much for the quick replies and help!

Tracy

pilipala replied on Oct 18, 2018 at 5:20 pm Permalink Reply

You're welcome! Thanks for letting us know that it worked.
Best, Jennifer

ConcreteCMS replied on Nov 2, 2018 at 1:07 am Permalink Reply

Attention: Since there has been no activity on this issue for two weeks, this issue has been automatically archived.

To re-open this issue, reply to this message.

Juniper

Support

Transparency of mobile menu

Issue Reply

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

Request Refund

Code

Delete Post