Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • October 6, 2017 at 10:25 am #860929
    thilt

    Hello,
    and thank you for a great Enfold -theme! I’ve enjoyed it a lot :)
    Anyway, now I need some help. I tried to search this forum but could not find a solution for my problem:

    I need a place for a banner widget (AdRotate), to show a big banner above the header area in my Enfold child theme. The banner size is going to be something like 980 x 400 px. Now, where and what kind of modifications should I make to get the page look like this:
    http://www.slmed.fi/test/banner_above_header.png

    October 6, 2017 at 10:57 am #860934
    Nikko

    Hey thilt,

    You might want to use a child theme for that: http://kriesi.at/documentation/enfold/using-a-child-theme/ copy the header.php from the Enfold theme and paste it in the child theme, then insert the banner (or shortcode for the widget) there.

    Best regards,
    Nikko

    October 6, 2017 at 1:12 pm #860995
    thilt

    Thank you Nikko! I’m using a child theme and I managed to get the banner widget to show up on the page. But there’s still a problem.

    Now, when there is a banner placed on the top of the page, my orange navigation bar with logo etc. stays on the same place when when page is scrolled down. When the banner is not placed on the page top, that orange nav/logo bar stays on the top of browser window, stays visible (and shrinks), when page is scrolled down. This latter is how I’d like it to behave also with the banner placed on the page, meaning that the orange top bar scrolls up until it reaches the top of browser window and then stays there shrinked. How is that achieved? Do I have to modify the functions.php -file?

    • This reply was modified 7 years, 8 months ago by thilt.
    October 7, 2017 at 6:22 am #861323
    Rikard

    Hi,

    Thanks for the feedback. Could you post a link to the site in question so that we can take a closer look please?

    Best regards,
    Rikard

    October 7, 2017 at 9:09 pm #861442
    thilt

    Ok, here’s my page. Maybe my explanation before was not so clear, but I guess you can see what I mean when you check the link to the site. The orange header bar should scroll up with the page content, until it reaches the browser window top. And then it should stay sticky there.
    Thanks!

    October 10, 2017 at 2:25 am #862210
    Yigit

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    #header.header-scrolled { top: 0; }

    I personally think the best solution would be using a fixed header instead of a sticky one. You can change it in Enfold theme options > Header >Header Behaviour

    Best regards,
    Yigit

    October 10, 2017 at 8:31 am #862353
    thilt

    Thank you, that made the trick! Only problem here is that when the header jumps on top, it leaves a blank space on the place where it was before (under the banner).
    Is there a fix for that?

    I agree that it would be better to use fixed header in this case… but this sticky header is on the wishlist of my customer, so…

    October 12, 2017 at 6:18 am #863166
    Ismael

    Hi,

    Please replace the code so that it transitions smoothly.

    @media only screen and (min-width: 768px) {
.html_header_top.html_header_sticky #header {
    -webkit-transition: all .4s;
    transition: all .4s;
    top: 406px;
}

.html_header_top.html_header_sticky .header-scrolled-full {
    top: 0 ;
}
}

    Best regards,
    Ismael

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