[Resolved] Primary Navigation

Home Forums Support Primary Navigation

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1466300
    sanu kumar

    How to add border-bottom when hovering to the primary navigation menu with radius 1px and also shadow effect

    #1466324
    Elvin
    Staff
    Customer Support

    Hi,

    You can try this code.

    .main-navigation .main-nav ul li > a:hover {
      border-bottom: 2px solid red;
      box-shadow: 5px 10px 10px rgba(68, 68, 68, 0.3);
      border-radius: 5px;
    }

    Just change the color values to your preference.

    A wise man once said:
    "Have you cleared your cache?"

    #1466338
    sanu kumar

    I am looking to give border bottom and border bottom radius here only: https://ibb.co/b5RCX8V

    Shadow effect should be in the whole primary when hover

    #1466369
    Elvin
    Staff
    Customer Support

    I am looking to give border bottom and border bottom radius here only: https://ibb.co/b5RCX8V

    Shadow effect should be in the whole primary when hover

    To clarify, you want the border bottom radius and the shadow effect on the primary menu’s submenu?

    A wise man once said:
    "Have you cleared your cache?"

    #1466512
    sanu kumar

    Let’s tackle first:

    I want to achieve border-bottom and border-bottom-radius in the drop-down menu when hover and shadow should also be in the dropdown when hover.

    #1467436
    David
    Staff
    Customer Support

    Can you share a link to your site – it will be easier for us to work out the CSS

    #1467496
    sanu kumar
    #1467514
    Leo
    Staff
    Customer Support

    Try this CSS:

    .main-navigation ul ul {
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        overflow: hidden;
        -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
        box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    }

    You can fine-tune the shadow part with this site:
    https://www.cssmatic.com/box-shadow

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.