Search for: Log In Free Support [Resolved] Primary Navigation Home › Forums › Support › Primary Navigation This topic has 7 replies, 4 voices, and was last updated 4 months, 4 weeks ago by Leo. Viewing 8 posts - 1 through 8 (of 8 total) Author Posts September 30, 2020 at 6:54 pm #1466300 sanu kumar How to add border-bottom when hovering to the primary navigation menu with radius 1px and also shadow effect September 30, 2020 at 7:16 pm #1466324 ElvinStaff 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?" September 30, 2020 at 7:35 pm #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 September 30, 2020 at 8:15 pm #1466369 ElvinStaff 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?" September 30, 2020 at 11:33 pm #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. October 1, 2020 at 7:54 am #1467436 DavidStaff Customer Support Can you share a link to your site – it will be easier for us to work out the CSS Documentation: http://docs.generatepress.com/ Adding CSS: http://docs.generatepress.com/article/adding-css/ October 1, 2020 at 8:21 am #1467496 sanu kumar https://www.masteryblogging.com/ October 1, 2020 at 8:28 am #1467514 LeoStaff 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 Documentation: http://docs.generatepress.com/ Adding CSS: http://docs.generatepress.com/article/adding-css/ Author Posts Viewing 8 posts - 1 through 8 (of 8 total) You must be logged in to reply to this topic. Log In Username: Password: Keep me signed in Log In