CODEWITHSUNDEEP
htmlcss
eskimomo
eskimomo

Reputation: 11

Navigation bar: home page on the left hand side with the same height

I am trying to create a navigation bar with hover and dropdown menu links to it. However, I want to:

  1. place the home button on the left hand side (now it is on the right hand side)
  2. let home button has the equal height as the rest
  3. adjust the width of the dropdown menu as the same as the button.

Appreciate any recommendation on how to improve the code.

Please find below the link to the jsbin file: https://jsbin.com/yokujek/edit?html,css,output

.navigationmenu {
  overflow: auto;
  background-color: #333;
  white-space: nowrap;
}

.navigationmenu a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

.dropdown {
  float: left;
  width: 20%;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navigationmenu a:hover,
.dropdown:hover .dropbtn {
  background-color: 777;
}

.dropdown-content {
  display: none;
  position: absolute;
  min-width: 20%;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  -ms-box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  -o-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: center;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content,
.dropdown:focus .dropdown-content {
  display: block;
}
<div class="navigationmenu">
  <a href="Welcomepage.html">Home</a>
  <div class="dropdown">
    <a href="Aboutus.html"><button class="dropbtn">About Us</button></a>
    <div class="dropdown-content">
      <a href="meettheteam.html">Meet the Team</a>
      <a href="timeline.html">Timeline</a>
      <a href="businessmodel.html">Business Model</a>
    </div>
  </div>
  <div class="dropdown">
    <a href="Events.html"><button class="dropbtn">Events</button></a>
    <div class="dropdown-content">
      <a href="generalpublic.html">Events for General Public</a>
      <a href="introductory.html">Introductory Level</a>
      <a href="intermediate.html">Intermediate Level</a>
      <a href="expert.html">Expert Level</a>
    </div>
  </div>
  <div class="dropdown">
    <a href="Projects.html"><button class="dropbtn">Projects</button></a>
    <div class="dropdown-content">
      <a href="studentproject.html">Individual Projects</a>
      <a href="rlabprojects.html">R:Lab Projects</a>
      <a href="corporateprojects.html">R:Lab Partner's Projects</a>
    </div>
  </div>
  <div class="dropdown">
    <a href="Resources.html"><button class="dropbtn">Resources</button></a>
    <div class="dropdown-content">
      <a href="http://WWW.MOSTAQBAL.AE">Applied Science Research News (Arabic) </a>
      <a href="industry.html">Industry Opportunitiese</a>
      <a href="furtherstudy.html">Further Study Opportunities</a>
    </div>
  </div>
</div>

Thanks!

Upvotes: 0

Views: 72

Answers (2)

Gerard
Gerard

Reputation: 15786

In the code below I used a flexbox for the navigation menu. This was, all floats can be removed and all HTML elements stay within the natural document flow.

.navigationmenu {
  background-color: #333;
  display: flex;
  align-items: center;
  /* Vertical alignment */
  justify-content: space-around;
  /* Horizontal alignment */
}

.navigationmenu>* {
  width: 20%; /* Set all direct children of the nav.menu to 20% width */
}

.navigationmenu a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  color: white;
  padding: 14px;
  background-color: inherit;
  font-family: inherit;
}

.navigationmenu a:hover,
.dropdown:hover .dropbtn {
  background-color: 777;
}

.dropdown-content {
  display: none;
  position: absolute;
  max-width: 20%;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  white-space: pre-line;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: center;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}
<div class="navigationmenu">
  <a href="Welcomepage.html">Home</a>
  <div class="dropdown">
    <a href="Aboutus.html"><button class="dropbtn">About Us</button></a>
    <div class="dropdown-content">
      <a href="meettheteam.html">Meet the Team</a>
      <a href="timeline.html">Timeline</a>
      <a href="businessmodel.html">Business Model</a>
    </div>
  </div>
  <div class="dropdown">
    <a href="Events.html"><button class="dropbtn">Events</button></a>
    <div class="dropdown-content">
      <a href="generalpublic.html">Events for General Public</a>
      <a href="introductory.html">Introductory Level</a>
      <a href="intermediate.html">Intermediate Level</a>
      <a href="expert.html">Expert Level</a>
    </div>
  </div>
  <div class="dropdown">
    <a href="Projects.html"><button class="dropbtn">Projects</button></a>
    <div class="dropdown-content">
      <a href="studentproject.html">Individual Projects</a>
      <a href="rlabprojects.html">R:Lab Projects</a>
      <a href="corporateprojects.html">R:Lab Partner's Projects</a>
    </div>
  </div>
  <div class="dropdown">
    <a href="Resources.html"><button class="dropbtn">Resources</button></a>
    <div class="dropdown-content">
      <a href="http://WWW.MOSTAQBAL.AE">Applied Science Research News (Arabic) </a>
      <a href="industry.html">Industry Opportunitiese</a>
      <a href="furtherstudy.html">Further Study Opportunities</a>
    </div>
  </div>
</div>

Upvotes: 0

Nilesh Naik
Nilesh Naik

Reputation: 761

Since your dropdowns were were float: left and home was an inline-block element it was bringing all the other elements before the home tab.

I have done what you need asked below.

.navigationmenu {
    overflow: auto;
    background-color: #333;
    white-space: nowrap;
}

.navigationmenu a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none;
}

.dropdown {
    float: left;
    width: 20%;
    overflow: hidden;
}

.dropdown .dropbtn {
    font-size: 16px;    
    border: none;
    outline: none;
    color: white;
    padding: 14px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

.navigationmenu a:hover, .dropdown:hover .dropbtn {
    background-color: 777;
}

.dropdown-content {
    display: none;
    position: absolute;
    max-width: 20%;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    white-space: pre-line;
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: center;
}

.dropdown-content a:hover {
    background-color: #ddd;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.home {
  float: left;
  padding:28px 0!important; 
  width: 20%
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="navigationmenu">
            <a href="Welcomepage.html" class="home">Home</a>   
            <div class="dropdown">
                <a href="Aboutus.html"><button class="dropbtn">About Us</button></a>    
                <div class="dropdown-content">
                    <a href="meettheteam.html">Meet the Team</a>
                    <a href="timeline.html">Timeline</a>
                    <a href="businessmodel.html">Business Model</a>
                </div>
            </div>
            <div class="dropdown">
                <a href="Events.html"><button class="dropbtn">Events</button></a>
                <div class="dropdown-content">
                    <a href="generalpublic.html">Events for General Public</a>
                    <a href="introductory.html">Introductory Level</a>
                    <a href="intermediate.html">Intermediate Level</a>
                    <a href="expert.html">Expert Level</a>
                </div>
            </div>
            <div class="dropdown">
                <a href="Projects.html"><button class="dropbtn">Projects</button></a>
                <div class="dropdown-content">
                    <a href="studentproject.html">Individual Projects</a>
                    <a href="rlabprojects.html">R:Lab Projects</a>
                    <a href="corporateprojects.html">R:Lab Partner's Projects</a>
                </div>
            </div>
            <div class="dropdown">
                <a href="Resources.html"><button class="dropbtn">Resources</button></a>
                <div class="dropdown-content">
                    <a href="http://WWW.MOSTAQBAL.AE">Applied Science Research News (Arabic) </a>
                    <a href="industry.html">Industry Opportunitiese</a>
                    <a href="furtherstudy.html">Further Study Opportunities</a>
                </div>
            </div>
        </div>
</body>
</html>

Upvotes: 1

Related Questions