Question 44097 in Html Question posted in
Some basic documentation can be found here.

How to center Title but have Nav all the way to the right with flexbox? – Html

I am trying to use flexbox and have the h1 and nav on the same line so i have display:flex with the default direction of row. I want title to be centered and the nav to the right. I was wondering if theres a way to move the navigation all the way to the right. I have tried margin-right:auto on the h1 and tried to find a property like align-self for the main axis when its set to row but I cant figure it out. I had justify-content:center originally but gave up and set it back to space-between.

   import React from 'react';
   import { Link } from 'react-router-dom';
   
   const Header = () => {
     return (
       <header className='header--container'>
         <Link to='/'>
           <h1 className='header--title'>Cocktail Connaisseur</h1>
         </Link>
         <Link to='/cocktails/a'>
           <nav className='header--nav'>
             <p>All Cocktails</p>
           </nav>
         </Link>
       </header>
     );
   };
   
   export default Header;

index.css

/*Header Styling */

.header--container {
  background-color: #55505c;
  padding: 15px;
  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header--container>a {
  text-decoration: none;
}

.header--title {
  margin: 0;
  color: #e8e9f3;
  font-size: 1.5em;
  text-align: center;
}

.header--nav {
  align-self: flex-end;
  margin-left: auto;
}

.header--nav>p {
  margin: 0;
  color: #e8e9f3;
}
Tags:

3

Answers


  1. 0

    You can add one more container on top then your output will work perfectly as per your requirement.

    import React from 'react';
import { Link } from 'react-router-dom';

const Header = () => {
  return (
    <header className='header--container'>
      <div/>
      <Link to='/'>
        <h1 className='header--title'>Cocktail Connaisseur</h1>
      </Link>
      <Link to='/cocktails/a'>
        <nav className='header--nav'>
          <p>All Cocktails</p>
        </nav>
      </Link>
    </header>
  );
};

export default Header;
    Login or Signup to reply.
  2. 0

    add flex:1; to the .header–title and i removed the justify from the container

    /*Header Styling */
.header--container {
  background-color: #55505c;
  padding: 15px;
  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2);
  display: flex;
  
}

.header--container > a {
  text-decoration: none;
}

.header--title {
flex:1 ;
  margin: 0;
  color: #e8e9f3;
  font-size: 1.5em;
  text-align: center;
}

.header--nav {
  align-self: flex-end;
  margin-left: auto;
}

.header--nav > p {
  margin: 0;
  color: #e8e9f3;
}
    <header class='header--container'>
      <Link to='/'>
        <h1 class='header--title'>Cocktail Connaisseur</h1>
      </Link>
      <Link to='/cocktails/a'>
        <nav class='header--nav'>
          <p>All Cocktails</p>
        </nav>
      </Link>
    </header>
    Login or Signup to reply.
  3. 0

    create a div and place the title into the div:

    <div class="header--title">
  <Link href="/">
    <h1>Cocktail Connaisseur</h1>
  </Link>
</div>

    then in the css:

    .header--title {
  width: 80%; //You can modify this and see the exact amount due to responsive stuff.
  color: #e8e9f3;
  font-size: 1.5em;
  text-align: center;
  margin: 0;
  margin-left: 10%;// 100% - width / 2
}

    and it’ll place your title exactly in the center and your nav links on the right.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search