[churchpathParticipant]

Hi,
I’ve attached a screenshot.

I have the hidden menu ranged to the right on the site.
When it drops down the brown background of the header covers the entire page.

Question:
Is it possible to get it so that it only covers the background of the header and the hidden menu?
I’ve marked on the screenshot where I don’t want the brown background colour.

thank you as always,
T.

[ZeshanMember]

Hi there,

Thanks for writing in! To assist you with this, we’ll first need you to provide us with your URL as stated on the forum entrance page. 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.

Thanks!

[churchpathParticipant]

This reply has been marked as private.

[ZeshanMember]

Hi T,

Thanks for the URL!

This is possible with custom CSS customizations. While customization is outside the scope of support we can provide, I could point you in the right direction with the understanding that it would ultimately be your responsibility to take it from here.

So, to show the background only on the highlighted part, add following CSS under Custom > CSS in the Customizer:

@media only screen and (min-width: 768px) {
  .x-navbar {
    height: 52px;
  }
  .site .x-nav-wrap.mobile {
    position: relative;
    background-color: #686859;
  }
  .site .x-nav-wrap.mobile.in, .site .x-nav-wrap.mobile.collapsing {
    overflow: visible;
  }
  .site .x-nav-wrap.mobile:before {
    content: '';
    width: 9999px;
    height: 100%;
    background-color: #686859;
    left: -25px;
    position: absolute;
  }
}

Thank you!

[Author]

Posts