Is it possible to have an angled edge on the top bar?

Support
#1

Hi, I’m working on a website and I’ve managed to get rounded corners on the top bar, but if it’s possible, it’d be great if one of the edges could be at an angle to match the logo. I’ll put the URL in a secure note as it’s being built on a temp link! I’ll also upload a pic to show what it is I’m hoping to achieve too!

Thanks!

#2

Hello @core365,

Thanks for asking. :slight_smile:

Please add following CSS under X > Theme Options > CSS:

p.p-info {
    position: relative;
    width: 600px;
    height: auto;
}

p.p-info:before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    border-width:55px 50px 0px 0px;
    border-style:solid;
    border-color:#fff transparent transparent #fff ;
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

#3

That’s great! Thank you so much!

Also, one last thing, is it possible to reduce the height of the black band in the topbar without it having to fill the height of the topbar?

Thanks!

#4

Hi @core365,

That’s going to have a misalignment between text and icons. Or do you mean decreasing the height but also center it vertically? If yes, then please change this CSS

.x-topbar .p-info {
    font-size: 16.5px;
    color: #fff;
    letter-spacing: 0.3px;
    margin: -8px auto;
    font-family: "Roboto",sans-serif;
    float: right;
    margin-right: 40px;
    background-color: #000000;
    padding-bottom: 8px;
    padding-top: 10px;
    padding-left: 13px;
    padding-right: 13px;
    border-radius: 0 0 10px 10px;
}

to this

.x-topbar .p-info {
    font-size: 16.5px;
    color: #fff;
    letter-spacing: 0.3px;
    margin: 0px auto;
    font-family: "Roboto",sans-serif;
    float: right;
    margin-right: 40px;
    background-color: #000000;
    padding-bottom: 5px;
    padding-top: 5px;
    padding-left: 13px;
    padding-right: 13px;
    border-radius: 0 0 10px 10px;
}

Thanks!

#5

Hi, Thanks for that, however I wanted the black bar to stay where it is - at the very top of the page - and then the height reducing so that the space under the text is the same as the space above the text (the space is too big at the minute under the text). I’ve uploaded a pic for your reference.

Thanks!

#6

Hi There,

Thanks for writing in again!

Can you please try this CSS and let us know if that helps!

.x-topbar .p-info {
    font-size: 16.5px;
    color: #fff;
    letter-spacing: 0.3px;
    margin: -8px auto;
    font-family: "Roboto",sans-serif;
    float: right;
    margin-right: 40px;
    background-color: #000000;
    padding-bottom: 5px;
    padding-top: 10px;
    padding-left: 13px;
    padding-right: 13px;
    border-radius: 0 0 10px 10px;
    height: 37px;
    line-height: .4;
}

Thanks

#7

Brilliant, spot on!

Thank you!

#8

You’re welcome!

#9

Hi, sorry to be a pain, but the structure of the topbar has changed slightly and is now on the left of the page, so is it possible to have the angled sloping side on the opposite side of the black bar, so its now on the right of it? I’ve uploaded a pic for your reference with how I’d like it - if possible!

Many thanks!

#10

Hi There,

Please find this custom CSS:

.x-topbar .p-info {
    font-size: 16.5px;
    color: #fff;
    letter-spacing: 0.3px;
    margin: -8px auto;
    margin-left: -90px;
    font-family: "Roboto",sans-serif;
    float: left;
    background-color: #000000;
    padding-bottom: 5px;
    padding-top: 10px;
    padding-left: 53px;
    padding-right: 13px;
    border-radius: 0 0 10px 10px;
    line-height: 1.4;
}

And change to this:

.x-topbar .p-info {
    font-size: 16.5px;
    color: #fff;
    letter-spacing: 0.3px;
    margin: -8px auto;
    margin-left: 0;
    font-family: "Roboto",sans-serif;
    float: left;
    background-color: #000000;
    padding-bottom: 5px;
    padding-top: 10px;
    padding-left: 25px;
    padding-right: 13px;
    border-radius: 0;
    line-height: 1.4;
}
.x-topbar .p-info {
    position: relative;
}
.x-topbar .p-info::after {
    width: 0;
    height: 0;
    border-top: 62px solid black;
    border-right: 30px solid transparent;
    content: '';
    position: absolute;
    right: -30px;
    top: 0;
}

Hope that helps and thank you for understanding.

#11

That is excellent, thank you so much!

Sorry, just one other things, is there a way to make it align with the left of the page, so there’s no white gap before it? I’ve tried adding margin-left: -100px; but how it displays varies on the screen size and I’d just like it to be at the very start of the left side on whatever screen size is being used to view it on.

Thanks!

#12

You need to make the topbar absolutely positioned.

.x-topbar .p-info {
    position: absolute;
    left: 0;
}

Please understand that we already went above and beyond the scope of support here. For further enhancements and issues that might arise from the use of the codes here should be forwarded to a third party developer.

Thank you for understanding.

#13

That is fab, thank you! I really appreciate all your help and I understand you have done way more than you usually would and I’m very grateful for it!

Thanks again!

#14

You’re most welcome.

#15

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.