Docs

[gselway]

I have been using posts within the forum to good effect, managing to pinch some code to get the desired transparent header look on my home page. However I do not want this replicated on all my other pages and have no clue how to prevent this.

Please can you help?

Gavin

[gselway]

This reply has been marked as private.

[Thai]

Hi There,

Please add the following CSS:

body:not(.home) .x-navbar {
    background-color: #fff !important;
}

Hope it helps 🙂

[gselway]

Fantastic – Thank you very much!

[Prasant Rai]

You are most welcome. 🙂

[gselway]

A little more help required please.

I need my sub menu (drop down on smaller screens) to be white rather than transparent as it is not easy to read.

I’ve tried to use some code I found on the forums but it has not worked.

Gavin

[Thai]

Hi There,

Try adding the following CSS:

@media (max-width: 979px){
    .x-navbar {
        background-color: #fff !important;
    }
}

Hope it helps 🙂

[gselway]

Thank you.

It works but also causes the transparency to disappear on smaller screen when the sub menu drop down is not selected.

[Jade]

Hi there,

Please update the code to:

@media (max-width: 979px){
    body:not(.home) .x-navbar {
        background-color: #fff !important;
    }
}

Hope this helps.

[gselway]

Hi sorry for the late reply.

The above code makes the mobile sub menu drop transparent again.

I’m trying the keep the header transparent on all devices, however I want the sub menu drop down on mobile (smaller devices) to have a white background.

Thanks Gavin

[Paul R]

Hi Gavin,

Please do this instead

Add this under Custom > Javascript in the Customizer.

jQuery(function($) {
    $('.x-btn-navbar').on( "click touchstart", function() {
          $('.x-navbar').toggleClass('x-navbar-solid');
    });
});

Then add this in custom > css

.x-navbar-solid {
  background-color: #fff !important;
}

Hope that helps

[gselway]

Hi

It’s not quite working.

It is now behaving quite strange. Sometimes the header is transparent, other times it is white. Likewise the sub menu drop down changes between transparent and white.

[Christopher]

Hi there,

Please remove JS and CSS we’ve provided in previous replay.

And add this code:

@media (max-width:979px){
ul#menu-primary-menu-1 {
    background-color: #fff;
    padding: 10px;
}
}

Hope it helps.

[gselway]

Hi,

It’s getting closer, however the drop down now feels like it’s disconnected to the rest of the header.

Upon selection of the drop down I would like the header and sub menu to turn white but then go back to transparent when de-selected, if possible.

Thank you for your help!

[Paul R]

Hi,

Upon checking, it seems to be behaving that way.

Please check – http://screencast.com/t/9B5iUv8iVLiY

[Author]

Posts