Adding a blurred shadow to drop-down menu

  • Resolved Roland Rolson

    (@rolandrolson)


    2 years, 11 months ago

    Hello!

    Is it possible to modify the CSS custom code in order to get some blurred shadow displayed under the drop-down menu, please?

    This is the primary menu located on the top bar, which already has a nice shadow, that separates it from the rest of the page. When this menu is open, it has no transition between the page contents and its own sub-items. That makes it hard to tell what is the menu and what is the page. In my case, there is only one item that drops down, and that is “Home”. When clicked, it covers the page content and having a shadow around it would be a nice touch to the theme. Thank you for your support!

    The page I need help with: [log in to see the link]

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

  • Hi @rolandrolson,

    You can try adding the below code in Additional CSS via Admin Dashboard > Appearance > Customize > Additional CSS to apply the required effect to the sub-menu.

    @media only screen and (min-width: 1025px) {
    .main-navigation ul ul {
        box-shadow: 0 1px 5px rgb(0 0 0 / 10%);
    }
}

    Do let us know if you have any other queries.

    Regards,

    Thread Starter Roland Rolson

    (@rolandrolson)

    Thank you very much for your reply, the code works perfectly!

    Hi @rolandrolson,

    We are glad we could help.

    Please feel free to reach out if you need any assistance further.

    Best regards,

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Adding a blurred shadow to drop-down menu’ is closed to new replies.