Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
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.
.main-navigation ul ul.sub-menu, .main-navigation ul ul li:last-of-type a:hover { border-radius: 0 0 10px 10px; }Awesome thanks :)
For sure :)