How to create drop shadow under Nav menu when menu is sticky?

[Engine44]

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.

UPDATE: I made a change to the css. Basically, I just moved the drop shadow code to a new selector:

.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%;}

Now the drop shadow only appears when the nav menu is in the sticky location.

It still doesn’t go across the whole page.

[Erik_J]

@Engine44

It still doesn’t go across the whole page.

I think you forgot its horizontal coordinate; try set its left position to zero, the 100% width will match the sticky parent.

[PaulOB]

You would need left:0 added to that rule to make it start at the left side of the menu otherwise the left is auto which is at the far right.

.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: 0;
}

It won’t stretch the whole viewport screen width though as the nav is only 1080px wide max. If you want it full width then try adding this:

#menu-gort-cycle{
width:100%!important;
left:0!important;
}

[Engine44]

Thanks very much. That got it.