[Resolved] Rounded navigation

[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;
}

[Tom]

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 🙂

[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,

[Bob]

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.

Ziggs

[Tom]

.secondary-navigation is correct – thanks Ziggs! 🙂

[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!

[Tom]

Hi Bob,

That’s because the Secondary Nav add-on has its own CSS file 🙂

[Author]

Posts