Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • April 1, 2018 at 3:16 pm #935770
    govus

    Hello! Sorry if this question is beyond the scope of support…

    Would it be possible to attach a PNG image just below header to make it look “customized”, for example this page:
    http://www.dap.fi/

    That site does not seem to be using wordpress though, but could it be done in Enfold? Big thanks.

    April 1, 2018 at 5:51 pm #935798
    Mike

    Hey govus,
    You should be able to do this by adding a div just below

    <div class='header_bg'></div>

    in the /wp-content/themes/enfold/includes/helper-main-menu.php file.
    This is the div:

    <div class="top-edge"></div>

    this is the css they used:

    .top-edge {
    background-image: url(https://www.dap.fi/images/dap/top-edge.png);
    height: 21px;
    width: 100%;
    background-repeat: repeat-x;
    margin-bottom: -21px;
    position: relative;
    z-index: 100;
    background-position: center;
}

    This is the result:
    2018-04-01_110446
    By adding this css, the div will not show when the header is transparent, before scrolling:

    .av_header_transparency .top-edge {
display: none !important;
}

    Best regards,
    Mike

    April 1, 2018 at 6:15 pm #935800
    govus

    Amazing, thanks!

    Now I was thinking, if I wanted the whole header to have a background image/pattern with a bottom edge like that. Could I prepare the image in photoshop, then add a div above the header and have the PNG act as header? I guess responsivity would be an issue then… You have the best support!

    April 1, 2018 at 6:30 pm #935804
    Mike

    Hi,
    You could do that or you could use the PNG as the background and set the header as transparent so only the png was visible, this should solve for mobile.

    Best regards,
    Mike

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