[Resolved] Shadow under nav bar

Home Forums Support [Resolved] Shadow under nav bar

Home Forums Support Shadow under nav bar

Viewing 15 posts - 1 through 15 (of 24 total)
  • Author
    Posts
  • #187176
    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?

    #187200
    Tom
    Lead Developer
    Lead Developer

    Here you go:

    .main-navigation {
        box-shadow: 0 2px 2px -2px rgba(0,0,0,.2);
    }
    #281052
    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…

    #281061
    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?

    #281068
    Leo
    Staff
    Customer Support

    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 🙂

    #290770
    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!

    #290771
    Rylan Urban

    (And I tried the CSS posted above)

    #290773
    Leo
    Staff
    Customer Support

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

    #290775
    Rylan Urban

    CSS for both would be great!

    #290776
    Rylan Urban

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

    #290778
    Leo
    Staff
    Customer Support

    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);
    }
    #290786
    Rylan Urban

    mmm nope – Still doesn’t show!

    #290787
    Leo
    Staff
    Customer Support

    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.

    #290791
    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);
    }
    #290793
    Leo
    Staff
    Customer Support

    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);
Viewing 15 posts - 1 through 15 (of 24 total)
  • You must be logged in to reply to this topic.