CODEWITHSUNDEEP
cssflexboxalignmentnavbarnav
Sarah
Sarah

Reputation: 53

CSS Nav Bar not aligning to the right using Flex

I am trying out "flex" with CSS. I cannot get my nav bar to move to the right. I have tried for hours using margin, changing displays, using float. It won't move passed the middle... Sorry i'm still learning

I have pasted a link to my codepen to show you a better picture:

https://codepen.io/Saharalara/pen/pGyQWZ

The HTML

 <div id="page-wrapper">
 <header>
 <div class="logo">
  <img id="header-img" src="https://upload.wikimedia.org/" alt="Minnie Pic"> 
  <span id="logo-name">Minnie & Friends Inc</span>
 </div>
 <nav id="nav-bar">
  <ul id="nav-ul">
   <li class="nav-link"><a href="#stories">Stories</a><li>
   <li class="nav-link"><a href="#toys">Toys</a><li>
   <li class="nav-link"><a href="#suscribe">Suscribe</a></li>
 </ul>
</nav>
</header>
<body>
<container id="container1">
 <section>
  <h1 id="stories">Minnie & Friends Stories</h1>
   <p>
   <a href="#"> Here</a> you will find all of the best Minnie & Friends toys 
   and stories.
   Choose from a huge variety of stories and the happy gang and they go on 
   many adventures.
  </p>
   <section>
    <iframe id="video" height="180" src="https://www.youtube.com/watch? 
     v=crJ1CwD_TX0" frameborder="1" allowfullscreen ></iframe>
  </section>
<h2 id="toys">Minnie & Friends Toys</h2>
<p>
  <a href="#">Here</a> you will also find many of your favourite characters 
   to choose from and order to arrive at your doorstep to continue their 
   adventures with you.
</p>
<h3 id="suscribe">Suscribe to our newletter</h3>
</section>
</container>
</body>

The Css

#page-wrapper {
 position: relative;
 color: black;
 margin: -9px;
 padding: 10px;
 border: 4px solid;
 border-radius: 3px;
 background-color: rgba(223, 42, 42, 0.20);
 padding: 10px 20px 20px 20px;
}

header {
 display: flex;
 font-size: 1.3em;
 margin-left: -10px;
 margin-right: -10px;
 background-image: url('https://cdn2.vectorstock.com/i/1000x1000/07/66/pink- 
 white-star-polka-dots-background-vector-7590766.jpg');
 opacity: 0.80;
}

#header-img {
 height: 120px;
}

#logo-name {
 font-size: 2em; 
 color: black;
}

h1,
h2,
h3 {
font-size: 2em;
}

//navigation bar

#nav-bar {
display: flex;
justify-content: flex-end; //**not working***
}

#nav-ul {
list-style-type: none;
display: flex;
}

nav li {
 padding: 4px;

}

//body

p {
 font-size: 1.2em;
}

#video {
 border: 5px solid;
 border-radius: 3px;
 color: pink;
}

Upvotes: 0

Views: 2574

Answers (3)

T. Jefferds
T. Jefferds

Reputation: 61

Since the Header element is the container just add justifi-content: space-between; and this will force the elements to go left and right. Another way is to put position: absolute; right: 0; to the nav-bar container but the first way is cleaner.

Upvotes: 1

Andy Hoffman
Andy Hoffman

Reputation: 19109

Fix 1

The best way to fix this (to me) is to control layout at the flex container (parent) level. It's straightforward and declarative.

header {
…
  justify-content: space-between;
}

Fix 2

Another way is to add flex-grow: 1 to your #nav-bar.

#nav-bar {
  …
  flex-grow: 1;
}

In this instance, setting flex-grow to 1 tells the element to take up the available space in its flex container.

Fix 3

The non-flexbox way would be to add a left auto margin to the #nav-bar, effectively pushing it as far right as possible.

#nav-bar {
  …
  margin-left: auto;
}

Upvotes: 3

Martin Čapek
Martin Čapek

Reputation: 54

since your header has display: flex property, his childs act like flex items.

So if you want to move whole .nav-bar to right you have to set margin-left: auto to .nav-bar so that element will be pushed to right.

Means .nav-bar will have as big margin as can without breaking on new line from left so element will move to right.

Upvotes: 1

Related Questions