0

I can't seem to center the navigation bar buttons. Is there a way to do this in the css file? I have tried centring but it hasn't worked.

HTML

<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
</div>

CSS

.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed; /* Set the navbar to fixed position */
  top: 0; /* Position the navbar at the top of the page */
  width: 1300px; /* Full width */
  z-index: 99999;
  text-align: center;
}

/* Links inside the navbar */
.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change background on mouse-over */
.navbar a:hover {
  background: #ddd;
  color: black;
}
henser
  • 3,307
  • 2
  • 36
  • 47
Toastie
  • 47
  • 3
  • Hi Mahar - following up again. Could we trouble you to select a best answer -- or provide you own and select that -- to close out the question? That would help us out. *Many Thanks* – cssyphus Jun 12 '19 at 15:11

6 Answers6

0
/* Links inside the navbar */
.navbar a {
 display:inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

I have modified your style for ".navbar a". Hope it will work for you.

Tabish Matin
  • 85
  • 1
  • 10
0

You will love flexbox - super simple, and very useful.

Flexbox requires a parent and items.

You turn flexbox on on the parent, and then the various switches are set either on the parent (as in the case of justify-content) or on the items.

Here is a great cheatsheet for Flexbox.

Here is a fantastic YouTube tutorial.

DEMO:

.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed; /* Set the navbar to fixed position */
  top: 0; /* Position the navbar at the top of the page */
  z-index: 99999;
  text-align: center;

width: 100vw; /* Full width */
  display:flex;
  justify-content:center;
  border:5px solid yellow;
}

/* Links inside the navbar */
.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  
  border:1px solid pink;
}

/* Change background on mouse-over */
.navbar a:hover {
  background: #ddd;
  color: black;
}
<div class="navbar">
      <a href="#home">Home</a>
      <a href="#news">News</a>
      <a href="#contact">Contact</a>
</div>
Community
  • 1
  • 1
cssyphus
  • 37,875
  • 18
  • 96
  • 111
0

You can use

<div class="navbar">
  <div style="display: inline-block;">
     <a href="#home">Home</a>
     <a href="#news">News</a>
     <a href="#contact">Contact</a>
  </div>
</div>
Noor A Shuvo
  • 2,639
  • 3
  • 23
  • 48
0

If I understand you correctly, you need to align the links in the center of the navbar, for this you need to do:

CSS:

/* Links inside the navbar */
.navbar a {
  /* float: left;  remove this property */
  display: inline-block; /* change display: block to inline-block */
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

You can see an example on: https://jsfiddle.net/4gy2japx/

Maxim Karapysh
  • 86
  • 5
0

There are several mistakes in your elements styling. Trying to align floated elements, assigning display block to linear links and defining empirical lengths when you're aiming for full lengths are some of them.

Try this instead:

html,body {
  margin: 0; /* overwrite browser defaults */
}

.navbar{
  overflow: hidden;
  background-color: #333;
  position: fixed; /* Set the navbar to fixed position */
  top: 0; /* Position the navbar at the top of the page */
  width: 100%; /* Full width */
  z-index: 99999;
  text-align: center;
}

/* Links inside the navbar */
.navbar a {
  display: inline-block;
  color: #f2f2f2;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change background on mouse-over */
.navbar a:hover {
  background: #ddd;
  color: black;
}
<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
</div>
henser
  • 3,307
  • 2
  • 36
  • 47
0

.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed; /* Set the navbar to fixed position */
  top: 0; /* Position the navbar at the top of the page */
  width: 100%; /* Full width */
  z-index: 99999;
  text-align: center;
  margin: 0 auto;
}
.navbar ul {
 display:inline-block;
 list-style-type: none;
}
/* Links inside the navbar */
.navbar a {
  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change background on mouse-over */
.navbar a:hover {
  background: #ddd;
  color: black;
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
 <div class="navbar">
      <a href="#home">Home</a>
      <a href="#news">News</a>
      <a href="#contact">Contact</a>
    </div>
</body>
</html>
You have to remove float left and add display: inline-block;
.navbar a {
  float: left;
  display: block;
robgordon
  • 11
  • 2