Resize Desktop Menu

  • mrmckee

    (@mrmckee)


    8 years, 2 months ago

    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 to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    8 years, 2 months ago

    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

    (@mrmckee)

    8 years, 2 months ago

    OK, how do I resize it so it fits the one item that I need to add?

    Thread Starter mrmckee

    (@mrmckee)

    8 years, 2 months ago

    Also, can it be made responsive so it will always fit one line on a desktop irrelevant of screen resolution?

    Jacob Peattie

    (@jakept)

    8 years, 2 months ago

    Actually, some additional CSS to make the main menu use 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, 2 months ago by Jacob Peattie.
Viewing 4 replies - 1 through 4 (of 4 total)

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