Mobile menu dropdown transparency

[BillK]

Hi guys,
Client’s site is having an issue in mobile layout–

When clicking on the menu now, the background on the nav items is transparent-- but I don’t think it was always this way, so not sure if it’s an update thing or not.

Regardless, it would be great if you could make a suggestion for a fix.

Home

Thanks!

[Prasant]

Hello @BillK,

Thanks for asking.

Please add following CSS under X > Launch > Options > CSS to change mobile menu background color:

.x-nav-wrap.mobile.collapse.in {background-color: #3b5f82;}

Thanks.

[BillK]

@Prasant

.x-nav-wrap.mobile.collapse.in {background-color: #3b5f82;}

Thank you. Is this something new that may have been related to theme updates? Just trying to figure out if this was something new or if it was always there (unlikely because the site has been operational for about 2 years).

[paul.r]

Hi,

Kindly remove the code provided above.

This is the one causing the issue.

/*navbar bgd gradien*/
.x-navbar {
height: 80px;
background: /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#395c7f+0,5498bc+100 */
background: #395c7f; /* Old browsers */
background: -moz-linear-gradient(top,  #395c7f 0%, #5498bc 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #395c7f 0%,#5498bc 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #395c7f 0%,#5498bc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#395c7f', endColorstr='#5498bc',GradientType=0 ); /* IE6-9 */

}

Change height: 80px; to height: auto;

Hope that helps.