After adding white-space: nowrap; to .navbar, drop down is horizontal

Where did you add that rule and what was the actual rule added?

Try to make it so that the nowrap property is not inherited by the child menu items by adding a rule to target these with the property:
white-space: normal

I added the rule white-space: nowrap;
here:

.navbar {
	background-color: #3366FF;
	margin: 0 auto;
	max-width: 1600;
	width: 100%;
        border: none;
        white-space: nowrap;
        outline: none;
}

I’ve added white-space: normal; to the below classes and the problem persists. Are these the child menu items? Where should I add them if they are not the child menu items? The theme is twenty thirteen.

.site-header .search-form {
	position: absolute;
	right: 20px;
	top: 1px;
       white-space: normal

}

.site-header .search-field {
	background-color: transparent;
	background-image: url(images/search-icon.png);
	background-position: 5px center;
	background-repeat: no-repeat;
	background-size: 24px 24px;
	border: none;
	cursor: pointer;
	height: 37px;
	margin: 3px 0;
	padding: 0 0 0 34px;
	position: relative;
	-webkit-transition: width 400ms ease, background 400ms ease;
	transition:         width 400ms ease, background 400ms ease;
	width: 0;
        white-space: normal

}

.site-header .search-field:focus {
	background-color: #fff;
	border: 2px solid #c3c0ab;
	cursor: text;
	outline: 0;
	width: 230px;
        white-space: normal

}

Try:

.navbar li {
white-space: normal;
}

Thank you very much cubecolour for helping me get the site working properly.

Topic is resolved.