My nav bar contents are not centering on my logo. How would I fix this? CSS and HTML-CodePudding

I noticed my nav bar links were a bit off-centered with my logo on the left. Would someone explain to me how I can fix this? I attached a screenshot and code snippets. I tried doing inline-block and float but still jacked things up. Should I position them using the x and y offsets or not? I just want to do this in the best and most organized way.

/*Font for logo*/
@font-face {
    font-family: 'leander';
    src: url(/Fonts/LEANDER.TTF);
}

/* Add a black background color to the top navigation */
.topnav {
    margin: 0;
    position: relative;
    background-color: #141414;
    overflow: hidden;
    text-align: center;
    padding: 14px 20px;
    box-shadow: 0px 5px 10px black;
}

/* Style the links inside the navigation bar */
.topnav a {
    color: white;
    text-align: center;
    padding: 30px 16px;
    text-decoration: none;
    font-size: 17px;
}

/*Style for website logo*/
.logo {
    color: white;
    font-family: 'leander', sans-serif;
    text-align: left;
    float: left;
}

/*CSS style for the body*/
body {
    margin: 0;
    background-color: #262626; }
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Arclight Web Development</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=">
<link rel="stylesheet" href="app.css">
</head>
<body>
<div >
    <div class = "logo">
        <span id="A">A</span>
        <span id="R">R</span>
        <span id="R">C</span>
        <span id="R">L</span>
        <span id="R">I</span>
        <span id="R">G</span>
        <span id="R">H</span>
        <span id="R">T</span>
    </div>
    <a  href="#home">Home</a>
    <a href="#projects">Projects</a>
    <a href="#about">Meet the Dev</a>
    <a href="#contact">Contact</a>
</div>

<script src="app.js"></script>
</body>
</html>

CodePudding user response：

Consider to use

display: grid;

in topnav selector, its common way to make navbar.

Sparate the nav size by giving `

grid-template-columns: 1fr 1fr 1fr;

also you need to wrap your nav bar links to single <div></div>.

@font-face {
  font-family: 'leander';
  src: url(/Fonts/LEANDER.TTF);
}

body {
  margin: 0;
  background-color: #262626;
}

.topnav {
  /* position: relative; */
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  background-color: #141414;
  /* overflow: hidden; */
  text-align: right;
  padding: 14px 20px;
  box-shadow: 0px 5px 10px black;
}

.topnav a {
  /* position: relative; */
  color: white;
  text-align: center;
  padding: 30px 16px;
  text-decoration: none;
  font-size: 17px;
}

.logo {
  /* position: absolute; */
  /* top: 50%; Important for vertical centered element */
  /* transform: translateY(-50%); vertically centered */
  color: white;
  font-family: 'leander', sans-serif;
  text-align: left;
  /* float: left; */
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Arclight Web Development</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=" />
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <div >
      <div >
        <span id="A">A</span>
        <span id="R">R</span>
        <span id="R">C</span>
        <span id="R">L</span>
        <span id="R">I</span>
        <span id="R">G</span>
        <span id="R">H</span>
        <span id="R">T</span>
      </div>
      <div>
        <a  href="#home">Home</a>
        <a href="#projects">Projects</a>
        <a href="#about">Meet the Dev</a>
        <a href="#contact">Contact</a>
      </div>
    </div>

    <script src="app.js"></script>
  </body>
</html>

CodePudding user response：

the easy way to archive this result is to use either flex or grid. you can for example add nav element to wrap Links something like

<div >
<div >
  <span id="A">A</span>
  <span id="R">R</span>
  <span id="C">C</span>
  <span id="L">L</span>
  <span id="I">I</span>
  <span id="G">G</span>
  <span id="H">H</span>
  <span id="T">T</span>
</div>
<nav>
  <a  href="#home">Home</a>
  <a href="#projects">Projects</a>
  <a href="#about">Meet the Dev</a>
  <a href="#contact">Contact</a>
</nav>

and than in you CSS you can use flex to align element inside topnav like so

.topnav {
  display: flex;
  align-items:center;
  justify-content: space-around;

}

align-items:center in this case will take of center elements in cross axis

CodePudding user response：

Give position: absolute; to .logo.

Center the logo by adding top: 50%; transform: translateY(-50%); properties to .logo.

Rest of code was organized from start.

@font-face {
  font-family: 'leander';
  src: url(/Fonts/LEANDER.TTF);
}

body {
  margin: 0;
  background-color: #262626;
}

.topnav {
  position: relative;
  background-color: #141414;
  overflow: hidden;
  text-align: right;
  padding: 14px 20px;
  box-shadow: 0px 5px 10px black;
}

.topnav a {
  position: relative;
  color: white;
  text-align: center;
  padding: 30px 16px;
  text-decoration: none;
  font-size: 17px;
}

.logo {
  position: absolute;
  top: 50%; /*Important for vertical centered element*/
  transform: translateY(-50%); /*vertically centered*/
  color: white;
  font-family: 'leander', sans-serif;
  text-align: left;
  float: left;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Arclight Web Development</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=">
  <link rel="stylesheet" href="app.css">
</head>

<body>
  <div >
    <div >
      <span id="A">A</span>
      <span id="R">R</span>
      <span id="C">C</span>
      <span id="L">L</span>
      <span id="I">I</span>
      <span id="G">G</span>
      <span id="H">H</span>
      <span id="T">T</span>
    </div>
    <a  href="#home">Home</a>
    <a href="#projects">Projects</a>
    <a href="#about">Meet the Dev</a>
    <a href="#contact">Contact</a>
  </div>

  <script src="app.js"></script>
</body>

</html>