Home>Support>Rounded corners on drop down sub menus

Rounded corners on drop down sub menus

By Gem Ceiling, 10 years ago. Last reply by Andrew Misplon, 10 years ago.
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;
}

URL: http://www.gembuildingspecialists.co.uk/

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 10 years, 2 months ago Andrew Misplon
    Hi, I Work Here

    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;
}
  2. 10 years, 2 months ago Gem Ceiling

    Awesome thanks :)

  3. 10 years, 2 months ago Andrew Misplon
    Hi, I Work Here

    For sure :)

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More