Navbar CSS

DreamStreetPortraits

Hello,

Today I have been making some changes to my navigation bar ( opacity, border-radius, etc.). The way it looks now on https://www.dreamstreetportraits.com/ is quite close to how I want it. However, one detail bugs me. The last child in the 'about us' and 'contact us' seems to be slightly longer, and is the only one with a border-radius.

I have tried for hours to find the root cause, to no avail. I would like all of them to be shaped like the last children (with smooth corners) and the same size on hover. This detail is not too obvious. Looking closely you can see that the 'privacy policy' and 'WhatsApp' buttons are different than the ones above.

My apologies for my messy (to put it mildly) code. There is a lot of guesswork going on. I have attached a photo that shows the issue.

I just want to look smooth, clean, uniform, and slightly transparent! Thank you!

Hikin' Mike

@DreamStreetPortraits said:
My apologies for my messy (to put it mildly) code. There is a lot of guesswork going on. I have attached a photo that shows the issue.

That's putting it mildly...lol!

Since I'm not 100% sure what you're trying to do, I think I see two issues that if you change, that may get you closer. This is part of your code here:

.sm-user-ui .yui3-menu-children,
.sm-user-ui .yui3-menu-label {
    border-width: 5px;
    border-radius: 5px;
    min-width: 200px
}

.yui3-menu.yui3-menu-vertical.yui3-menu-notouch.sm-user-ui.yui3-menu-open {
    border-radius: 50px;
    background-color: #fff;
    opacity: .8
}

The fist set is you have border-width: 5px. Change that to margin: 5px;.

The second set would to decrease your border-radius: 50px; from 50 to 5px.

DreamStreetPortraits

Thanks for your reply Hikin' Mike.

By attempting to explain the problem better I finally (after hours) found the problem. I know I was doing a terrible job explaining. Not to mention my newbie code can be rather unsettling haha! I thought the problem was with the last child when it was really with everything above it.

.sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-sublinks-separator .yui3-menu .yui3-menu-label {
border-style: solid;
}

changed to

.sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-sublinks-separator .yui3-menu .yui3-menu-label {
border-style: hidden;
}

Thank you for looking, Mike!

Until next time ⛾
Happy New Year!