[Resolved] Rounded navigation

Home Forums Support Rounded navigation

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

    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?

    Best,

    /* 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;
    }
    #53826
    Tom
    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 🙂

    #54349
    Bob

    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?

    Cheers,

    #54350
    Bob

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

    #54445
    Ziggs Stardust

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

    Hope this helps.

    Ziggs

    #54450
    Tom
    Lead Developer
    Lead Developer

    .secondary-navigation is correct – thanks Ziggs! 🙂

    #54483
    Bob

    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!

    #54620
    Tom
    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.