Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1034776

    Hello

    Today i looking for a solution for my problem.

    Enfold is a great Theme for all kind of designs – and no i hope you can also help me

    all of your child theme with menu on top – head this design – https://prnt.sc/ljkesy

    today im looking for a curved fixed header like this

    https://prnt.sc/ljkeuh

    the shape is not a rectangle – its curved or what ever.

    i try to add a header background image – but this was not the solution – because as you can see here https://demo.kmu-betreuung.ch/
    i add this image http://demo.kmu-betreuung.ch/wp-content/uploads/2018/11/test-curved-header.png to the header but you can see white and its not transparent..

    i hope you can understand my problem

    thanks for helping me

    • This topic was modified 6 years ago by emaechler.
    #1034797

    Hey emaechler,
    What you need to do is add a snippet below your header so it looks like your header has a curve to it. In the past this was done with a transparent image with the curve painted on, but you can also do this with css: https://youtu.be/9kkEMHatgZ0
    or svg: https://youtu.be/OjIxscGV-Qg
    Here is a SVG GENERATOR that can help with your shape.

    Best regards,
    Mike

    #1034810

    thanks @mike – and how is the snippet ?

    #1034821

    Hi,
    The first video has a wave.png in the area under the video, it is a example. I took your image and used the tool at Online Background Remover and made your image transparent

    Best regards,
    Mike

    #1034846

    ähm thank you mike for your help – but i dont understand (sry) your “image transparent” is the same as i am still using
    mine: http://demo.kmu-betreuung.ch/wp-content/uploads/2018/11/test-curved-header.png
    yours: http://demo.kmu-betreuung.ch/wp-content/uploads/2018/11/curved-header-v2.png

    But the Result is the same – where it should be transparent, it’s white.

    thats what i dont unterstand – im using a transparent png and its change to a png with white background..

    #1034850

    Hi,
    Sorry, I got mixed up, so for your test site
    I used this css to override your image and background-color:

    .header_color .header_bg {
        background: transparent url(//demo.kmu-betreuung.ch/wp-content/uploads/2018/11/test-curved-header.png) center center no-repeat !important; 
        background-size: cover !important; 
        top: 112px !important; 
    }
    #header.header_color {
        background-color: red !important; 
    }

    to make the curve hang down over the pink content, and have the header a solid red. Notice that the image has to hang down 112px because the dips in the curve are a lot and we are trying to hide the straight line of the header.
    2018-11-18-084009

    Best regards,
    Mike

    #1034855

    aaah now i understand and it works

    many thanks – i forgot the override of the background – thats why it didnt worked out as i planed.

    thank thanks :) now im happy and no longer desperate :)

    happy sunday

    #1034859

    Hi,
    Happy Sunday! :)
    Unless there is anything else we can assist with on this issue, shall we close this then?

    Best regards,
    Mike

    #1034917

    hi,
    i had to update your code but it work – now my only problem is, that the header in the mobile solution is fixed and not scrollable like in the normal solution (computerscreen). but i fixed it with your code from thread https://kriesi.at/support/topic/sticky-header-for-smart-mobile-phone/

    perhaps other user need the same solution :)

    in the end – all my problems have been solved

    thank you mike for your help on a sunday

    p.s you can close this thread

    #1034920

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads under Enfold sub forum and we will gladly try to help you :)

    Best regards,
    Mike

Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘curved fixed header’ is closed to new replies.