[Resolved] Shadow under nav bar

[Rylan Urban]

How to add the shadow that you have under your floating nav bar? I would like to appear under the regular bar also, not just when it is floating.

Do you have CSS?

[Tom]

Here you go:

.main-navigation {
    box-shadow: 0 2px 2px -2px rgba(0,0,0,.2);
}

[Christoph]

I’d like that kind of shadow under my navigation bar but all the time. Like on this site: https://meta.discourse.org/

In case it matters: my nav bar is set to sticky…

[Christoph]

I’m so proud I almost figured this out myself. Using chromes inspector, I noticed that the class of nav bar changes when it becomes sticky. So I added not only

.main-navigation {
    box-shadow: 0 4px 2px -2px rgba(0,0,0,.2);
} 

but also

.main-navigation.is_stuck.navigation-stick {
    box-shadow: 0 4px 2px -2px rgba(0,0,0,.2);
}

But I’m not sure if this is the most elegant and robust solution. Let me know.

Also, I don’t like the result quite as much as that on https://meta.discourse.org/. Changing the size of the shadow doesn’t seem to do the trick. Maybe the colour?

[Leo]

Hi Christoph,

That CSS should work 🙂

Looks like that site is using box-shadow: 0 2px 4px -1px rgba(0,0,0,0.25);.

Hope this helps 🙂

[Rylan Urban]

What about for spectrumsolar.allgreenmarketing.com ?

I’ve tried:

.sticky-navigation .navigation-clone.navigation-stick {
box-shadow: 0px 1px 1px 1px rgb(216,148,10);
}

.sticky-navigation {
box-shadow: 0px 1px 1px 1px rgb(216,148,10);
}

.sticky-navigation .navigation-clone .navigation-stick {
box-shadow: 0px 1px 1px 1px rgb(216,148,10);
}

But none seem to work!

[Rylan Urban]

(And I tried the CSS posted above)

[Leo]

sorry are you trying to add shadow to the main or sticky navigation? or both?

[Rylan Urban]

CSS for both would be great!

[Rylan Urban]

(I got it working for main already) Just need sticky

[Leo]

Looks like it’s already working just not aggressive enough. Try this:

.main-navigation.navigation-clone {
    -webkit-box-shadow: 55px 10px 5px 0px rgba(163,50,163,1);
    -moz-box-shadow: 55px 10px 5px 0px rgba(163,50,163,1);
    box-shadow: 55px 10px 5px 0px rgba(163,50,163,1);
}

[Rylan Urban]

mmm nope – Still doesn’t show!

[Leo]

Looks like it’s being overwritten by this CSS you’ve already added:

.main-navigation.navigation-clone {
    box-shadow: 0 2px 2px -2px rgba(0,0,0,.2);
}

Might want to try just changing the color for that one.

[Rylan Urban]

I don’t see that one?

The only ones I have in my custom CSS with rgb code are:

.site-info {
    box-shadow: 0px -2px 2px 2px rgb(216,148,10);
    margin-top: 2px;
}

.site-footer {
    box-shadow: 0px -2px 2px 2px rgb(216,148,10);
    margin-top: 2px;
}

.site-header {
    box-shadow: 0px 1px 1px 1px rgb(216,148,10);
}

.main-navigation {
    box-shadow: 0px 1px 1px 1px rgb(216,148,10);
} 

.main-navigation.navigation-clone {
    -webkit-box-shadow: 55px 10px 5px 0px rgba(216,148,10);
    -moz-box-shadow: 55px 10px 5px 0px rgba(216,148,10);
    box-shadow: 55px 10px 5px 0px rgba(216,148,10);
}

.sticky-navigation .main-navigation.navigation-clone {
    -webkit-box-shadow: 55px 10px 5px 0px rgba(216,148,10);
    -moz-box-shadow: 55px 10px 5px 0px rgba(216,148,10);
    box-shadow: 55px 10px 5px 0px rgba(216,148,10);
}

[Leo]

ahh you are right that’s the default.

Something is going on with the values you added though it’s showing “invalid property value” to me for some reason…

Can you try this exact same values and just to see if it works?

-webkit-box-shadow: 10px 10px 5px 0px rgba(60,67,194,1);
-moz-box-shadow: 10px 10px 5px 0px rgba(60,67,194,1);
box-shadow: 10px 10px 5px 0px rgba(60,67,194,1);

[Author]

Posts