Responsive Banner CSS/HTML

Question

I am trying to make my header/banner (which will eventually be input into a SharePoint masterpage) responsive. I have a set height for the header, where usually if I am making anything responsive, I set the height to auto.

I am using a flex to contain the info within the banner. When I toggle the device emulation and make the window smaller, the headers push right and eventually are hidden along with the image on the right.

I want to make it so that when the viewport shrinks small enough, all of the headers are contained in something along the lines of an accordion or create my own button(dropdown) with the same styling as an accordion. Would I need to utilize:before or:after.

Something like this (containing all of the headers/anchors when in a small viewport):

Here is my original snippet & Fiddle :

 body { font-family: Arial, Helvetica, sans-serif; }.armylogo{ float: left; justify-content: center; height: 95%; bottom: 0; width: auto; vertical-align: baseline; }.armylogo2{ float: right; justify-content: center; height: 95%; bottom: 0; width: auto; vertical-align: baseline; }.navbar { overflow: hidden; background-color: #104723; height: 94px; width: 100%; text-align: right; float: left; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; }.navbar a { float: left; font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none; vertical-align: center; }.dropdown { float: left; overflow: hidden; vertical-align: center; }.dropdown.dropbtn { font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; }.navbar a:hover, .dropdown:hover.dropbtn { background-color: #104723; }.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; }.dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; }.dropdown-content a:hover { background-color: #ddd; }.dropdown:hover.dropdown-content { display: block; }

 <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="navbar"> <img src="https://upload.wikimedia.org/wikipedia/commons/1/17/Military_service_mark_of_the_United_States_Army.png" class="armylogo"/> <a href="#home">Home</a> <a href="#news">News</a> <a href="#test1">Test 1</a> <a href="#test2">Test 2</a> <a href="#test3">Test 3</a> <div class="dropdown"> <button class="dropbtn">Dropdown <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> <img src="https://upload.wikimedia.org/wikipedia/commons/1/17/Military_service_mark_of_the_United_States_Army.png" class="armylogo2"/> </div>

HERE IS THE UPDATED VERSION FROM ANSWER (STILL NOT WORKING)

 .navbar { /* overflow: hidden; */ /* not needed */ background-color: #104723; height: 94px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; /* possibly leave out to keep both logos visible for narrow views */ }.armylogo, .armylogo2 { height: 95%; /* bottom: 0; they should just sit in space */ padding: 0 2px; /* keep logo from touching edge */ width: auto; }.navbar a { font-size: 16px; color: #fff; /* use one type of color values */ padding: 14px 16px; text-decoration: none; } body { font-family: Arial, Helvetica, sans-serif; } @media only screen and (max-width: 600px) {.newDiv { width:50%; display:flex; flex-wrap:wrap; } }.navbar a { font-size: 16px; color: #fff; /* use one type of color values */ padding: 14px 16px; text-decoration: none; }.navbar a { float: left; font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none; vertical-align: center; }.dropdown { float: left; overflow: hidden; vertical-align: center; }.dropdown.dropbtn { font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; }.navbar a:hover, .dropdown:hover.dropbtn { background-color: #104723; }.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; }.dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; }.dropdown-content a:hover { background-color: #ddd; }.dropdown:hover.dropdown-content { display: block; }

 <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="navbar"> <img src="https://upload.wikimedia.org/wikipedia/commons/1/17/Military_service_mark_of_the_United_States_Army.png" class="armylogo"/> <div class="newDiv"> <a href="#home">Home</a> <a href="#news">News</a> <a href="#test1">Test 1</a> <a href="#test2">Test 2</a> <a href="#test3">Test 3</a> <div class="dropdown"> <button class="dropbtn">Dropdown <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> </div> <img src="https://upload.wikimedia.org/wikipedia/commons/1/17/Military_service_mark_of_the_United_States_Army.png" class="armylogo2"/> </div>

Answer 1

You can wrap this part of your component in a div and then you can give this properties to that div in media query.

      <a href="#home">Home</a>
      <a href="#news">News</a>
      <a href="#test1">Test 1</a>
      <a href="#test2">Test 2</a>
      <a href="#test3">Test 3</a>
    
      <div class="dropdown">
        <button class="dropbtn">Dropdown 
          <i class="fa fa-caret-down"></i>
        </button>
        <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>

Also for your a elements and.dropdown you should give width:%50 in media query then they will be 3 rows and 2 columns in total. Of course you can also change font sizes or other featerus in media query.

@media only screen and (max-width: 600px) {
      .newDiv {
              width:100%;
              display:flex;
              flex-wrap:wrap;
          }
    }

  

Answer 2

Agree with @EvrenK about the approach. One thing to note about the ::before and ::after pseudo-elements is that you can't attach events. So really a styled button would be the best approach, with the best semantics too.

A little off topic, but noticed a few general things about your sample. One practice that might help is grouping your selectors, also you have some bonus declarations floating around. Flexbox should pretty much buy you everything you'll need for this nav. So no float ing.

CSS tends to be kinda verbose and carving away the extra stuff generally makes it a lot more readable/less headache inducing.

.navbar {
  /* overflow: hidden; */ /* not needed */
  background-color: #104723;
  height: 94px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap; /* possibly leave out to keep both logos visible for narrow views */
}

.armylogo,
.armylogo2 {
  height: 95%;
  /* bottom: 0;  they should just sit in space */
  padding: 0 2px; /* keep logo from touching edge */
  width: auto;
}

.navbar a {
  font-size: 16px;
  color: #fff; /* use one type of color values */
  padding: 14px 16px;
  text-decoration: none;
}