1

Basically, I'm trying to move my hamburger menu div to the right side of the page with Flexbox, but it refuses to budge. I've tried the flex-start/flex-end stuff, I've tried margin-right/left auto, but it doesn't seem to work.

The only thing that makes it work is if I put in a fix left margin, but when the screen size shrinks, it basically pushes the logo off the screen.

What's wrong with my code?

/*Parent Element*/

#nav-bar {
  display: flex;
  justify-content: space-between;
  padding-top: 1rem;
}


/*Children*/

#logo {
  flex: 2;
  justify-self: flex-start;
  max-width: 6em;
  margin-right: auto;
}

#mobile-nav {
  flex: 1;
  justify-self: flex-end;
  margin-left: auto;
}
<div id="nav-bar">
  <div id="logo"><img src="./img/logo.png" alt=""> </div>
  <div id="mobile-nav">
    <div></div>
    <div></div>
    <div></div>
  </div>
  <ul id="main-nav">
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
    <li>Item4</li>
    <li><a href="''" class="btn">CTA</a></li>
  </ul>
</div>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
jollyjwhiskers
  • 341
  • 1
  • 3
  • 12
  • removing flex, justify-self and margin-right/left property from logo and mobile-nav should work in ideal cases unless another css is being implied on any of them. – 3Demon Feb 26 '19 at 07:51
  • hey @3Demon removing those items you suggested worked! I can't believe I've spent all day trying to figure this out when the solution was so simple! – jollyjwhiskers Feb 26 '19 at 08:04

2 Answers2

2

This is how I would do it.

#nav-bar{
 display: flex;
 flex-flow: row;
 width: 100%;
 justify-content: space-between;
}

#logo{}

#mobile-nav{}
3Demon
  • 550
  • 3
  • 9
1

Flex auto margins work by consuming free space in the direction of the margin. For example, margin-right: auto consumes all free space to the right of the element. This has the effect of pinning the element and siblings on its left all the way to the left, while pinning siblings to its right all the way to the right.

The problem in your code is that you have flex-grow (via the flex shorthand property). Well, flex-grow, like auto margins, works by consuming free space. Since flex-grow distributes all free space on the line, there is nothing auto margins can do (there is no free space available for them to use).

The justify-content property also works through distribution of free space, and will be useless when flex-grow is in play.

Solution: remove flex-grow.

Here's a more detailed explanation with illustrations:

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • 1
    Thanks for the detailed explanation! I managed to get it to work in the end by using space between and getting rid of all the other CSS I had put in. Works perfectly now, although I've stumbled across a completely unrelated problem with the width of my page being too wide when I view it on my macbook compared to the PC I used to work from. Might have to pop by and ask you guys again if I can't figure it out haha. – jollyjwhiskers Feb 26 '19 at 17:02