Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • October 29, 2014 at 4:49 am #342543
    blaircomm

    I want to have a stationary, “sticky,” color section, (where the slider or banner is at the top of the page,) that is anchored to the top menu. Then the rest of the content would slide up underneath it in the way the content now slides under the menu as you scroll down. So I can have some information that is constant at the top of the page, then as menu items are clicked the page navigates, (scrolls,) to that section in the bottom half leaving the menu and the top banner constant. A single page type site navigation.

    How can I anchor, fix the position—in my case 122px from the top and 100% width, a color section to the top menu and have the rest of the content slide up under it as links are selected? I can do this within an HTML/CSS environment, but cannot within the WP Enfold dashboard.

    After looking through the support posts, what I am trying to do is fix a full-width, responsive color section into which I can place content, to the header. So when a user scrolls down, the header and the fixed banner/content are always visible. Is this doable?

    By client demand, I need to fix some content on the top of the page.

    If this is not possible, can I just code a container in “code” element and have it work within Enfold? If I place a code element within the “color section” and fix it at a position, with the color section be fixed or will that not work.

    I hope you can help me as I am on a rush deadline and am stuck on this.

    Thank you.

    • This topic was modified 10 years ago by blaircomm. Reason: Clarification
    October 30, 2014 at 8:25 pm #343643
    blaircomm

    OK. I put a layerslider as the top banner and placed custom CSS within the layerslider interface. That works for that and I have a layerslider in fixed position that holds up in Windows & Mac browsers.

    This takes some of the pressure off, but I’d still like to be able to do it with a color section so I can rapidly add styled content to a fixed position banner.

    Thanks

    November 1, 2014 at 5:30 pm #344635
    Andy

    Hi!

    Could you please post a link to your website? A screensot/mockup of what you want to achieve would be awesome.

    Regards,
    Andy

    November 1, 2014 at 6:55 pm #344686
    blaircomm
    This reply has been marked as private.
    November 3, 2014 at 7:27 pm #345463
    Andy

    Hi!

    if you want to make a color section sticky add this command to it’s CSS class:

    position: fixed;

    Best regards,
    Andy

    November 3, 2014 at 10:42 pm #345582
    blaircomm

    OK. I have big problem with the z-index of my fixed advanced layerslider in Chrome on both Windows and Mac.

    The advanced layerslider has to have a z-index of at least 400 to be viewed above the elements which scroll under it. However, at that index it overlays the drop downs of the main menu. Less importantly it also overlays the faint gray borderlines that demarcate sections, which helps the site. Here is some of the css I have tried to handle it within the “Quick css” field:

    .main_menu {
    z-index: 9999;
    }

    .fixed_header #header {
    z-index: 9999;
    }

    …and many other failed attempts. I have even tried to set the z-index of each color section. I cannot find how to make it all work. There has been no effect at all and the drop downs are still hidden.

    The 400 z-index on the slider is a fix only for a Chrome issue. The header, main menu, all the dropdowns and each of those containers have to then have a z-index above 400. I have tried everything, but can’t get it. There may be another fix by handling why the fixed advanced layerslider needs to have a z-index of 400, but I don’t know what other elements are hiding it as the page scrolls—so it seems like the header and menu fix would be the easiest.

    The site is live, (as of Monday night Los Angeles time,) and we decided to let the Chrome issue ride and hopefully work it out in a few days.

    Can you help?

    Please let me know if I am not making myself clear. The site right now has the banner z-index set at 400 so it does hide the dropdowns and you can see the problem on Chrome.

    Here is a test ink: http://cc-openhealth.com/homepage-2/#top (The site is live and this is a duplicate homepage that I can work on)

    Thank you.

    • This reply was modified 10 years ago by blaircomm. Reason: Clarification and to change link
    November 5, 2014 at 2:47 pm #346518
    Ismael

    Hi!

    You should increase the z-index of the #header container. Please use this:

    .page-id-3720 div#layer_slider_1 {
position: fixed;
height: 300px !important;
display: block;
z-index: 500;
width: 100%;
}

#header {
position: relative;
z-index: 600;
}

.page-id-3720 div#home {
padding-top: 350px;
}

    Regards,
    Ismael

    November 5, 2014 at 9:10 pm #346752
    blaircomm

    Thank you very much for your reply.

    It didn’t work at first and I tried all variations. Then, I made a new page and after getting WP to recognize it as the front page, it all works perfectly. Hopefully, this is a permanent fix.

    I guess you’re a genius!

    Thanks.

    – Michael

    • This reply was modified 10 years ago by blaircomm.
  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Stationary "sticky" banner’ is closed to new replies.