Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • November 10, 2015 at 7:20 am #533077
    mercury9

    Hello. I was wondering what you would recommend would be the best way to add a triangle / spiky / zig zag pattern to the bottom of the sticky header of enfold. To get an understanding of what it is I am trying to do, please see the picture on this page in the beginning of the thread: http://stackoverflow.com/questions/13774952/making-jagged-triangle-border-in-css

    Thank you for your help in accomplishing this.

    November 10, 2015 at 4:47 pm #533434
    Yigit

    Hi mercury9!

    Please try adding following code to Quick CSS in Enfold theme options under General Styling tab

    .header_bg:after {
content: " ";
    display:block;
    position: relative;
top:0px;left:0px;
    width:100%;
    height:36px;
    background: linear-gradient(#2B3A48 0%, transparent 0%), linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 linear-gradient(45deg, #272220 33.33%, #2B3A48 33.33%) 0 0%;
    background: -webkit-linear-gradient(#2B3A48 0%, transparent 0%), -webkit-linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 -webkit-linear-gradient(45deg, #272220 33.33%, #2B3A48 33.33%) 0 0%;
    background: -o-linear-gradient(#2B3A48 0%, transparent 0%), -o-linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 -o-linear-gradient(45deg, #272220 33.33%, #2B3A48 33.33%) 0 0%;
    background: -moz-linear-gradient(#2B3A48 0%, transparent 0%), -moz-linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 -moz-linear-gradient(45deg, #272220 33.33%, #2B3A48 33.33%) 0 0%;
    background-repeat: repeat-x;
    background-size: 0px 100%, 9px 27px, 9px 27px;
}

    Cheers!
    Yigit

    November 11, 2015 at 1:02 am #533795
    mercury9

    I do not know if it is because I did not indicate that the version of enfold I am doing this in is utilizing the demo import of the ecommerce theme, but your code did not work. The site is currently localhost, but this is what happened when I added your code: http://awesomescreenshot.com/02f5e9u317 only a line that appears at the top of the header which is not what I am trying to do. If you could use the shop demo here: http://kriesi.at/themes/enfold-shop/ and then tell me the right code, I would appreciate it. Thank you!

    November 11, 2015 at 5:30 pm #534236
    Yigit

    Hi!

    Please change your code to following one 

    .header_bg:after {
    content: " ";
    display: block;
    position: relative;
    top: 84px;
    left: 0px;
    width: 100%;
    height: 36px;
    background: linear-gradient(#2B3A48 0%, transparent 0%), linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 linear-gradient(45deg, #272220 33.33%, #2B3A48 33.33%) 0 0%;
    background: -webkit-linear-gradient(#2B3A48 0%, transparent 0%), -webkit-linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 -webkit-linear-gradient(45deg, #272220 33.33%, #2B3A48 33.33%) 0 0%;
    background: -o-linear-gradient(#2B3A48 0%, transparent 0%), -o-linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 -o-linear-gradient(45deg, #272220 33.33%, #2B3A48 33.33%) 0 0%;
    background: -moz-linear-gradient(#2B3A48 0%, transparent 0%), -moz-linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 -moz-linear-gradient(45deg, #272220 33.33%, #2B3A48 33.33%) 0 0%;
    background-repeat: repeat-x;
    background-size: 0px 100%, 9px 27px, 9px 27px;
}

    And then set your header background color to “#2B3A48” and it should look like this – http://i.imgur.com/EbkcVCO.png. Then you can go to Enfold theme options > Advanced Styling and edit “Main menu links”

    Cheers!
    Yigit

    November 11, 2015 at 10:08 pm #534395
    mercury9

    Hi again Yigit. Thanks for your reply. I was able to replicate what you did with that code and it looks great but please look at this: http://awesomescreenshot.com/0fd5ed2ge5

    For 1: If I wanted to eliminate that dark area ( #272220 ) and allow the zig zag / spikes overlap the avia slider directly, is that possible? If so, how?

    For 2: Is there a way to reduce the height of those 2 separator lines that are beside the cart icon so that they do not pass beneath the spiky / zig zag design? I hope I am explaining this well.

    For 3: Notice that after this customization, the links and logo are no longer centered in the header anymore. Notice now that there is more “blue background above the logo and menu links than below. How to correct this please?

    If you could break down the code corrections in to parts so that I and other who see this understand, that would be fantastic. Thank you so much for your assistance!

    November 11, 2015 at 10:25 pm #534400
    mercury9

    Also, it appears to break on mobile: http://awesomescreenshot.com/0d65ed3u22

    November 15, 2015 at 12:29 pm #536066
    Josue

    Hey!

    We’re going to need to see the site live in order to help you, please let us know through this topic when you upload it somewhere.

    Regards,
    Josue

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.