Docs

[ruby whittaker]

Hi
the 2 most common things people say and I agree with
1. LOVE x them ( on my 4th lienece)
2. Sorry fro being thick

ok simple problem .I think you will be bale to help me with.

I have modified the CSS so that I can include SVG image in the header bar.

.x-navbar { background-color:#fff;
background-image: url(http://www.withpencils.com/wp-content/uploads/2016/08/header-svg.svg);
background-size: cover;
height: 0;
padding: 0; /* reset */
padding-bottom: calc( 20% * 3 / 4);
background-repeat: no-repeat;}

This works Ok. However on a mobile I need the header image to be deeper – what code do I need to add to my CSS ( please the whole section so I can just copy and paste)

this is the site http://www.withpencils.com/. try it ona mobile and you will see the blue header cuts through the logo

Thanks in advance
Ruby

[Rue Nel]

Hello There,

Thanks for writing in! You can update the code and use this instead:

.x-navbar { 
  background-color:#fff;
  background-image: url(http://www.withpencils.com/wp-content/uploads/2016/08/header-svg.svg);
  background-size: cover;
  height: 0;
  padding: 0; /* reset */
  padding-bottom: calc( 20% * 3 / 4);
  background-repeat: no-repeat;
}

@media(max-width: 979px){
  .x-navbar {
    background-size: contain;
  }
}

Hope this helps. Please let us know how it goes.

[ruby whittaker]

thansk thats great

[Christian]

You’re welcome, Ruby. Glad we could help. 🙂

[Author]

Posts