How to put text next to logo while keeping navigation links to the right?-CodePudding

This I'm new to CSS and I have been working on a practice project, but have not been able to do what title says.

I have tried the margin-right: auto method that I've seen in numerous videos and it works, but it only centers the title.

Here's some of the code:

.logo {
  cursor: pointer;
  margin-right: auto;
  margin-left: 1.5rem;
  height: 3rem;
  width: auto;
}

.title {
  text-transform: capitalize;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 1.8rem;
  font-weight: bold;
  margin-right: auto;
}

header {
  position: fixed;
  z-index: 100;
  width: 100%;
  height: 4rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.nav_links {
  list-style: none;
}

.nav_links li {
  display: inline-block;
  padding: 0 1.5rem 0 1rem;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 1.2rem;
}

<header>
  <img  src="./Images/ic-logo.svg" alt="logo">
  <div >
    <span >COLMAR</span>
    <span >ACADEMY</span>
  </div>
  <nav>
    <ul >
      <li><a href="#">On Campus</a></li>
      <li><a href="#">Online</a></li>
      <li><a href="#">For companies</a></li>
      <li><a href="#">Sign in</a></li>
    </ul>
  </nav>
</header>

I'm trying to move the title next to the logo, while keeping the nav bar links to the right.

Any help/pointers are really appreciated.

CodePudding user response：

Do this:

Header should not have justify-content: flex-end;
The logo does not need margin-right:auto either. It is enoug that the title has margin-right: auto;

Read the inline comments.

.logo {
  cursor: pointer;
  /*  NEW */
  /* margin-right: auto; */
  margin-left: 1.5rem;
  height: 3rem;
  width: auto;
}

.title {
  text-transform: capitalize;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 1.8rem;
  font-weight: bold;
  margin-right: auto;
}

header {
  position: fixed;
  z-index: 100;
  width: 100%;
  height: 4rem;
  display: flex;
  /*  NEW */
  /* justify-content: flex-end;  */
  align-items: center;
}

.nav_links {
  list-style: none;
}

.nav_links li {
  display: inline-block;
  padding: 0 1.5rem 0 1rem;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 1.2rem;
}

<header>
  <img  src="./Images/ic-logo.svg" alt="logo">
  <div >
    <span >COLMAR</span>
    <span >ACADEMY</span>
  </div>
  <nav>
    <ul >
      <li><a href="#">On Campus</a></li>
      <li><a href="#">Online</a></li>
      <li><a href="#">For companies</a></li>
      <li><a href="#">Sign in</a></li>
    </ul>
  </nav>
</header>

CodePudding user response：

Not sure what you are trying to do here and a drawing or a representation would be particularly helpful. But I've got two ways that you can use to fix this.

Use flex-boxes:

Make a flex box that will wrap the logo like so:

 <div style="display: flex; flex-direction: row;">
      <img  src="./Images/ic-logo.svg"alt="logo">
      <div >
           <span >COLMAR</span>
           <span >ACADEMY</span>
      </div>
 </div>

And do the same thing with your navigation bar :)

Just remove margin-right from the logo and it seemed to work in browser just fine.

CodePudding user response：

Using your HTML structure you can accomplish this with the css below. I stripped away your styling so you can see only what is needed to accomplish exactly what you are asking for.

header {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.logo {
  flex-shrink: 1;
  margin-right: 8px;
}

.title {
  flex-grow: 1;
}

.nav_links {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.nav_links li {
  margin-left: 8px;
}

<header>
  <img  src="./Images/ic-logo.svg" alt="logo">
  <div >
    <span >COLMAR</span>
    <span >ACADEMY</span>
  </div>
  <nav>
    <ul >
      <li><a href="#">On Campus</a></li>
      <li><a href="#">Online</a></li>
      <li><a href="#">For companies</a></li>
      <li><a href="#">Sign in</a></li>
    </ul>
  </nav>
</header>