Sticky Menu & Drop Shadow?

  • Resolved Engine44

    (@engine44)


    5 years ago

    This is an interesting problem – at least for me.

    The web page is: http://workinglivingtravellinginireland.com/gort

    Using a plugin I was able to make the nav menu sticky

    Now I would like to add a drop shadow under the menu when it is sticky. The drop shadow should extend the width of the page.

    Unfortunately that’s not what I have yet. The drop shadow is only appearing on the right and is visible at all times.

    Here is the current css: 

    #masthead-widgets .widget_nav_menu ul.menu:after {
    bottom: -6px;
    box-shadow: 0px 6px 6px -6px rgba(0, 0, 0, .25) inset;
    content: "";
    height: 6px;
    position: absolute;
    width: 100%;}

    Any suggestions, please. Thanks.

Viewing 3 replies - 1 through 3 (of 3 total)
  • George Appiah

    (@gappiah)

    5 years ago

    Does this work for you? 

    #masthead-widgets .widget_nav_menu:after {
    bottom: -6px;
    box-shadow: 0px 6px 6px -6px rgba(0, 0, 0, .25) inset;
    content: "";
    height: 6px;
    position: absolute;
    width: 100%;
}

    Note that I didn’t touch your drop-shadow style: I only changed the selector, applying the style immediately after the widget_nav_menu container instead.

    Thread Starter Engine44

    (@engine44)

    5 years ago

    Thanks. Getting closer. Now the drop shadow appears. But it is visible when the nav menu is not in its sticky postion and disappears when the nav menu is in its sticky position. Just the reverse of what I would like.

    Thread Starter Engine44

    (@engine44)

    5 years ago

    I found a code that works:

    .menu.sticky-element-original.element-is-sticky:after {
    bottom: -6px;
    box-shadow: 0px 6px 6px -6px rgba(0, 0, 0, .25) inset;
    content: "";
    height: 6px;
    position: absolute;
    width: 100%;
    left: 0px;}

    Thanks for your input. It did help.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Sticky Menu & Drop Shadow?’ is closed to new replies.