Navbar-Layout mit flexbox: So positionieren Sie Link oder Absatz inline/neben dem Menüsymbol

Question

Ich arbeite an einer Navigationsleiste oben auf einer Seite. Ich benutze flexbox für die Positionierung der Elemente der Navbar; Auf der linken Seite habe ich ein animiertes Hamburger-Menü-Icon sowie den Seitentitel, auf der rechten Seite habe ich mehrere Links. Das Icon und der Seitentitel sind in einem <div> enthalten, die Links sind in einem anderen <div> enthalten. Mit flexbox, flex-direction: row und justify-content: space-between positioniere ich jeweils auf gegenüberliegenden Seiten der Seite.

In der linken Seite möchte ich den Seitentitel neben dem Menü-Icon haben. Irgendwie kann ich das nicht verstehen, in meinem Code sitzt der Seitentitel immer unter dem Icon. Sehen Sie diese Geige mit der aktuellen Version von meinem Code (aus irgendeinem Grunde die Animation des Symbols nicht in der Geige arbeiten, die aber für den Nachweis meiner Frage nicht wichtig ist):

function changeicon(x) { 
 
    x.classList.toggle("change"); 
 
}

.flex { 
 
    display: flex; 
 
} 
 

 
.flex-menu { 
 
    flex-direction: row; 
 
    justify-content: space-between; 
 
} 
 

 
.nav { 
 
    left: 0; 
 
    padding: 5px; 
 
    box-sizing: border-box; 
 
    width: 100%; 
 
    position: fixed; 
 
    top: 0.4em; 
 
} 
 

 

 
/* ----- Nav/Menu Icon --------------------------------------------- */ 
 

 
.icon-container { 
 
    display: inline; 
 
    cursor: pointer; 
 
} 
 

 
.bar1, 
 
.bar2, 
 
.bar3 { 
 
    width: 35px; 
 
    height: 3px; 
 
    background-color: black; 
 
    margin: 6px 0; 
 
    transition: all 400ms ease; 
 
} 
 

 

 
/*--- Rotation of the first bar */ 
 

 
.change .bar1 { 
 
    transform: rotate(-45deg) translate(-6px, 6px); 
 
} 
 

 

 
/* Fade out the second bar */ 
 

 
.change .bar2 { 
 
    opacity: 0; 
 
} 
 

 

 
/* Rotate last bar */ 
 

 
.change .bar3 { 
 
    transform: rotate(45deg) translate(-6px, -8px); 
 
}

<div class="nav flex flex-menu"> 
 

 
    <div class="icon-container" onclick="changeicon(this)"> 
 
    <div class="bar1"></div> 
 
    <div class="bar2"></div> 
 
    <div class="bar3"></div> 
 

 
    <a href="">Page Title</a> 
 
    </div> 
 

 
    <div> 
 
    <a href="" target="blank">Link1</a> 
 
    <a href="" target="blank">Link2</a> 
 
    <a href="" target="blank">Link3</a> 
 
    </div> 
 

 
</div>

Wie muss ich die Elemente in der <div> auf der linken Seite so einrichten, dass sie nebeneinander erscheinen?

Answer 1

Setzen Titel in separaten div und schieben Sie es nach links mit margin-right: auto

function changeicon(x) { 
 
    x.classList.toggle("change"); 
 
}

.flex { 
 
    display: flex; 
 
} 
 

 
.flex-menu { 
 
    flex-direction: row; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
} 
 

 
.nav { 
 
    left: 0; 
 
    padding: 5px; 
 
    box-sizing: border-box; 
 
    width: 100%; 
 
    position: fixed; 
 
    top: 0.4em; 
 
} 
 

 

 
/* ----- Nav/Menu Icon --------------------------------------------- */ 
 

 
.icon-container { 
 
    display: inline; 
 
    cursor: pointer; 
 
} 
 

 
.page-title { 
 
    margin-right: auto; 
 
    padding: 5px; 
 
} 
 

 
.bar1, 
 
.bar2, 
 
.bar3 { 
 
    width: 35px; 
 
    height: 3px; 
 
    background-color: black; 
 
    margin: 6px 0; 
 
    transition: all 400ms ease; 
 
} 
 

 

 
/*--- Rotation of the first bar */ 
 

 
.change .bar1 { 
 
    transform: rotate(-45deg) translate(-6px, 6px); 
 
} 
 

 

 
/* Fade out the second bar */ 
 

 
.change .bar2 { 
 
    opacity: 0; 
 
} 
 

 

 
/* Rotate last bar */ 
 

 
.change .bar3 { 
 
    transform: rotate(45deg) translate(-6px, -8px); 
 
}

<div class="nav flex flex-menu"> 
 

 
    <div class="icon-container" onclick="changeicon(this)"> 
 
    <div class="bar1"></div> 
 
    <div class="bar2"></div> 
 
    <div class="bar3"></div> 
 
    </div> 
 
    <div class="page-title"> 
 
    <a href="">Page Title</a> 
 
    </div> 
 
    <div> 
 
    <a href="" target="blank">Link1</a> 
 
    <a href="" target="blank">Link2</a> 
 
    <a href="" target="blank">Link3</a> 
 
    </div> 
 

 
</div>