How to Adjust Dropdown Menu Width

Hello,

Sorry if this topic has already been addressed.
I am looking for a way to adjust the width of my dropdown menus to avoid having a page title split onto two lines. Below is an example of what I’d like to avoid :

image

Is there a way to achieve this? Perhaps with some CSS code?
Thank you!

Hey @Francois, you can use some CSS to achieve this:

Set a custom width (e.g. 300px)

/* Increase the width of the dropdown menu */
.knHeader__menu-dropdown-list {
  width: 300px;
}

OR

Remove max width and text wrapping (warning: this may impact mobile menu viewing)

/* Remove the max width from the dropdown menu */
.knHeader__menu-dropdown-list {
  max-width: unset !important;
}

/* Prevent text wrapping on dropdown menu links */
.knHeader__menu-dropdown-link {
  white-space: nowrap;
}

Before:
image

After:
image

Let me know how you go!

2 Likes

Thanks @StephenChapman :pray: