I have rounded corners throughout the site except on the drop down sub menus although the highlighted items in the sub menus are rounded!
How do i round the corners in the sub menu please?
in custom css i have
#masthead { border-radius: 10px 10px 10px 10px; box-shadow: rgba(0, 0, 1, 0.75) 0 5px 10px, rgba(0, 0, 1, 0.75) 5px 0 10px, rgba(0, 0, 1, 0.75) -5px 0 10px; margin-bottom: 10px; } #main-slider, #main { border-radius: 10px 10px 10px 10px; box-shadow: rgba(0, 0, 1, 0.75) 5px 0 10px, rgba(0, 0, 1, 0.75) -5px 0 10px; } #colophon { border-radius: 10px 10px 10px 10px; box-shadow: rgba(0, 0, 1, 0.75) 5px 0 10px, rgba(0, 0, 1, 0.75) 0 -5px 10px, rgba(0, 0, 1, 0.75) -5px 0 10px; margin-top: 10px; margin-bottom: 10px; }
and in css stylesheet editor i have
.div_text_shadow { color: rgb(255,255,255); font-size: 50px; background-color: rgb(85,147,194); text-shadow: rgb(204,204,204) 0 1px 0px, rgb(201,201,201) 0 2px 0px, rgb(187,187,187) 0 3px 0px, rgb(185,185,185) 0 4px 0px, rgb(170,170,170) 0 5px 0px, rgba(0,0,0,0.0980392) 0 6px 1px, rgba(0,0,0,0.0980392) 0 0 5px, rgba(0,0,0,0.298039) 0 1px 3px, rgba(0,0,0,0.14902) 0 3px 5px, rgba(0,0,0,0.2) 0 5px 10px, rgba(0,0,0,0.2) 0 10px 10px, rgba(0,0,0,0.0980392) 0 20px 20px; } .menu { border-top-left-radius: 10px; border-bottom-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; } .menu > li:hover, .menu > li:hover a { border-top-left-radius: 10px; border-bottom-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; } .entry-content img { border-radius: 20px 20px 20px !important; } .main-navigation { border-top-left-radius: 10px; border-bottom-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; }
Hi Gem
You can fix/change this with some custom CSS. If you navigate to Appearance > Custom CSS, you’ll get our custom CSS editor. Just add the following code.
Awesome thanks :)
For sure :)