2 part responsive HTML & CSS navigation with dropdown menus

Question

I am trying to create a responsive HTML and CSS navigation menu with 2 parts & some dropdown menus.

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.

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.

I have attached all my code below, but need some help with the responsive header.

Thanks in advance for any help.

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;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, 	user-scalable=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<header>
  <div id="top-header">
    <ul>
      <li class="dropdown">
        <a class="dropbtn">DROPDOWN 1 <i id="header-down-arrow" class="fa fa-sort-desc"></i></a>
        <div class="dropdown-content">
          <a href="#" style="text-align: center;">DROPDOWN ITEM</a>
          <a href="#" style="text-align: center; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;">DROPDOWN ITEM</a>
        </div>
      </li>

      <li class="dropdown">
        <a class="dropbtn">DROPSOWN 2 <i id="header-down-arrow" class="fa fa-sort-desc"></i></a>
        <div class="dropdown-content">
          <a href="#" style="text-align: center;">DROPDOWN ITEM</a>
          <a href="#" style="text-align: center;">DROPDOWN ITEM</a>
          <a href="#" style="text-align: center; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;">DROPDOWN ITEM</a>
        </div>
      </li>

      <li><a href="#">ITEM</a></li>

      <li><a href="#">ITEM</a></li>

      <li style="float: right;"><a href="#">ITEM</a></li>

      <li style="float: right;"><a href="#">ITEM</a></li>

    </ul>
  </div>
  <div id="bottom-header" style="margin-bottom: 0%; padding: 0px;">
    <a href="index.html" style="float: left; width: 30%; margin: 0px; padding: 0px;">
      <h1 style="font-size: 30px; color: white; margin: 20px; padding: 0px; float: left; text-align: center;">WEBSITE NAME</h1>
      <img src="Photos/logo.png" style="width: 40px; height: 40px; margin-top: 15px;">
    </a>

    <nav id="main-nav" style="float: right; width: 70%;">
      <ul>
        <li class="dropdown">
          <a class="dropbtn">DROPDOWN 3 <i id="header-down-arrow" class="fa fa-sort-desc"></i></a>
          <div class="dropdown-content">
            <a href="#" style="text-align: center;">DROPDOWN ITEM</a>
            <a href="#" style="text-align: center; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;">DROPDOWN ITEM</a>
          </div>
        </li>

        <li class="dropdown">
          <a class="dropbtn">DROPDOWN 4 <i id="header-down-arrow" class="fa fa-sort-desc"></i></a>
          <div class="dropdown-content">
            <a href="#" style="text-align: center;">DROPDOWN ITEM</a>
            <a href="#" style="text-align: center; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;">DROPDOWN ITEM</a>
          </div>
        </li>
      </ul>
    </nav>
  </div>
</header>

It responds to hover. How else do you want it to be responsive? — Jensei
– Jensei, Commented Aug 1, 2018 at 7:43
The best way to make it responsive is under 1024px, make a hamburger menu that by default is hidden. The new layout should include all of your menus inside the hamburger menu positioned before the website name, or floated to the right(depends on your taste) — Torjescu Sergiu
– Torjescu Sergiu, Commented Aug 1, 2018 at 7:45

AKASH PANDEY · Accepted Answer · 2018-08-01 07:53:56Z

1

From how much i can understand you want the image and the website-name and dropdowns on the same line for mobile.

The problem with your layout is dude there are many things you need to override 1. you have used h1 tag with margin and its default display is block u will have to change it to inline-block; and on the anchor tag trying using

   display: flex;
   flex-direction: row;

It would need more adjustments you can learn about media queries they could come in handy as well.

And try to give a clear picture of exactly what you want.

And for mobile phones this will break try to use hamburger menu you can check it on my github profile I have implemented something similar.

git hub project check it out.

answered Aug 1, 2018 at 7:53

AKASH PANDEY

3632 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Torjescu Sergiu Over a year ago

there is no way to fit them in a single row

AKASH PANDEY Over a year ago

yeah i know that for mobile screen it is not possible to to but for ipads and tabs it would work fine

Mohammad Esmaeili · Accepted Answer · 2018-08-01 08:06:07Z

1

You must write CSS Class that what you want make it RESPONSIVE in @media Class

@media class is like this :

@media screen and (max-width : 1024px)
{
.
/* your css class */
.
}

For learn more check this link :

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

answered Aug 1, 2018 at 8:06

Mohammad Esmaeili

1552 gold badges2 silver badges13 bronze badges

Comments

Dicarva · Accepted Answer · 2018-08-01 08:45:42Z

1

My really advice for your is to using css media queries [https://www.w3schools.com/howto/howto_js_topnav_responsive.asp ] and if you want to try and if you feel you're take to much time in that problem use bootstrap for to fix the nav bar and then you can use your own css [https://getbootstrap.com/docs/4.0/components/navbar/]

I hope you that helps in something

answered Aug 1, 2018 at 8:45

Dicarva

759 bronze badges

Collectives™ on Stack Overflow

2 part responsive HTML & CSS navigation with dropdown menus

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related