centralize a Nav menu

Asked

Viewed 1,042 times

0

How can I center this menu?

ul{
	margin: 0;
}
ul {
	list-style: none;
}
a {
	text-decoration: none;
}
.clearfix:after {
	display: block;
	content: " ";
	clear: both;
}
#site-navigation {
	background-color: #111;
	border-top: 4px solid #289dcc;
}
li {
	float:left;
	position: relative;
	font-family: 'Open Sans', serif;
	font-weight: 300;
}
a {
	color: #ffffff;
	display: block;
	font-size: 14px;
	font-weight: 600;
	padding: 10px 12px;
	text-transform: uppercase;
}

.main-navigation a:hover, .main-navigation ul li.current-menu-item {
	background-color: #289dcc;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
</head>
<link rel="stylesheet" id="colormag_style-css" href="files/style.css" type="text/css" media="all">

<body bgcolor="#000000" style="margin:0px;">

<div align="center"><b style="font-size:50px; color:#FFF">LOGO</b></div>

<nav id="site-navigation" class="main-navigation">
				<div class="clearfix">
               <ul>

<li><a href="#">MENU</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">MENU</a></li>
</ul></div>                                    
                                                  
               				</div>
			</nav></div>

</body>
</html>

css menu nav-bar

5 answers

0

Follow the example

nav{
    width: 100%;
    float: left;
}

ul{
	margin: 0 auto;
    width: 350px;
    list-style: none;
}
a {
	text-decoration: none;
}
.clearfix:after {
	display: block;
	content: " ";
	clear: both;
}
#site-navigation {
	background-color: #111;
	border-top: 4px solid #289dcc;
}
li {
	float:left;
	position: relative;
	font-family: 'Open Sans', serif;
	font-weight: 300;
}
a {
	color: #ffffff;
	display: block;
	font-size: 14px;
	font-weight: 600;
	padding: 10px 12px;
	text-transform: uppercase;
}

.main-navigation a:hover, .main-navigation ul li.current-menu-item {
	background-color: #289dcc;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body bgcolor="#000000" style="margin:0px;">

<div align="center"><b style="font-size:50px; color:#FFF">LOGO</b></div>

<nav id="site-navigation" class="main-navigation">
				<div class="clearfix">
               <ul>

<li><a href="#">MENU</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">MENU</a></li>
</ul></div>                                    
                                                  
               				</div>
			</nav></div>
</body>
</html>

0


Remove the float and position of li and add display: inline-block; add a padding: 0; and text-align: center; at the ul

ul {
    margin: 0;
    padding: 0;
	list-style: none;
    text-align: center;
}
a {
	text-decoration: none;
}
.clearfix:after {
	display: block;
	content: " ";
	clear: both;
}
#site-navigation {
	background-color: #111;
	border-top: 4px solid #289dcc;
}
li {
	display: inline-block;
	font-family: 'Open Sans', serif;
	font-weight: 300;
}
a {
	color: #ffffff;
	display: block;
	font-size: 14px;
	font-weight: 600;
	padding: 10px 12px;
	text-transform: uppercase;
}

.main-navigation a:hover, .main-navigation ul li.current-menu-item {
	background-color: #289dcc;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
</head>
<link rel="stylesheet" id="colormag_style-css" href="files/style.css" type="text/css" media="all">

<body bgcolor="#000000" style="margin:0px;">

<div align="center"><b style="font-size:50px; color:#FFF">LOGO</b></div>

<nav id="site-navigation" class="main-navigation">
				<div class="clearfix">
               <ul>

<li><a href="#">MENU</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">MENU</a></li>
</ul></div>                                    
                                                  
               				</div>
			</nav></div>

</body>
</html>

0

You should take the list effect on ul with margin and padding 0 too

ul{
	margin: 0;
}
ul {
	list-style: none;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin:0;
  padding: 0;
}
a {
	text-decoration: none;
}

#site-navigation {
	background-color: #111;
	border-top: 4px solid #289dcc;
}
li {
	font-family: 'Open Sans', serif;
	font-weight: 300;
}
a {
	color: #ffffff;
	display: block;
	font-size: 14px;
	font-weight: 600;
	padding: 10px 12px;
	text-transform: uppercase;
}
.main-navigation a:hover, .main-navigation ul li.current-menu-item {
	background-color: #289dcc;
}
<div align="center"><b style="font-size:50px; color:#FFF">LOGO</b></div>

<nav id="site-navigation" class="main-navigation">
				<div class="clearfix">
               <ul>

<li><a href="#">MENU</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">MENU</a></li>
</ul>
</div>                                    
</nav>

use Flexblox

  • Guys, thank you so much it worked out, you guys are awesome. Thank you so much

  • @When your question is solved it’s nice to choose some of the answers as best in the upper left corner of the answer, it helps the site to get more organized and other users too :)

0

Your tag li in the CSS this arrow float: left.(Remove this)

Remove this definition from float and as a solution is to facilitate your maintenance of CSS next to the component view, set the class of your tag ul

inserir a descrição da imagem aqui

and in the CSS add the following points:

inserir a descrição da imagem aqui

I believe this will already give you the desired result.

0

Make these little changes:

.clearfix {
    text-align: center;
}
ul {
    padding: 0;
}
li {
    /* float: left; */ /* REMOVA */
    display: inline-block;
}

Follow the Example:

.clearfix {
  text-align: center;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

.clearfix:after {
  display: block;
  content: " ";
  clear: both;
}

#site-navigation {
  background-color: #111;
  border-top: 4px solid #289dcc;
}

li {
  display: inline=-block;
  position: relative;
  font-family: 'Open Sans', serif;
  font-weight: 300;
}

a {
  color: #ffffff;
  display: block;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 12px;
  text-transform: uppercase;
}

.main-navigation a:hover,
.main-navigation ul li.current-menu-item {
  background-color: #289dcc;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Documento sem título</title>
</head>
<link rel="stylesheet" id="colormag_style-css" href="files/style.css" type="text/css" media="all">

<body bgcolor="#000000" style="margin:0px;">

  <div align="center"><b style="font-size:50px; color:#FFF">LOGO</b></div>

  <nav id="site-navigation" class="main-navigation">
    <div class="clearfix">
      <ul>

        <li><a href="#">MENU</a></li>
        <li><a href="#">MENU</a></li>
        <li><a href="#">MENU</a></li>
        <li><a href="#">MENU</a></li>
        <li><a href="#">MENU</a></li>
      </ul>
    </div>

    </div>
  </nav>
  </div>

</body>

</html>

Browser other questions tagged css menu nav-bar

You are not signed in. Login or sign up in order to post.