How to move navigation text to the left?-CodePudding

What is the best method using flex to move the logo text to the left?

I have tried flex-start - and I have also tried float - left.

However, both method doesn't work.

/* Navigation */
.navigation-container {
    position: fixed;
    top: 0;
    width: 78.8%;
    display: flex;
    justify-content: flex-end;
}

.logo {
  
}

.navigation-items {
  display: flex;
  justify-content: center;
}

.footer-items {
  display: flex;
  justify-content: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"/>
<!-- Container -->
<div >
  <!-- Navigation -->
  <div >
    <span ></span>
    <!-- Results Nav-->
    <span  id="resultsNav">
      <h1 >logo</h1>
      <h3><i ></i></h3>
      <h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h3>
      <h3><i ></i></h3>
    </span>
  </div>
</div>

CodePudding user response：

Add to the logo class the css property margin-right: auto;.

.container {}

/* Navigation */
.navigation-container {  
  width: 78.8%;  
  margin: 0 auto;  
}

.navigation-items {  
  display: flex;  
  gap: 20px;
  padding: 0px 10px 0px 10px;
}

.navigation-items h3 i {
  margin-top: 20px;
}

.logo {
  margin-right: auto;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"/>
<!-- Container -->

<div >
  
  <div >    
    <!-- Results Nav-->
    <div  id="resultsNav">
      <h1 >logo</h1>
      <h3><i ></i></h3>      
      <h3><i ></i></h3>
    </div>
    
  </div>
    
</div>

CodePudding user response：

Since you're already using two flex's just add the logo to be the first child of the first flex-container (navigation-container) then set flex-end on the navigation items only.

/* Navigation */
.navigation-container {
    position: fixed;
    top: 0;
    width: 98%;
    display: flex;
    align-items: center;
    padding: 0 10px;
}

body {  
  margin: 0;
}

.navigation-items {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.footer-items {
  display: flex;
  justify-content: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"/>
<!-- Container -->
<div >
  <!-- Navigation -->
  <div >
    <h1 >logo</h1>
    <span ></span>
    <!-- Results Nav-->
    <span  id="resultsNav">

      <h3><i ></i></h3>
      <h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h3>
      <h3><i ></i></h3>
    </span>
  </div>
</div>

CodePudding user response：

Please try this code I think it will be helpful for you

/* Navigation */

.container {}

/* Navigation */
.navigation-container {  
   position: fixed;
   top: 0; 
   left: 0; 
   right: 0;
   padding: .3rem 8%; 
}

.navigation-items {  
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

.navigation-items h3 i{
    margin: 1.3rem 0 0;
}

.logo {
    margin-right: auto;
}

 <!-- Container -->
     <div >
        <!-- Navigation -->
        <div >
          <span ></span>
          <!-- Results Nav-->
          <span  id="resultsNav">
            <h1 >logo</h1>
            <h3><i ></i></h3>
            <h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h3>
            <h3><i ></i></h3>
          </span>
        </div>
      </div>

CodePudding user response：

Use text align property on the logo.

text-align: left;