CSS help for User Profile Dropdown Menu

I’m sure this could be an easy one for any CSS experts out there. I noticed that in UX apps where we use a custom font, the boxes around User Profile dropdown render with a gap between the selection and sub-selection (e.g., “logout of instance…” and the options to the left). This appears to be happening because my custom font is skinnier than the the default font (as this gap does not appear in Apliqo_Demo). The gap isn’t so much of a problem visually but rather selecting the sub-items can be difficult unless you move your mouse very quickly to the left (or else the entire menu closes).

image

I’ve tried to dig into the bootstrap CSS to figure out where I can increase the padding around the submenu. It appears to be defined by one of the “dropdown-menu” or “dropdown-submenu” classes but I can’t figure out exactly which one. Any advice would be greatly appreciated!

Hey bud you need to force this CSS;
first one is the first dropdown
.dropdown-menu {
min-width: 160px;
width:200px !important;
}
second one is the secondary dropdown

.dropdown-submenu > .dropdown-menu {
right: 200px !important;
}

1 Like

Thanks @hakyuz ! Earlier, I was making the change directly in “bootstrap.min.css” so I had thought I didn’t need the “!important” flag. I took your advice and added it directly in “custom-style.css” and it worked great! Didn’t need to adjust anything other than the “min-width” actually:

image

:love_you_gesture: