[Resolved] Primary Navigation

[Sanu Kumar]

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

[Elvin]

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.

[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

[Elvin]

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?

[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.

[David]

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

[Sanu Kumar]

https://www.masteryblogging.com/

[Leo]

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

[Author]

Posts