Modify Responsive menu with rounded corners

A frequently asked question on our forums is how to modify the menu of the Responsive theme with rounded corners. The effect can be achieved easily by using border-radius. This handy tool is great for testing out various px values.

The original CSS for the menu is as follows:


.menu {
	background-color: #585858;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#585858), to(#3d3d3d));
	background-image: -webkit-linear-gradient(top, #585858, #3d3d3d);
	background-image: -moz-linear-gradient(top, #585858, #3d3d3d);
	background-image: -ms-linear-gradient(top, #585858, #3d3d3d);
	background-image: -o-linear-gradient(top, #585858, #3d3d3d);
	background-image: linear-gradient(top, #585858, #3d3d3d);
	clear: both;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#585858, endColorstr=#3d3d3d);
	margin: 0 auto;
}

To modify the menu with rounded corners all we need to do, is add the following to our custom CSS.


.menu {
	border-radius: 10px;
}

Now we have rounded corners, but upon hover, you’ll find that the corners of the first menu item are square. We can change this behavior with:


.menu > li:first-child:hover,
.menu > li:first-child:hover a {
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
}

Depending on how you have your menu set up, you may also need this CSS for the first menu item:


.menu > li:first-child,
.menu > li:first-child > a {
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
}

There you have it. A very easy way to customize your Responsive Theme with rounded corners.

Guide: Adding custom CSS

Categories: