# How to Adjust Dropdown Menu Width

**URL:** <https://forums.knack.com/t/how-to-adjust-dropdown-menu-width/17874>\
**Category:** Get Answers\
**Created:** [September 11, 2024, 10:09am UTC](https://forums.knack.com/t/how-to-adjust-dropdown-menu-width/17874 "2024-09-11T10:09:28Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Francois](https://avatars.discourse-cdn.com/v4/letter/f/77aa72/32.png) [@Francois](https://forums.knack.com/u/Francois)\
**Post date:** [September 11, 2024, 10:09am UTC](https://forums.knack.com/t/how-to-adjust-dropdown-menu-width/17874/1 "2024-09-11T10:09:28Z")

</div>

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](https://us1.discourse-cdn.com/flex020/uploads/knack/original/2X/6/6305f3f7481498dd8ff209ffd27f4bcf3836df19.png)

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

---

<div class="post-metadata">

**Author:** ![StephenChapman](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/stephenchapman/32/1759_2.png) [@StephenChapman](https://forums.knack.com/u/StephenChapman)\
**Post date:** [September 11, 2024, 9:54pm UTC](https://forums.knack.com/t/how-to-adjust-dropdown-menu-width/17874/2 "2024-09-11T21:54:23Z")

</div>

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

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

```auto
/* 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)

```auto
/* 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](https://us1.discourse-cdn.com/flex020/uploads/knack/original/2X/2/2c56b36d27aa95c83a2c6b4bc5f3b6a87e2f0d0a.png)

After:  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/knack/original/2X/f/f7ea2d5ba182b32de5e0595030b0e61f20a0a4fb.png)

Let me know how you go!

---

<div class="post-metadata">

**Author:** ![Francois](https://avatars.discourse-cdn.com/v4/letter/f/77aa72/32.png) [@Francois](https://forums.knack.com/u/Francois)\
**Post date:** [September 12, 2024, 5:58am UTC](https://forums.knack.com/t/how-to-adjust-dropdown-menu-width/17874/3 "2024-09-12T05:58:14Z")

</div>

> [@StephenChapman](#):
>
> ```auto
> /* Increase the width of the dropdown menu */
> .knHeader__menu-dropdown-list {
> width: 300px;
> }
> 
> ```

Thanks @StephenChapman🙏