Controlling submenu width

[Priscilla]

Hello, the submenu of my main navbar is currently too wide, and spans underneath another section (in this case, “About Us”):

I am able to adjust the width through the Inspector Tool successfully:

but when I write the code in the actually Global CSS editor, nothing happens.

This is how I’m targeting the submenu:

.desktop .submenu {
  width: 160px;
}

with 160px being the desired width, as opposed to the default at 200px. What am I doing wrong?

The URL is: http://terracana.priscillathen.com/our-services/commercial-applications/

[Joao]

Hi There,

Please add the following CSS

.desktop .sub-menu {
min-width: 160px;
max-width: 160px;
}

Hope it helps!

[Priscilla]

Thanks Joao, but the suggested code doesn’t work. I’m in the Global CSS section of the Child Theme. That is the correct section to make the adjustments, is it not?

[Joao]

Hi Priscilla,

You can add at X | Launch | Options CSS

or Appereance | Customizer | Custom | CSS

Please add instead :

.desktop .sub-menu {
min-width: 160px !important;
max-width: 160px !important;
}

If that does not work please provide your credentials in a secure note.

Thank you

[Priscilla]

Hello Joao, I added the ‘!important’ (Lines 21-23), but it’s still not working.

[rad]

Hi there,

Please change it to this

.desktop .sub-menu {
  width: 160px;
}

Cheers!

[Priscilla]

Hi Iam, thanks for your reply, but the code you suggest is actually my original code (see first post in this thread). Now that I’ve provided my login credentials, perhaps someone could help target the problem?
Thanks in advance.

[nabeel]

Hi again,

You had a syntax error in your Customizer which was preventing the CSS code to work, I went ahead and fixed it for you and added the following code as well:

.masthead-inline .x-navbar .desktop .sub-menu {
    top: inherit !important;
    min-width: 160px !important;
    max-width: 160px !important;
}

This fixed everything, please clear your browser’s cache and reload the site.

Cheers!

[Priscilla]

Thank you Nabeel, your recommendation to include .masthead-inline .x-navbar at the start of the code has fixed the problem! (I have actually removed the top: inherit !important; and adjusted it to the desired height to appear the way I want. I was also able to view the changes without having to clear my cache (which is a big inconvenience when you lose a lot of URLs and other saved info).) Anyhow, it’s all working fine and dandy; thank you again for your excellent help!

[nabeel]

Glad we could help.

Cheers!