Hi! I’ve tried something with css and chevron but I want the angle in the middle a little bit more rounded, just like the logo. How can I do that? This is the code i’ve used right now:

#chevron-creme {
position: relative;
text-align: center;
padding: 0px;
margin-bottom: -40px;
margin-top: -40px;
height: 0px;
width: 100%;
z-index: 1 !important;
background-color: transparent;
}
#chevron-creme:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 51%;
      background: #f5f3ed;
      transform: skew(0deg, 6deg);
}
#chevron-creme:after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      height: 100%;
      width: 50%;
      background: #f5f3ed;
      transform: skew(0deg, -6deg);
}

Thanks!!

Hi thanks! Something happend, the radius is only not in the middel. Maybe thats because it is still rotated? See link! And I want the circle on the other side, so downstairs in stead of upstairs.

Now we’re working on it.. I would like to try two options. The half circle as described above and 2nd option: in stead of a circle a sort of rounded arrow. Something like this:

https://ibb.co/q9pBhdZ

Is this screenshot visible? This is photoshopped… The arrow is a little bit the same as one angle of the logo. Hope you understand me!

Thanks a lot!!!

Hi! Is it possible to not only change the angle, but make it round in stead of diagonal? Something like this:

Hope you can help me!

Thanks!!

Only problem is that the top bar when header is transparant and not scrolled and not got a specific css code, the top bar is grey but I only want it grey when scrolled.

See private data for link where the header is transparant but I didn’t add a specific color for the top bar. When you’re not scrolling the top bar is #eeeeee. It must be #eeeeee everywhere, rgba(0, 141, 156, 0.5) when header is transparant and on a few pages the top bar is another color which I got specific page ID css codes for.

This is my css code now:

.page-id-2#top .av_header_transparency #header_meta, .page-id-305#top .av_header_transparency #header_meta {
background-color: rgba(0, 141, 156, 0.5) !important;
}

.page-id-121#top .av_header_transparency #header_meta, .page-id-249#top .av_header_transparency #header_meta, .page-id-332#top .av_header_transparency #header_meta, .page-id-563#top .av_header_transparency #header_meta, .page-id-571#top .av_header_transparency #header_meta, .page-id-582#top .av_header_transparency #header_meta, .page-id-574#top .av_header_transparency #header_meta {
background-color: rgba(0, 158, 83, 0.5) !important;
}

.postid-338#top .av_header_transparency #header_meta, .postid-538#top .av_header_transparency #header_meta, .postid-541#top .av_header_transparency #header_meta, .postid-544#top .av_header_transparency #header_meta, .postid-547#top .av_header_transparency #header_meta, .postid-550#top .av_header_transparency #header_meta, .postid-553#top .av_header_transparency #header_meta, .postid-556#top .av_header_transparency #header_meta, .postid-559#top .av_header_transparency #header_meta {
background-color: rgba(0, 158, 83, 0.5) !important;
}

.page-id-308#top .av_header_transparency #header_meta {
background-color: rgba(97, 72, 127, 0.5) !important;
}

.postid-414#top .av_header_transparency #header_meta, .postid-425#top .av_header_transparency #header_meta, .postid-431#top .av_header_transparency #header_meta, .postid-434#top .av_header_transparency #header_meta {
background-color: rgba(97, 72, 127, 0.5) !important;
}

#header_meta {
background-color: #eeeeee !important;
}

Itsn’t there a css code for sticky header, just like there is a code for transparency header?

Hope you can help me!

Thanks a lot!

Sorry, is it possible to change the color of the top bar when you scroll down? I made the top bar sticky!

Thanks a lot!

Hi there, sorry but it’s not working. On the portfolio page you need to see the same color green color in top bar as the other page. See private content.

What do you think is the right code?

Hi! How does it work with portfolio items? This is all not working:

.page-id-123#top #header_meta {
background-color: rgba(0, 158, 83, 0.7) !important;
}

.post-id-123#top #header_meta {
background-color: rgba(0, 158, 83, 0.7) !important;
}

.post-123#top #header_meta {
background-color: rgba(0, 158, 83, 0.7) !important;
}

.post-123 #top #header_meta {
background-color: rgba(0, 158, 83, 0.7) !important;
}

Thanks!

• This reply was modified 5 years, 3 months ago by jannnnnneke.

I want the bottom border to be not just a line, but a line with radius. For example the pink element here: https://css-tricks.com/the-shapes-of-css/

To make it easy for myself I thought I design a .png file which I can put as background image in content section and overlap the section above, but:

When I use png as background in content section, the transparent area is white in stead of transparent. The blue overlay of the section above is overlapping the backgroundimage from section above. When I use png as background in 1/1 column the image is overlapping the section above, but the element is not full widht.

See the link of test page I sent in last message and login info earlier.

Am I clear? Thanks a lot!

If you need login info. See private content. Site is on maintenance mode :)