CODEWITHSUNDEEP
csshtml
Nicholas Paladino
Nicholas Paladino

Reputation: 13

How to center a navbar's text with CSS?

I would like to add this navbar I found and edited to my site but for some reason I can't get the text to align in the center.

I have tried using text-align: center; but it doesn't seem to be working. Line 27 is where I have tried to align the text.

What I'm trying to do is have the full navbar span the entire screen while just having the links in the centre of the Navbar. So just like this Navbar.

JSFiddle link: https://jsfiddle.net/dy9yLr95/

body {
  padding-top: 30px;
}

/* Starter CSS for Menu */

#lostnavmenu {
  padding: 0;
  margin: 0;
  border: 0;
  width: auto;
}

#lostnavmenu ul,
#lostnavmenu li {
  list-style: none;
  margin: 0;
  padding: 0;
}

#lostnavmenu ul {
  position: relative;
  z-index: 597;
  text-align: center;
}

#lostnavmenu ul li {
  float: left;
  min-height: 1px;
  vertical-align: middle;
}

#lostnavmenu ul li.hover,
#lostnavmenu ul li:hover {
  position: relative;
  z-index: 599;
  cursor: default;
}

#lostnavmenu ul ul {
  <!-- visibility: hidden;
  -->position: absolute;
  top: 100%;
  left: 0;
  z-index: 598;
  width: 100%;
}

#lostnavmenu ul ul li {
  float: none;
}

#lostnavmenu ul ul ul {
  top: 0;
  left: 190px;
  width: 190px;
}

#lostnavmenu ul li:hover>ul {
  visibility: visible;
}

#lostnavmenu ul ul {
  bottom: 0;
  left: 0;
}

#lostnavmenu ul ul {
  margin-top: 0;
}

#lostnavmenu ul ul li {
  font-weight: normal;
}

#lostnavmenu a {
  display: block;
  line-height: 1em;
  text-decoration: none;
}


/* Custom CSS Styles */

#lostnavmenu {
  background: #333333;
  border-bottom: 4px solid #F3B016;
  font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
  font-size: 12px;
}

#lostnavmenu>ul {
  *display: inline-block;
}

#lostnavmenu:after,
#lostnavmenu ul:after {
  content: '';
  display: block;
  clear: both;
}

#lostnavmenu ul {
  text-transform: uppercase;
}

#lostnavmenu ul ul {
  border-top: 4px solid #F3B016;
  text-transform: none;
  min-width: 190px;
}

#lostnavmenu ul ul a {
  background: #1b9bff;
  color: #ffffff;
  border: 1px solid #0082e7;
  border-top: 0 none;
  line-height: 150%;
  padding: 16px 20px;
  font-size: 12px;
}

#lostnavmenu ul ul ul {
  border-top: 0 none;
}

#lostnavmenu ul ul li {
  position: relative;
}

#lostnavmenu ul ul li:first-child>a {
  border-top: 1px solid #0082e7;
}

#lostnavmenu ul ul li:hover>a {
  background: #4eb1ff;
  color: #ffffff;
}

#lostnavmenu ul ul li:last-child>a {
  -moz-border-radius: 0 0 3px 3px;
  -webkit-border-radius: 0 0 3px 3px;
  border-radius: 0 0 3px 3px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  -moz-box-shadow: 0 1px 0 #1b9bff;
  -webkit-box-shadow: 0 1px 0 #1b9bff;
  box-shadow: 0 1px 0 #1b9bff;
}

#lostnavmenu ul ul li:last-child:hover>a {
  -moz-border-radius: 0 0 0 3px;
  -webkit-border-radius: 0 0 0 3px;
  border-radius: 0 0 0 3px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}

#lostnavmenu ul ul li.has-sub>a:after {
  content: '+';
  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: -8px;
}

#lostnavmenu ul li:hover>a,
#lostnavmenu ul li.active>a {
  background: #F3B016;
  color: #ffffff;
}

#lostnavmenu ul li.has-sub>a:after {
  content: '+';
  margin-left: 5px;
}

#lostnavmenu ul li.last ul {
  left: auto;
  right: 0;
}

#lostnavmenu ul li.last ul ul {
  left: auto;
  right: 99.5%;
}

#lostnavmenu a {
  background: #333333;
  color: #CBCBCB;
  padding: 0 20px;
}

#lostnavmenu>ul>li>a {
  line-height: 48px;
  font-size: 12px;
}

.fixedlostnavmenu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  width: 100%;
  height: auto;
  background-color: #00a087;
  margin: 0;
  text-align: center;
}

.fixedlostnavmenu li {
  display: inline;
}

.fixedlostnavmenu a {
  display: inline-block;
}
<header>
  <nav class="fixedlostnavmenu" id='lostnavmenu'>
    <ul>
      <li><a href='/home'><span>Home</span></a></li>
      <li><a href='/forum'><span>Forum</span></a></li>
      <li><a href='/vote'><span>Vote</span></a></li>
      <li><a href='/shop'><span>Store</span></a></li>
      <li><a href='/staff'><span>Staff</span></a></li>
      <li><a href='/getwhitelisted' target="_blank"><span>Get Whitelisted</span></a></li>
    </ul>
  </nav>
</header>
<div>
  <p>
    <h1 align="center">Testing....</h1>
  </p>

Upvotes: 0

Views: 63

Answers (3)

First Last
First Last

Reputation: 45

Here, this should work:

@import url(http://fonts.googleapis.com/css?family=Oxygen+Mono);

	body{
	 padding-top:30px;
	}

	/* Starter CSS for Menu */
	#lostnavmenu {
	  padding: 0;
	  margin: 0;
	  border: 0;
	  width: auto;
	}
	#lostnavmenu ul,
	#lostnavmenu li {
	  list-style: none;
	  margin: 0;
	  padding: 0;
	}
	#lostnavmenu ul {
	  position: relative;
	  z-index: 597;
	  text-align: center;
	}
	#lostnavmenu ul li {
	  float: left;
	  min-height: 1px;
	  vertical-align: middle;
	}
	#lostnavmenu ul li.hover,
	#lostnavmenu ul li:hover {
	  position: relative;
	  z-index: 599;
	  cursor: default;
	}
	#lostnavmenu ul ul {
	  <!-- visibility: hidden; -->
	  position: absolute;
	  top: 100%;
	  left: 0;
	  z-index: 598;
	  width: 100%;
	}
	#lostnavmenu ul ul li {
	  float: none;
	}
	#lostnavmenu ul ul ul {
	  top: 0;
	  left: 190px;
	  width: 190px;
	}
	#lostnavmenu ul li:hover > ul {
	  visibility: visible;
	}
	#lostnavmenu ul ul {
	  bottom: 0;
	  left: 0;
	}
	#lostnavmenu ul ul {
	  margin-top: 0;
	}
	#lostnavmenu ul ul li {
	  font-weight: normal;
	}
	#lostnavmenu a {
	  display: block;
	  text-decoration: none;
	}
	/* Custom CSS Styles */
	#lostnavmenu {
	  background: #333333;
	  border-bottom: 4px solid #F3B016;
	  font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
	  font-size: 12px;
	}
	#lostnavmenu > ul {
	  *display: inline-block;
	}
	#lostnavmenu:after,
	#lostnavmenu ul:after {
	  content: '';
	  display: block;
	  clear: both;
	}
	#lostnavmenu ul {
	  text-transform: uppercase;
	}
	#lostnavmenu ul ul {
	  border-top: 4px solid #F3B016;
	  text-transform: none;
	  min-width: 190px;
	}
	#lostnavmenu ul ul a {
	  background: #1b9bff;
	  color: #ffffff;
	  border: 1px solid #0082e7;
	  border-top: 0 none;
	  line-height: 150%;
	  padding: 16px 20px;
	  font-size: 12px;
	}
	#lostnavmenu ul ul ul {
	  border-top: 0 none;
	}
	#lostnavmenu ul ul li {
	  position: relative;
	}
	#lostnavmenu ul ul li:first-child > a {
	  border-top: 1px solid #0082e7;
	}
	#lostnavmenu ul ul li:hover > a {
	  background: #4eb1ff;
	  color: #ffffff;
	}
	#lostnavmenu ul ul li:last-child > a {
	  -moz-border-radius: 0 0 3px 3px;
	  -webkit-border-radius: 0 0 3px 3px;
	  border-radius: 0 0 3px 3px;
	  -moz-background-clip: padding;
	  -webkit-background-clip: padding-box;
	  background-clip: padding-box;
	  -moz-box-shadow: 0 1px 0 #1b9bff;
	  -webkit-box-shadow: 0 1px 0 #1b9bff;
	  box-shadow: 0 1px 0 #1b9bff;
	}
	#lostnavmenu ul ul li:last-child:hover > a {
	  -moz-border-radius: 0 0 0 3px;
	  -webkit-border-radius: 0 0 0 3px;
	  border-radius: 0 0 0 3px;
	  -moz-background-clip: padding;
	  -webkit-background-clip: padding-box;
	  background-clip: padding-box;
	}
	#lostnavmenu ul ul li.has-sub > a:after {
	  content: '+';
	  position: absolute;
	  top: 50%;
	  right: 15px;
	  margin-top: -8px;
	}
	#lostnavmenu ul li:hover > a,
	#lostnavmenu ul li.active > a {
	  background: #F3B016;
	  color: #ffffff;
	}
	#lostnavmenu ul li.has-sub > a:after {
	  content: '+';
	  margin-left: 5px;
	}
	#lostnavmenu ul li.last ul {
	  left: auto;
	  right: 0;
	}
	#lostnavmenu ul li.last ul ul {
	  left: auto;
	  right: 99.5%;
	}
	#lostnavmenu a {
	  background: #333333;
	  color: #CBCBCB;
	  padding: 0 20px;
	}

	.fixedlostnavmenu {
	  position: fixed;
	  top: 0;
	  left: 0;
	  right: 0;
	  z-index: 9999;
	  width: 100%;
	  height: auto;
	  background-color: #00a087;
	  margin:0;
	  text-align:center;
	}

	.fixedlostnavmenu li{
		display:inline;
	}
	.fixedlostnavmenu a{
		display:inline-block;
	}
  
.table {
  display: table;
  /* Allow the centering to work */
  margin: 0 auto;	  
	font-size: 12px;
}
	<body>
	<header>
		<nav class="fixedlostnavmenu" id='lostnavmenu'>
    <div class="table">
		<ul>
		   <li style="line-height: 48px;"><a href='/home'><span>Home</span></a></li>
		   <li  style="line-height: 48px;"><a href='/forum'><span>Forum</span></a></li>
		   <li  style="line-height: 48px;"><a href='/vote'><span>Vote</span></a></li>
		   <li  style="line-height: 48px;"><a href='/shop'><span>Store</span></a></li>
		   <li  style="line-height: 48px;"><a href='/staff'><span>Staff</span></a></li>
		   <li style="line-height: 48px;"><a href='/getwhitelisted' target="_blank"><span>Get Whitelisted</span></a></li>
		</ul>
    </div>
		</nav>
	</header>
	<div>
	<h1 align="center">Testing....</h1>
	</div>
	</body>

Upvotes: 0

Paul
Paul

Reputation: 94

Try this by updating your css:

#lostnavmenu ul {
  position: relative;
  z-index: 597;
  margin-left: 15%;
  margin-right: 10%;
}

I would also try adding an @media tag to fix when the list elements wrap below.

Upvotes: 0

pankaj
pankaj

Reputation: 74

.menu_center ul {
text-align: center;
display: inline-flex;

}

<header><div class="menu_center">
<nav class="fixedlostnavmenu" id='lostnavmenu'>

<ul>
   <li><a href='/home'><span>Home</span></a></li>
   <li><a href='/forum'><span>Forum</span></a></li>
   <li><a href='/vote'><span>Vote</span></a></li>
   <li><a href='/shop'><span>Store</span></a></li>
   <li><a href='/staff'><span>Staff</span></a></li>
   <li><a href='/getwhitelisted' target="_blank"><span>Get Whitelisted</span></a></li>
    </ul></div>
</nav>

Upvotes: 1

Related Questions