[Resolved] Rounded navigation

Home Forums Support Rounded navigation

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #53748

    Hi there

    I’ve had a request to round the edges of the boxes around the navigation, but I can’t seem to get it to work. I think it’s the border-radius command (or its webkit etc variants), but I am not sure

    i) if this is the right track
    ii) if so, which classes in the child CSS to amend. I’ve played with the below, but to no effect.

    Can this be done?


    /* attempting to round the edges of the nav bar*/
    .main-navigation ul a li {
        border-radius: 25px;
      -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    .inside-navigation {
        border-radius: 25px;
    Lead Developer
    Lead Developer

    You’re on the right track.

    The first piece of code is this:

    .main-navigation {
          -moz-border-radius: 15px;
          -webkit-border-radius: 15px;
          border-radius: 15px;

    That would be it, except that now we have to round only the left side of the first menu item.

    .main-navigation .menu li:first-child a {
          -webkit-border-top-left-radius: 15px;
          -webkit-border-bottom-left-radius: 15px;
          -moz-border-radius-topleft: 15px;
          -moz-border-radius-bottomleft: 15px;
          border-top-left-radius: 15px;
          border-bottom-left-radius: 15px;

    That should do it.

    Let me know πŸ™‚


    Great, thanks. I played around a bit and got it to work how <i>the boss</i> wanted it, including on the hover lists and search. I didn’t seem to need the first straight “.main-navigation…” part and anyways, this made the left and right edges rounded, which wasn’t required. So all good!

    There’s always one more question of course… I can’t find the CSS in style.css for the secondary nav (albeit I am editing a custom/child css), which I have added after upgrading. Could you tell me the class name(s) of the secondary nav?



    oops, that should have been for <i>, showing my age perhaps.

    Ziggs Stardust

    I had a look at mine with Chrome Inspector. It is showing as a class called .secondary-navigation

    Hope this helps.


    Lead Developer
    Lead Developer

    .secondary-navigation is correct – thanks Ziggs! πŸ™‚


    Got it, thanks. I still can’t see it in the main css file, but did see it there in the inspector… have changed and all looks good. Thanks!

    Lead Developer
    Lead Developer

    Hi Bob,

    That’s because the Secondary Nav add-on has its own CSS file πŸ™‚

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.