Curved Secondary Menu

Hi there,

You can modify your CSS to include the secondary navigation:

.site-header, .main-navigation, .widget, .inside-article, .one-container .container, .secondary-navigation {
    border-radius: 5px;
    border: 5px solid #3d3d3d;
}

Let me know if this helps :)

This is great, thanks!! Can we also make the edges rounded on drop down menus and when hovering over items as well?

Give this a shot:

.main-navigation ul ul,
.main-navigation .main-nav ul ul li:last-child a,
.secondary-navigation ul ul,
.secondary-navigation .main-nav ul ul li:last-child a {
    border-radius: 0 0 5px 5px;
}

THIS IS AWESOME! Exactly what I was hoping for, thank you so much!!

Now two more small things and I think we are 100% there!

1. Is it possible to have rounded corners for the menu item that is a different color (corresponding to the page that is open)?
2. Is it possible to round the corners on items that change color when hovering the mouse over them.

Thanks again for the help!!

Not quite sure if I understand here.

All the color options should be in the customizer:
https://docs.generatepress.com/article/colors-overview/

Can you explain a bit more if I misunderstood something?

Sorry I am having trouble explaining this well, so I shared a screenshot. https://snag.gy/R45urB.jpg

See how "Members Home" has square corners? Would it be possible for it to have rounded corners as well?

Try:

.secondary-navigation .main-nav ul li[class*="current-menu-"] > a {
    border-radius: 5px;
}

Brilliant!! Now the final piece...

Round the corners when hovering over an item on the main menu and the secondary menu
Main https://snag.gy/LhbBDv.jpg
and
Secondary https://snag.gy/xRnQ5V.jpg

Try this:

.main-navigation .main-nav ul li a:hover,
.secondary-navigation .main-nav ul li a:hover {
    border-radius: 5px;
}

Thanks for the help, this is exactly what we needed!! You guys rock!!

One last question. So far the main body container has rounded corners and a border from this code:

.site-header, .main-navigation, .widget, .inside-article, .one-container .container {
border-radius: 7px;
border: 1px solid #3d3d3d;
}

But the comment container doesn't. Any idea how I can fix that as well?
https://snag.gy/s8xLOa.jpg

Thanks!

Should be this:

.separate-containers .comments-area {
    border-radius: 5px;
}

You can always use browser inspect tool to find the correct class.

Perfect, thanks again!!

No problem :)