Docs

[BradleyB]

Hi,

I want to change the navbar and mobile menu dropdown background colors only when they are collapsed. How can I target them with css only after the navbar button has been pressed? Thanks so much! –

B

[Rupok]

Hi there,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[BradleyB]

This reply has been marked as private.

[Jade]

Hi Bradley,

Please add this code in the JS customizer:

(function($){

    $( ".x-btn-navbar" ).on( "click", function() {
       if ( $( ".collapse.in" ).length ) {
            $('.x-navbar-inner').css('background', 'transparent');
       } else {
            $('.x-navbar-inner').css('background-color', '#4688d7');
       }
    });

})(jQuery);

Then add this in the custom CSS:

@media (max-width: 979px) {
   .masthead.masthead-inline {
        position: absolute;
        width: 100%;
    }
}

Hope this helps.

[BradleyB]

Thank you so much! That worked! However, there is a new problem now: on mobile, the sliders and tops of all the pages are being cut off my the navbar. Please help! Any suggestions would be greatly appreciated! Thanks so much!

[BradleyB]

Never-mind –

I fixed it by adding a min-width to the css you provided. Thanks!

[Jade]

You’re most welcome.

[BradleyB]

Sorry for the back and forth, but I think I jumped the gun.i just rechecked the site on an iPhone, and he problem is still there – the header is overlapping he slider and page content on pages without sliders. Any ideas? Thanks again!

[Paul R]

Hi,

Kindly change the css code provided from

@media (max-width: 979px) {
   .masthead.masthead-inline {
        position: absolute;
        width: 100%;
    }
}

to this

@media (max-width: 979px) {
   .home .masthead.masthead-inline {
        position: absolute;
        width: 100%;
    }
}

Hope that helps.

[BradleyB]

I changed the code, but it did not solve the problem. Any other ideas? Thanks!

[Rupok]

Hi there,

Looks like you have another issue related to the header and make sure you are not mixing up the two issues – https://community.theme.co/forums/topic/nav-button-on-desktop-pushing-slider

Thanks!

[BradleyB]

Hi,

Thanks for the reply. Theses are two separate issues. The problem here is that the (uncollapsed) header bar covers the slider on iphones. On mobile, I want the header(uncollapsed). The other issue is related to the header menu when it is collapsed.

How can I make the slider sit exactly under the header on mobile? Thanks so much!

[Jade]

Hi there,

My apologies but the issues seem to be getting mixed up and confusing.

I tried checking on your site again but the previous request you had on this thread which was making the header transparent and change the background color when collapsed isn’t there anymore.

The code Paul provided should work as I have tested it as well.

Kindly carefully follow the suggestions and make sure you are not missing any opening or closing curly braces {} in the custom CSS.

[BradleyB]

Thank you so much, sorry about the confusion That worked.

[Jade]

You’re most welcome, Bradley.

[Author]

Posts