Title: Resize Desktop Menu
Last modified: March 23, 2018

---

# Resize Desktop Menu

 *  [mrmckee](https://wordpress.org/support/users/mrmckee/)
 * (@mrmckee)
 * [8 years, 4 months ago](https://wordpress.org/support/topic/resize-desktop-menu/)
 * Morning,
 * On the school website it has a main navigation bar across the top. I would like
   to add another item but then it splits the bar onto two lines and looks rubbish.
   Is it possible to resize the desktop view so that it always fits on one line?
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fresize-desktop-menu%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 4 replies - 1 through 4 (of 4 total)

 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [8 years, 4 months ago](https://wordpress.org/support/topic/resize-desktop-menu/#post-10107231)
 * It’s possible to resize the desktop menu so that it fits another menu item, but
   it is not possible to resize the desktop menu no matter how many items you add.
 *  Thread Starter [mrmckee](https://wordpress.org/support/users/mrmckee/)
 * (@mrmckee)
 * [8 years, 4 months ago](https://wordpress.org/support/topic/resize-desktop-menu/#post-10107271)
 * OK, how do I resize it so it fits the one item that I need to add?
 *  Thread Starter [mrmckee](https://wordpress.org/support/users/mrmckee/)
 * (@mrmckee)
 * [8 years, 4 months ago](https://wordpress.org/support/topic/resize-desktop-menu/#post-10107273)
 * Also, can it be made responsive so it will always fit one line on a desktop irrelevant
   of screen resolution?
 *  [Jacob Peattie](https://wordpress.org/support/users/jakept/)
 * (@jakept)
 * [8 years, 4 months ago](https://wordpress.org/support/topic/resize-desktop-menu/#post-10107374)
 * Actually, some additional CSS to make the main menu use [flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
   will allow you to fit all menu items on one line, no matter how many menu items
   you add.
 * Add this CSS to the Appearance > Customise > Additional CSS box:
 *     ```
       @media only screen and (min-width: 60.001em) {
       	.main-navigation-menu {
       		display: flex !important;
       		float: none;
       	}
   
       	.main-navigation-menu > li {
       		flex-grow: 2;
       		display: flex;
       		flex-direction: column;
       	}
   
       	.main-navigation-menu > li > a {
       		height: 100%;
       		padding-right: 0.2em;
       		padding-left: 0.2em;
       		text-align: center;
       	}
   
       	.main-navigation-menu > li > ul {
       		top: 100%;
       	}
       }
       ```
   
    -  This reply was modified 8 years, 4 months ago by [Jacob Peattie](https://wordpress.org/support/users/jakept/).

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Resize Desktop Menu’ is closed to new replies.

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 4 replies
 * 3 participants
 * Last reply from: [Jacob Peattie](https://wordpress.org/support/users/jakept/)
 * Last activity: [8 years, 4 months ago](https://wordpress.org/support/topic/resize-desktop-menu/#post-10107374)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics