Nav Bar Children Container CSS Customization

DreamStreetPortraits

Hello!

I've been attempting to find the correct selector to make CSS changes to the nav bar children container on my sight monalightstudios.com.

As you can see from the website homepage, when a user selects About Us or Contact Us from the nav bar and hovers over the nav bar child labels (such as Our Story & Mission and Our Contribution), a gray rectangle appears. I have had no luck pinpointing the correct selector to make changes. I know it can be changed in the theme settings to another color, but that's all.

Does anyone have any ideas?

Hikin' Mike

This?

@media only screen and (max-width: 8020px) {

  .sm-user-ui .yui3-menu-vertical .yui3-menu-children {
    margin-top: -20.5px;
    margin-left: 10.5vw;
    background: rgba(255,255,255,0.3);
    border: solid 2px #6196b5;
    border-radius: 10px;
  }

}

I will say that max-width: 8020px must be a typo.

DreamStreetPortraits

Hi, Mike! Thanks for your reply. The code above is some adjustments I made to the container. If I remove the above code the problem persists. I'm talking about the hover effect on the labels of the child container. It's the same color as the primary color of the theme. I don't want the hover effect and can't find how to remove it.

DreamStreetPortraits

Also, while I have you do you know how to make the mobile dropdown menu transition down slowly?

Hikin' Mike

@DreamStreetPortraits said:
Hi, Mike! Thanks for your reply. The code above is some adjustments I made to the container. If I remove the above code the problem persists. I'm talking about the hover effect on the labels of the child container. It's the same color as the primary color of the theme. I don't want the hover effect and can't find how to remove it.

I miss understood. This should do it:

.sm-user-ui.yui3-menu-vertical .yui3-menu-item:hover,
.sm-user-ui .yui3-menu-vertical .yui3-menu-item:hover,
.sm-user-ui.yui3-menu-horizontal > .yui3-menu-children > .yui3-menu-item .yui3-menu-item:hover,
.sm-user-ui .yui3-menu-horizontal > .yui3-menu-children > .yui3-menu-item .yui3-menu-item:hover,
.sm-user-ui.yui3-menu-vertical a.yui3-menu-label:hover,
.sm-user-ui .yui3-menu-vertical a.yui3-menu-label:hover,
.sm-user-ui.yui3-menu-horizontal > .yui3-menu-children > .yui3-menu-item .yui3-menu-item a.yui3-menu-label:hover,
.sm-user-ui .yui3-menu-horizontal > .yui3-menu-children > .yui3-menu-item .yui3-menu-item a.yui3-menu-label:hover {
  background: transparent;
}

Hikin' Mike

@DreamStreetPortraits said:
Also, while I have you do you know how to make the mobile dropdown menu transition down slowly?

Change the .5s to suit.

.sm-user-ui .yui3-menu-children,
.sm-user-ui .yui3-menu-label:hover {
  margin-left: 3px;
  transition: all .5s ease 0s;
}

DreamStreetPortraits

Thank you, Mike! The first issue is finally resolved. The other question was related to the navbar on mobile devices. When pressing on the top MENU button I would like the entire nav bar children to expand and collapse smoothly. Any ideas?

Hikin' Mike

@DreamStreetPortraits said:
Thank you, Mike! The first issue is finally resolved. The other question was related to the navbar on mobile devices. When pressing on the top MENU button I would like the entire nav bar children to expand and collapse smoothly. Any ideas?

I don't think it's possible. The mobile menu uses Javascipt and that's something we can't use or edit. If there is a way, it's beyond my pay grade.

DreamStreetPortraits

Thank you for all your help, Mike!

DreamStreetPortraits

Hey, Mike! I hope you are well.

Could you please check out my page quickly at https://www.monalightstudios.com/

I've been trying to figure out why the homepage content jolts up and down when it loads. It's like it's not fitting into the parent container properly while loading. I don't think it has anything to do with the animations as I removed them and it was still happening. I can fix it with a delay content rule, but it's not ideal.

Have you got any ideas?

Thanks in advance!