twenty fourteen change navigation menu

Hi ,

I have build a site based on the twenty fourteen theme.
https://www.tercoma.com

Now you can easily see that in the menu , (under composiet terrassen & tuinschermen), only with the first 2 subitems (Elegance terrassen en Emotion terrassen), the two words are next to each other.

From then on ,the words are aligned under each other and that i don’t like.
How can i get the last 4 items, (the words) aligned next to each other??

Any help is welcome…
Thx.

CSS

/**
* 5.0 Navigation
* —————————————————————————–
*/

.site-navigation ul {
list-style: none;
margin: 0;
}

.site-navigation li {
border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.site-navigation ul ul {
margin-left: 20px;
}

.site-navigation a {
color: #fff;
display: block;
text-transform: uppercase;
}

.site-navigation a:hover {
color: #41a62a;
}

.site-navigation .current_page_item > a,
.site-navigation .current_page_ancestor > a,
.site-navigation .current-menu-item > a,
.site-navigation .current-menu-ancestor > a {
color: #55d737;
font-weight: 900;
}

/* Primary Navigation */

.primary-navigation {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-size: 14px;
padding-top: 24px;
}

.primary-navigation.toggled-on {
padding: 72px 0 36px;
}

.primary-navigation .nav-menu {
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
display: none;
}

.primary-navigation.toggled-on .nav-menu {
display: block;
}

.primary-navigation a {
padding: 7px 0;
}

.primary-navigation ul ul a {
padding: 14px 5px;
white-space: normal;
width: 300px;
}

/* Secondary Navigation */

.secondary-navigation {
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
font-size: 12px;
margin: 48px 0;
}

.secondary-navigation a {
padding: 9px 0;
}

.menu-toggle {
background-color: #000;
border-radius: 0;
cursor: pointer;
height: 48px;
margin: 0;
overflow: hidden;
padding: 0;
position: absolute;
top: 0;
right: 0;
text-align: center;
width: 48px;
}

.menu-toggle:before {
color: #fff;
content: “\f419”;
padding: 16px;
}

.menu-toggle:active,
.menu-toggle:focus,
.menu-toggle:hover {
background-color: #444;
}

.menu-toggle:focus {
outline: 1px dotted;
}

.secondary-navigation .customize-partial-edit-shortcut button,
.footer-sidebar .widget:first-child .customize-partial-edit-shortcut button {
left: 0;
}

Thx

• This topic was modified 7 years, 2 months ago by lieven23.
• This topic was modified 7 years, 2 months ago by lieven23.

The page I need help with: [log in to see the link]