CODEWITHSUNDEEP
htmlcssflexbox
Jack Averill
Jack Averill

Reputation: 841

Flexbox justify-content property stops working at a media query

I've been trying to vertically center my logo and unordered list in my header with flex CSS, which I've succeeded in doing, but now I can't get them to float to the left and right sides of the header. The float:left and float:right values I had before don't seem to affect the child divs, so I've added 

justify-content: space-between;

to the header to achieve this. It seems to work when the browser is full width, however when my first media query begins at 1080px, I have set my unordered list to disappear and be replaced by a navigation menu icon. For some reason the menu icon refuses to float to the right of the header – does anyone have any idea why?

.header {
width: 75%;
height: 100px;
margin: 0 auto; 
display: flex;
align-items: center;
justify-content: space-between;
}

img.standard.logo { 
height: 40px;
width: 360px; 
}

.header nav ul{
display:block;
padding:0;
margin-top:12px;
margin-bottom:0px;
list-style:none; 
}

@media only screen 
and (min-width : 0px) 
and (max-width : 1080px) {


img.standard.logo {
height: 38px;
width: 342px;
}

img.menu.button { 
display:block;
margin-top:3px;
width:35px;
height:35px; 
background-size: 100%;
}

}
<header class="header">
   <!-- LOGOS -->
   <a href="#">
   <img class="standard logo" src="http://www.mywebsite.co.uk/wp-content/uploads/2015/12/Logo-2.png">
   <img class="white logo" src="http://www.mywebsite.co.uk/wp-content/uploads/2016/01/Logo_White.png"></a>
   <!-- LOGOS -->
   <img class="menu button" src="http://www.mywebsite.co.uk/wp-content/uploads/2016/01/Menu.png">
   <!-- HEADER NAVIGATION MENU --> 
   <nav class="header-nav">
      <div class="menu-header-menu-container">
         <ul id="menu-header-menu" class="menu">
            <li id="menu-item-463">
               <a href="#">WORK</a>
               <ul class="sub-menu">
                  <li id="menu-item-584"><a href="#">LANDSCAPES</a></li>
                  <li id="menu-item-473"><a href="#">SEASCAPES</a></li>
                  <li id="menu-item-478"><a href="#">MACRO</a></li>
                  <li id="menu-item-477"><a href="#">CITIES</a></li>
                  <li id="menu-item-475"><a href="#">LONG EXPOSURE</a></li>
                  <li id="menu-item-480"><a href="#">MISCELLANEOUS</a></li>
               </ul>
            </li>
            <li id="menu-item-10"><a href="#">ABOUT</a></li>
            <li id="menu-item-464"><a href="#">SHOP</a></li>
            <li id="menu-item-923">
               <a href="#">SOCIAL</a>
               <ul class="sub-menu">
                  <li id="menu-item-11"><a target="_blank" href="#">FACEBOOK</a></li>
                  <li id="menu-item-924"><a href="#">INSTAGRAM</a></li>
                  <li id="menu-item-15"><a target="_blank" href="#">FLICKR</a></li>
               </ul>
            </li>
            <li id="menu-item-14"><a href="#">CONTACT</a></li>
         </ul>
      </div>
   </nav>
</header>

Upvotes: 1

Views: 2546

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371579

Try adding margin-left: auto to the nav menu icon in the media query.

The reason justify-content: space-between isn't working as you expect in the media query is that your flex container – .header – despite showing only two flex items (the logo and the nav icon), actually contains three flex items.

The third item is the main navigation menu, which can't be seen because it contains a descendant with display: none.

So with space-between the container is set up like this:

LOGO                                    NAV ICON                                   NAV MENU

When the screen is wide enough, the NAV ICON has display: none. So space-between works as intended: LOGO and NAV MENU align at opposite edges.

But when the media query kicks in at 1080px, the display: none switches from NAV ICON to a descendant of NAV MENU. So even though NAV MENU disappears, it's still occupying that space, and NAV ICON stays in the middle.

You could either apply the display: none to the NAV MENU itself, or use flex auto margins to force NAV ICON to the right edge.

Also, the reason your float: right and float: left don't work is because the float property is ignored in a flex container.

3. Flex Containers: the flex and inline-flex display values

  • float and clear have no effect on a flex item, and do not take it out-of-flow.

Upvotes: 4

Related Questions