CODEWITHSUNDEEP
htmlcssmenuheadernav
JayeshBaidya
JayeshBaidya

Reputation: 3

How to a align nav items in html/css?

I'm trying to align my menu-content items as shown in the images attached. I am able to align the nav-menu contents. But not the insta-logo and hr. Can you tell me how to code it properly with explanation.

body
{
  background-color: black;
}

.header
{
  margin: 50px 122px 0px 122px;
}
.logo
{
  color: white;
  float: left;
}

.nav-menu
{
  margin: 0px;
  float: right;
}

.nav-menu li
{
  padding-left: 82px;
  display: inline;
}

.nav-menu a
{
  text-decoration: none;
  font-family: Roboto;
  font-size: 18px;
  color: #808080;
}


.nav-menu hr
{
  transform: rotate(90deg);
  border: 0.1px solid #FFFFFF;
  float: right;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="main.css">
    <title>Website</title>
  </head>
  <body>

    <div class="header">
      <div class="logo">
        <h1>Logo</h1>
      </div>

      <div class="menu-content">
        <div class="nav-menu">
          <ul>
            <li><a title="click to see my work" href="index.html">Work</a></li>
            <li><a title="about me and contact info" href="about-contact.html">About+Contact</a></li>
          </ul>

          <hr style="width:100px;">   <!--nav and insta separate line-->

        <div class="insta-logo">
            <img title="My Insta account"src="images/insta-logo-svg.svg" alt="Insta profile link">
        </div>
       </div>
      </div>
    </div>

    <hr>

  </body>
</html>

See my attached image for reference

Upvotes: 0

Views: 1835

Answers (2)

Zack Plauch&#233;
Zack Plauch&#233;

Reputation: 4200

Please read the CSS Comments for explanation:

/* CSS Reset for total control over all padding / margins */

* {
  padding: 0;
  margin: 0;
  display: border-box;
  
}

body {
  height: 100vh;
  background-color: black;
  font-family: arial;
}


/* Create navbar container */

.navbar {
  height: 60px;
  width: 100%;
  display: flex; /* flex (or Flexbox) divs automatically inner elements into a row */
  justify-content: space-around; /* Justify content lets you determine how the inner items behave on an x axis in a Flexbox */
  align-items: center; /* Align items lets you determine the alignment of inner elements on a Y axis in a flexbox. In this case, you're centering the items in the middle. */
  background-color: black;
  color: white;
  border-bottom: 1px solid grey;
}

.navbar-logo {
  font-size: 30px;
}

.navbar-menu { /* Create a container for the navbar-menu items (excludes things you don't want users to click on_. In this case, this should include your links, divider, and logo */
  display: flex; 
  align-items: center;
}

.navbar-menu ul { /* Align items horizontally again for the link list */
  display: flex;
  justify-content: center;
  list-style: none;
}

.navbar-menu a { /* Basic link styling */
  display: inline-block;
  margin: 0 10px;
  text-decoration: none;
  color: white;
  transition: all .2s ease;
}

.navbar-menu a:hover {
  color: #21abde;
}

/* Line for the divider */
.navbar-menu-divider {
  height: 60px;
  background-color: grey;
  width: .5px;
}

/* Example block for instagram logo. You'll have to either use the CDN from fontawesome.com or downlaod an image of the logo to have the real one */
.ig-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  margin: 10px;
  background-color: grey;
  cursor: pointer;
  transition: .2s ease;
}

.ig-logo:hover {
 color: white;
 background: #21abde;
}
<body>
<nav class="navbar">
  <div class="navbar-logo">Logo</div>
  <div class="navbar-menu">
    <ul>
      <li><a href="">Work</a></li>
      <li><a href="">About+Contact</a></li>
    </ul>
    <div class="navbar-menu-divider"></div>
    <div class="ig-logo">IG</div>
  </div>
</nav>
<body>

Welcome to the community.

Upvotes: 1

Arnold Gee
Arnold Gee

Reputation: 896

  1. Remove the right and left margin of the element with class="header", or make it smaller.

  2. Add the following css properties to the element with class="header":

    display: flex;
    justify-content: space-between;

CSS flex rules are a great way to organize your web layout. In this case, the elements will move away from each other, and they will occupy the whole width of the header.

Upvotes: 0

Related Questions