Remove menu bar wrap on smaller screen sizes - html

Question

My centered menu bar wraps on screens smaller than desktop mode picture attached and I've tried several css code to make menu items appear on a single line which have not worked. Can anyone help me with this?
This is the bit of code I added in my CSS editor to center the navigation bar:
#navigation {
position: relative;
}
#main-nav {
clear: left;
float: left;
list-style: none;
margin: 0;
padding: 0;
position: relative;
left: 50%;
text-align: center;
}
.nav li {
display: block;
float: left;
list-style: none;
margin: 0;
padding: 0;
position: relative;
right: 24%;
}
.nav li:hover, .nav li.hover {
position: relative;
}
.nav li ul li {
left: 0;
}
I noticed especially that the .nav li part controls the positioning of the navigation bar.
My html code for the navigation bar is below:
<div class="col-sm-6 col-md-3 footer-sidebar-wrap">
<aside id="nav_menu-2" class="widget widget_nav_menu"><h3 class="widget-title">Menu</h3><div class="menu-primary-menu-container"><ul id="menu-primary-menu-1" class="menu"><li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-260">Home</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-116">Shop</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-117">About</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-113">Contact</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page current_page_parent menu-item-114">News</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-115">Account</li>
</ul></div></aside> </div>
The full css code for the navigation bar is here:
.page .navbar-custom {
background-color: rgba(10, 10, 10, .9) !important;
}
.navbar-custom {
background-color: rgba(10, 10, 10, .9);
border: 0;
border-radius: 0;
z-index: 1000;
font-family: "Roboto Condensed", sans-serif;
text-transform: uppercase;
letter-spacing: 3px;
font-size: 11px;
-webkit-transition: background, padding 0.4s ease-in-out 0s;
-moz-transition: background, padding 0.4s ease-in-out 0s;
-ms-transition: background, padding 0.4s ease-in-out 0s;
-o-transition: background, padding 0.4s ease-in-out 0s;
transition: background, padding 0.4s ease-in-out 0s;
}
.navbar a {
-webkit-transition: color 0.125s ease-in-out 0s;
-moz-transition: color 0.125s ease-in-out 0s;
-ms-transition: color 0.125s ease-in-out 0s;
-o-transition: color 0.125s ease-in-out 0s;
transition: color 0.125s ease-in-out 0s;
}
.navbar-custom .sub-menu,
.navbar-custom .children {
background: rgba(26, 26, 26, .9);
border-radius: 0;
border: 0;
padding: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar-custom .navbar-brand {
letter-spacing: 4px;
font-weight: 400;
font-size: 22px;
color: #fff;
}
.navbar-custom .sub-menu li,
.navbar-custom .children li {
list-style:none;
}
.navbar-custom .sub-menu li a,
.navbar-custom .children li a {
width:100%;
display:block;
}
.navbar-custom .nav li > a {
position: relative;
color: rgba(255, 255, 255, .7);
}
.navbar-custom .sub-menu > li > a,
.navbar-custom .children > li > a {
border-bottom: 1px solid rgba(73, 71, 71, 0.15) !important;
padding: 11px 15px;
letter-spacing: 2px;
color: #999;
}
.navbar-custom .sub-menu .sub-menu,
.navbar-custom .children .children {
border-left: 1px solid rgba(73, 71, 71, 0.15);
left: 100%;
right: auto;
top: 0;
margin-top: 0;
}
.navbar-custom .sub-menu.left-side .sub-menu,
.navbar-custom .children.left-side .children {
border: 0;
border-right: 1px solid rgba(73, 71, 71, 0.15);
right: 100%;
left: auto;
}
.navbar-custom .nav > li > a:focus,
.navbar-custom .nav > li > a:hover,
.navbar-custom .nav .open > a,
.navbar-custom .nav .open > a:focus,
.navbar-custom .nav .open > a:hover,
.navbar-custom .sub-menu > li > a:focus,
.navbar-custom .sub-menu > li > a:hover {
background: none;
color: #fff;
}
.navbar-custom .sub-menu > li > a:hover,
.navbar-custom .children > li > a:hover {
background: rgba(255, 255, 255, .1) !important;
}
.navbar-custom .menu-item-has-children-toggle:after {
position: absolute;
display: block;
right: 0;
top: 50%;
margin-top: -6px;
font: normal normal normal 14px/1 'ElegantIcons';
font-size: 9px;
content: "\43";
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.navbar-custom .navbar-toggle .icon-bar {
background: #fff;
}
.navbar-nav .menu-item-has-children>a:after,
.navbar-nav .page_item_has_children>a:after {
position: absolute;
display: block;
right: 0;
top: 50%;
margin-top: -6px;
font: normal normal normal 14px/1 ElegantIcons;
font-size: 9px;
content: "\43";
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.navbar-nav .sub-menu,
.navbar-nav .children {
min-width: 180px;
font-size: 11px;
}
.navbar-right ul {
text-align: left;
}
/* Navbar search */
.menu-item-has-children-search {
position: relative;
padding: 5px;
}
.menu-item-has-children-search .form-control {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 11px;
}
.search-btn {
position: absolute;
background: transparent;
border: none;
overflow: hidden;
top: 50%;
right: 1px;
width: 42px;
height: 40px;
line-height: 38px;
font-size: 14px;
outline: none;
color: #999;
margin-top: -20px;
}

Answer 1

This occurs because your <li> elements are exceeding the width of the parent <ul> element.
I imagine you could use
li {
white-space: nowrap;
}
This will stop the wrap behavior, however, will not be centered.
I would solve this issue with media queries, or making your parent <ul> element wider in general.
To use media queries use the following template:
#media (max-width: 1000px) {
//place the CSS you want to be activated when the screen is smaller than 1000px here
ul{
width: 1000px;
}
li{
font-size: 10px;
}
}
One other thing that could occur is white-space between <li> or <h3> elements. The reason this is a problem is if those six <li> or <h3> tags' width all equal 100%, then those extra spaces will go over 100% width making the last element fall to the next line. The below code might do the trick.
h3 {
padding:0;
margin:0;
}