title: 2 part responsive HTML & CSS navigation with dropdown menus
body: <p>I am trying to create a responsive HTML and CSS navigation menu with 2 parts &amp; some dropdown menus.</p>
  
  <p>I have looked at lots of youtube videos, but could not seem to find a responsive template for the 2 part for the navigation menu.</p>
  
  <p>The top part of the navigation has 2 dropdown menus and 2 standard pages. The bottom part of the navigation has a title, a logo and 2 dropdown menus.</p>
  
  <p>I have attached all my code below, but need some help with the responsive header.</p>
  
  <p>Thanks in advance for any help.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    padding: 0;
    margin: 0;
    font-size: 15px;
    font-family: Avenir;
    color: black;
    background-color: white;
  }
  
  header {
    top: 0;
    width: 100%;
  }
  
  #top-header ul li i {
    color: #00a63f;
    float: right;
    margin-left: 10px;
    margin-top: -2.5px;
  }
  
  #top-header ul {
    list-style-type: none;
    font-size: 19px;
    margin: 0% 2.5%;
    padding: 0;
    overflow: hidden;
    background-color: white;
  }
  
  #top-header li {
    float: left;
  }
  
  #top-header li a,
  .dropbtn {
    display: inline-block;
    text-align: center;
    color: #00a63f;
    text-align: center;
    padding: 17px;
    text-decoration: none;
  }
  
  #top-header li a:hover {
    background-color: #f1f1f1;
    color: black;
  }
  
  #top-header li a:hover i {
    background-color: #f1f1f1;
    color: black;
  }
  
  #top-header li.dropdown {
    display: inline-block;
  }
  
  #top-header .dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 200px;
    border: 2px solid #333333;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    z-index: 1;
  }
  
  #top-header .dropdown-content a {
    color: #00a63f;
    text-align: center;
    padding: 12px;
    text-decoration: none;
    display: block;
    text-align: left;
  }
  
  #top-header .dropdown:hover .dropbtn {
    background-color: #f1f1f1;
    color: black;
  }
  
  #top-header .dropdown:hover i {
    color: black;
  }
  
  #top-header .dropdown-content a:hover {
    background-color: #f1f1f1;
    color: black;
  }
  
  #top-header .dropdown:hover .dropdown-content {
    display: block;
  }
  
  #top-header .dropdown {
    text-align: center;
  }
  
  
  /* Main Navagation */
  
  #main-nav ul li i {
    color: white;
    float: right;
    margin-left: 10px;
    margin-top: -2.5px;
  }
  
  #main-nav ul {
    list-style-type: none;
    font-size: 20px;
    margin: 0% 2.5%;
    padding: 0;
    float: left;
    overflow: hidden;
    background-color: #00a63f;
  }
  
  #main-nav li {
    float: left;
  }
  
  #main-nav li a,
  #main-nav .dropbtn {
    display: inline-block;
    text-align: center;
    color: white;
    padding: 27px;
    height: 100%;
    text-align: center;
    text-decoration: none;
  }
  
  #main-nav li a:hover {
    background-color: #18bf59;
    color: white;
  }
  
  #main-nav li a:hover i {
    background-color: #18bf59;
    color: white;
  }
  
  #main-nav li.dropdown {
    display: inline-block;
  }
  
  #main-nav .dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 200px;
    border: 2px solid #333333;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    z-index: 1;
  }
  
  #main-nav .dropdown-content a {
    color: #00a63f;
    text-align: center;
    padding: 15px;
    font-size: 18px;
    text-decoration: none;
    display: block;
    text-align: left;
  }
  
  #main-nav .dropdown:hover .dropbtn {
    background-color: #18bf59;
    color: white;
  }
  
  #main-nav .dropdown:hover i {
    color: white;
  }
  
  #main-nav .dropdown-content a:hover {
    background-color: #f1f1f1;
    color: black;
  }
  
  #main-nav .dropdown:hover .dropdown-content {
    display: block;
  }
  
  #main-nav .dropdown {
    text-align: center;
  }
  
  
  /* Top Header */
  
  #top-header {
    width: 100%;
    border-bottom: 2px solid #333333;
  }
  
  #left-top-header {
    width: auto;
    float: left;
  }
  
  #right-top-header {
    width: auto;
    float: right;
  }
  
  
  /* Bottom Header */
  
  #bottom-header {
    width: 100%;
    background-color: #00a63f;
    border-bottom: 2px solid #333333;
    display: inline-block;
  }
  
  #top-header ul li i {
    color: #00a63f;
    float: right;
    margin-left: 10px;
    margin-top: -2.5px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"&gt;
  
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,  user-scalable=no"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  
  &lt;header&gt;
    &lt;div id="top-header"&gt;
      &lt;ul&gt;
        &lt;li class="dropdown"&gt;
          &lt;a class="dropbtn"&gt;DROPDOWN 1 &lt;i id="header-down-arrow" class="fa fa-sort-desc"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;div class="dropdown-content"&gt;
            &lt;a href="#" style="text-align: center;"&gt;DROPDOWN ITEM&lt;/a&gt;
            &lt;a href="#" style="text-align: center; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;"&gt;DROPDOWN ITEM&lt;/a&gt;
          &lt;/div&gt;
        &lt;/li&gt;
  
        &lt;li class="dropdown"&gt;
          &lt;a class="dropbtn"&gt;DROPSOWN 2 &lt;i id="header-down-arrow" class="fa fa-sort-desc"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;div class="dropdown-content"&gt;
            &lt;a href="#" style="text-align: center;"&gt;DROPDOWN ITEM&lt;/a&gt;
            &lt;a href="#" style="text-align: center;"&gt;DROPDOWN ITEM&lt;/a&gt;
            &lt;a href="#" style="text-align: center; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;"&gt;DROPDOWN ITEM&lt;/a&gt;
          &lt;/div&gt;
        &lt;/li&gt;
  
        &lt;li&gt;&lt;a href="#"&gt;ITEM&lt;/a&gt;&lt;/li&gt;
  
        &lt;li&gt;&lt;a href="#"&gt;ITEM&lt;/a&gt;&lt;/li&gt;
  
        &lt;li style="float: right;"&gt;&lt;a href="#"&gt;ITEM&lt;/a&gt;&lt;/li&gt;
  
        &lt;li style="float: right;"&gt;&lt;a href="#"&gt;ITEM&lt;/a&gt;&lt;/li&gt;
  
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div id="bottom-header" style="margin-bottom: 0%; padding: 0px;"&gt;
      &lt;a href="index.html" style="float: left; width: 30%; margin: 0px; padding: 0px;"&gt;
        &lt;h1 style="font-size: 30px; color: white; margin: 20px; padding: 0px; float: left; text-align: center;"&gt;WEBSITE NAME&lt;/h1&gt;
        &lt;img src="Photos/logo.png" style="width: 40px; height: 40px; margin-top: 15px;"&gt;
      &lt;/a&gt;
  
      &lt;nav id="main-nav" style="float: right; width: 70%;"&gt;
        &lt;ul&gt;
          &lt;li class="dropdown"&gt;
            &lt;a class="dropbtn"&gt;DROPDOWN 3 &lt;i id="header-down-arrow" class="fa fa-sort-desc"&gt;&lt;/i&gt;&lt;/a&gt;
            &lt;div class="dropdown-content"&gt;
              &lt;a href="#" style="text-align: center;"&gt;DROPDOWN ITEM&lt;/a&gt;
              &lt;a href="#" style="text-align: center; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;"&gt;DROPDOWN ITEM&lt;/a&gt;
            &lt;/div&gt;
          &lt;/li&gt;
  
          &lt;li class="dropdown"&gt;
            &lt;a class="dropbtn"&gt;DROPDOWN 4 &lt;i id="header-down-arrow" class="fa fa-sort-desc"&gt;&lt;/i&gt;&lt;/a&gt;
            &lt;div class="dropdown-content"&gt;
              &lt;a href="#" style="text-align: center;"&gt;DROPDOWN ITEM&lt;/a&gt;
              &lt;a href="#" style="text-align: center; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;"&gt;DROPDOWN ITEM&lt;/a&gt;
            &lt;/div&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
    &lt;/div&gt;
  &lt;/header&gt;</code></pre>
  </div>
  </div>
  </p>