Trouble right-aligning texts on a navigation bar - any suggestions?

Question

I've been trying to position the contact info on a website to the right of the navigation bar. The left of the nav bar has the logo and website title. The logo and title are sitting fine on the left because that's just how they naturally positioned themselves, but I can't get the contact info to the right no matter what I do.

Here's the HTML coding

<nav>
    <label class="logo"><img src="logo.png" width="100px"/></label>
    <div class="title">Title</div>
    <div class="contactinfo">Info</div>
</nav>

I made them divs so that they could be manipulated

nav {
    background: whitesmoke;
    height: 125px;
    width: 100%;
    display: flex;
    line-height: 125px;
}
.title {
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  color:rgb(35, 61, 96);
  font-size: 40px;
}
.contactinfo {
    font-family: sans-serif, bold;
    color:rgb(35, 61, 96);
    display: inline-flex;
    justify-content: flex-end;
}
label.logo {
    padding: 10px;
}

I made the nav bar flex so that I could position it, but it didn't work. I also tried assigning a width to the contact info, but it caused the title to break. I ended up getting the contact info positioned correctly by making the position fixed, but when I shrunk the browser down, the title and contact info overlapped instead of being responsive. Overall, I'm so confused on how I can make the text responsive while being aligned correctly. Any suggestions?

This is the code I used when the texts overlapped.

nav {
    background: whitesmoke;
    height: 125px;
    width: 100%;
    display: flex;
    line-height: 125px;
}
.title {
  line-height: 125px;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  color:rgb(35, 61, 96);
  font-size: 40px;
}
.contactinfo {
    font-family: sans-serif, bold;
    color:rgb(35, 61, 96);
    padding-right: 10px;
    display: inline-block;
    line-height: 125px;
    position: absolute;
    right: 0;
}
label.logo {
    padding: 10px;
    float: left;
}

AWE FRANCIS OLAWUMI · Answer 1 · 2023-06-03T22:18:25.257

This is how you can do it

    .navbar {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      padding: 20px;
      box-sizing: border-box;
      background: whitesmoke;
      }
      
      .left {
      flex: 1;
       display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      }
      
      .logo {
        margin-right: 50px;
      }
      .title {
        font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', 
        sans-serif;
        color: rgb(35, 61, 96);
       font-size: 30px;
      }

    .contact {
      font-family: sans-serif, bold;
      color: rgb(35, 61, 96);
      display: inline-flex;
     justify-content: flex-end;
     }
      
      .right {
      flex: 1
      align-self: flex-end;
      }

    <nav class="navbar">
      <div class="left">
       <div class="logo">Logo </div>
       <div class="title">Site Title</div>
      </div>
      <div class="right">
        <div "contact"> contact info </div>
      </div>
    </nav>

This youtube video will be of help on how to create responsive navbar too Responsive navbar

Trouble right-aligning texts on a navigation bar - any suggestions?

1 Answers1