Mobile Nav - Background only on expand

[footnotecreative]

Hello! On the mobile/tablet sizes for this site I want to have a transparent mobile nav only in the burger’s collapsed state, and have #0c2340 background when the menu is expanded.

Is this possible? I tried to get it to work with current css:

.page header.masthead .x-navbar {
background-color: transparent;
}
body:not(.page) header.masthead .x-navbar {
background-color: #0c2340;
}

@media (max-width: 979px) {
div.x-navbar-inner:not(.x-collapsed), div.x-navbar-inner .mobile:not(.x-collapsed) {
background: #0c2340 !important;
}
}

@media (max-width: 979px) {
div.x-navbar-inner:(.x-collapsed), div.x-navbar-inner .mobile:(.x-collapsed) {
background: transparent !important;
}
}

@media (max-width: 979px) {
.x-navbar.x-navbar-fixed-top {
height: auto !important;
}}

[nabeel]

Hi Aaron,

Thank you for reaching out to us. This would require custom CSS and is outside of our support scope, but we will do our best to help you getting started with the customization but we will not be able to implement it. To achieve this, you can add the following code in the Theme Options > CSS:

@media screen and (max-width: 979px) {
   body div.x-navbar-inner .mobile:not(.x-collapsed) {
        background: #0c2340 !important;
        padding: 0 10px;
   } 
}

Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

Hope this helps!

[footnotecreative]

Gotcha! Thanks so much for the information. I will let my client know.

[marc_a]

Hi Aaron,

You’re welcome. If you have any other concerns, feel free to reach us.

Thank you.