Is it possible to have an angled background behind the logo in the header?

[core365]

Hi, I’m just working on a site and wondered if it’s possible to have an angled background behind the logo in the header? I’ve quickly put something together to show what I’d like to do (blue angled background behind logo):

I’ll put the URL in a secure note as it’s on a temp link.

Thanks!

[ruenel]

Hello @core365,

Thanks for writing in! To resolve your issue and add a blue background to your logo, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

@media(min-width: 1280px){
  .x-brand.img {
    position: relative;
  }

  .x-brand.img:before {
    content: "";
    display: block;
    background: rgb(0,93,161);
    width: 20em;
    height: 146px;
    position: absolute;
    right: 0;
    top: -30px;
    z-index: -1;
  }

  .x-brand.img:after{
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 146px 100px 0 0;
    border-color: #005ea1 transparent transparent transparent;
    position: absolute;
    right: -100px;
    top: -30px;
    z-index: -1;
  }
}

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

[core365]

Hi, that’s great, it’s spot on! Thank you so much for it!

Thanks for your time and help.

Cheers!

[core365]

Sorry, just one more thing! I’ve changed the blue background behind the logo to white and then change the navbar colour to blue. I wanted to extend the white behind the logo, so I’ve managed to move the angled but over, but I can’t figure out how to make the white block wider! I tried increasing the width in the .x-brand.img:before but nothing happened!

Hope you can help, again!

Thanks!

[thai]

Hi @core365,

Please find this custom CSS:

.x-brand.img::after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 186px 100px 0 0;
    border-color: #fff transparent transparent transparent;
    position: absolute;
    right: -120px;
    top: -70px;
    z-index: -1;
}

And change the right: -120px to right: -100px.

Hope it helps

[core365]

Hi, sorry for the confusion, I’m trying to fill the gap I created with white, to increase the space after the logo!

Thanks!

[christian]

Hey @core365,

Edit the right position of the triangle.

Hope that helps.

[core365]

Hi, I don’t want to close the gap up, I want the white triangle bit to stay where it is and for the space after the logo to be filled in white so there is more of a gap after the logo. I’ve done a rough mockup for you to see:

Thanks!

[rad]

Hi @core365,

Yes, you can increase or decrease the gap by modifying the right value. Try decreasing the value and space will grow like -40px. That’s what we understand of filling it with white, which mean, more space.

Thanks!

[core365]

Ah, it was the .x-brand.img:before ‘right’ I was supposed to be changing, in the screen grab it said the :after one, that’s why it wasn’t working for me! It’s all sorted now, thanks!

Thanks for your time and help!

Cheers!

[Prasant]

You are most welcome.