Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #533077

    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.

    #533434

    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

    #533795

    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!

    #534236

    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

    #534395

    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!

    #534400

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

    #536066

    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

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