Tagged: header, Header Background
-
AuthorPosts
-
November 17, 2018 at 7:04 pm #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
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 5 years, 11 months ago by emaechler.
November 18, 2018 at 12:07 am #1034797Hey 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,
MikeNovember 18, 2018 at 2:41 am #1034810thanks @mike – and how is the snippet ?
November 18, 2018 at 5:31 am #1034821Hi,
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 transparentBest regards,
MikeNovember 18, 2018 at 2:29 pm #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.pngBut 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..
November 18, 2018 at 3:42 pm #1034850Hi,
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.
Best regards,
MikeNovember 18, 2018 at 3:54 pm #1034855aaah 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
November 18, 2018 at 4:30 pm #1034859Hi,
Happy Sunday! :)
Unless there is anything else we can assist with on this issue, shall we close this then?Best regards,
MikeNovember 18, 2018 at 10:50 pm #1034917hi,
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
November 18, 2018 at 11:23 pm #1034920Hi,
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 -
AuthorPosts
- The topic ‘curved fixed header’ is closed to new replies.