CSS: Trying to make rounded corners on main nav using images

CM1
1

How do I get the images in my css for navigation rounded corners to show up on my pages?

Am trying to get the drop down menus to looks like see www.neep.org main nav.

Images in CSS are imported into CM1 file but I think the Percussion css is overriding my css. Could this be right or is it something else?

2

Hi Carrie,

Could share with us the CSS code you are using to style your navigation menus? Be sure to wrap them in `` tags so that they display properly on here. This will help us look into what could be causing your trouble.

Thanks,
Nathaniel

3

The navigation widget does not allow you to get into the markup to add the images the way the navigation is being done on that website. This kind of markup would require a Rich Text or HTML widget.

Have you looked into the border-radius CSS property? It’s widely supported in all current versions and allows you to specify a radius on each corner.
border-radius: 10px 10px 10px 10px;

That sets corner radius’ in the following order:

  1. top left
  2. top right
  3. bottom right
  4. bottom left

This property is not supported in older versions of IE, though, which will prevent the older browsers from seeing the nice corners.
You can read up on it more here: https://developer.mozilla.org/en-US/d…

4

Hi Carrie, an easy way to implement the border-radius property would be to attach them to the first and last list elements of your sub-menu:

#main_nav li ul li:first-child {
border-radius: 5px 5px 0 0;
}

#main_nav li ul li:last-child {
border-radius: 0 0 5px 5px;
}

5

In addition to Jon’s suggestion here you can target just the ul with the radius. If you are worried or need to support older IE versions, this might be interesting: http://css3pie.com/

6

Wow thanks guys! Jonathan I used your code above and it worked like a charm when I inserted this into the overwrite CSS field in the templates. None of my edits in the actual css sheet took.

Thanks!

7