Navigation bar has whitespace above it

Question

I am designing a website, as I am adding clickable button to it. My Nav-bar having some white-space above it.

Previously I have posted same question, but now I don't know what's wrong with my CSS. Please rectify or mention where my CSS is done wrong. I donot want to render my navbar, with white space above it.

So, Please change the CSS, and show me where I am doing error.

I also added css icon to it. As I

function myFunction(event) {
  var clickedElement = event.target;
  console.log(clickedElement);
  if (clickedElement.nodeName != 'BUTTON') {
    clickedElement = clickedElement.parentElement;

  }
  var dropdownElement = clickedElement.nextElementSibling;
  dropdownElement.classList.add('tempClass'); //adding tempclass to avoid this in below loop

  var allOtherDropdowns = document.getElementsByClassName('dropdown-content');

  //close all other dropdowns
  for (var i = 0; i < allOtherDropdowns.length; i++) {
    if (!allOtherDropdowns[i].classList.contains('tempClass')) {
      allOtherDropdowns[i].classList.remove('show');
    }
  }
  dropdownElement.classList.toggle("show");
  dropdownElement.classList.remove('tempClass'); //removing the temp class here
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
  if (!e.target.matches('.dropbtn')) {
    var allDropdowns = document.getElementsByClassName('dropdown-content');

    //close all other dropdowns
    for (var i = 0; i < allDropdowns.length; i++) {
      allDropdowns[i].classList.remove('show');
    }
  }
}

i{
 width: 0;
height: 0;
border-style: solid;
border-width: 8px 5px 0 5px;
border-color: #ffffff transparent transparent transparent;

}
.icon{
 position: relative;
  /* Adjust these values accordingly */
  top: 14px;
  left: 9px;
}
nav {
   height: 40px
  overflow: hidden;
  background-color: #333;
  font-family: Arial, Helvetica, sans-serif;
}

nav a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.drop-btn{
 float: right;
}

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

nav a:hover,
.dropdown:hover .dropbtn,
.dropbtn:focus {
  background-color: red;
}

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

.show {
  display: block;
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
   
</head>

<body>

  <nav>
    <div class="dropdown">
      <button class="dropbtn" onclick="myFunction(event)">Programming
          <i class="icon"></i>
      </button>
      <div class="dropdown-content">
        <a href="#" onclick="myFunc();">Java</a>
        <a href="#">C++</a>
        <a href="#">Python</a>
  <a href="#">Swift</a>
      </div>
    </div>
 
 


    <div class="dropdown">
      <button class="dropbtn" onclick="myFunction(event)">Platform
          <i class="icon"></i>
      </button>
      <div class="dropdown-content">
        <a href="#" onclick="myFunc();">Linux</a>
        <a href="#">Windows</a>
        <a href="#">Development Editor</a>
      </div>
    </div>

    <div class="dropdown">
      <button class="dropbtn" >Algorithm
          
      </button>
      
    </div>
 
 
    <div class="dropdown">
      <button class="dropbtn" onclick="myFunction(event)">Upgrade 4
          <i class="icon"></i>
      </button>
      <div class="dropdown-content">
        <a href="#" onclick="myFunc();">item 10</a>
        <a href="#">item 11</a>
        <a href="#">item 12</a>
      </div>
    </div>
 
 
    <div class="dropdown">
      <button class="dropbtn" onclick="myFunction(event)">Upgrade 4
          <i class="icon"></i>
      </button>
      <div class="dropdown-content">
        <a href="#" onclick="myFunc();">item 10</a>
        <a href="#">item 11</a>
        <a href="#">item 12</a>
      </div>
    </div>
 
 
    <div class="dropdown">
      <button class="dropbtn" onclick="myFunction(event)">Upgrade 4
          <i class="icon"></i>
      </button>
      <div class="dropdown-content">
        <a href="#" onclick="myFunc();">item 10</a>
        <a href="#">item 11</a>
        <a href="#">item 12</a>
      </div>
    </div>


  <nav>

  <h3>Dropdown Menu inside a Navigation Bar</h3>
  <p>Click on the "Dropdown" link to see the dropdown menu.</p>
 

</body>

</html>

Have you checked the html and body to have no margin or padding? ( `html, body { margin: 0; padding: 0; }` ) That tends to be a common stumbling block when positioning things at the very top of the page. — DBS, Apr 07 '20 at 13:18
Still having white-space above the navigation bar. Now the navigation bar has no white-space in side. — , Apr 07 '20 at 13:22
Ah, you have an `h3` with a margin on it that's pushing the nav bar down. — DBS, Apr 07 '20 at 13:24

Y4glory · Accepted Answer · 2020-04-07T13:51:16.973

Your h3 with the text Dropdown Menu inside a Navigation Bar had a margin. Also your body had a small margin. Should be fine now.

function myFunction(event) {
  var clickedElement = event.target;
  //console.log(clickedElement);
  if (clickedElement.nodeName != 'BUTTON') {
    clickedElement = clickedElement.parentElement;

  }
  var dropdownElement = clickedElement.nextElementSibling;
  dropdownElement.classList.add('tempClass'); //adding tempclass to avoid this in below loop

  var allOtherDropdowns = document.getElementsByClassName('dropdown-content');

  //close all other dropdowns
  for (var i = 0; i < allOtherDropdowns.length; i++) {
    if (!allOtherDropdowns[i].classList.contains('tempClass')) {
      allOtherDropdowns[i].classList.remove('show');
    }
  }
  dropdownElement.classList.toggle("show");
  dropdownElement.classList.remove('tempClass'); //removing the temp class here
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
  if (!e.target.matches('.dropbtn')) {
    var allDropdowns = document.getElementsByClassName('dropdown-content');

    //close all other dropdowns
    for (var i = 0; i < allDropdowns.length; i++) {
      allDropdowns[i].classList.remove('show');
    }
  }
}
function myFunc(){return true}

h3,body,html{
  margin:0;
  padding:0;
}
i {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 5px 0 5px;
  border-color: #ffffff transparent transparent transparent;
}

.icon {
  position: relative;
  /* Adjust these values accordingly */
  top: 14px;
  left: 9px;
}

nav {
  height: 40px overflow: hidden;
  background-color: #333;
  font-family: Arial, Helvetica, sans-serif;
}

nav a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.drop-btn {
  float: right;
}

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

nav a:hover,
.dropdown:hover .dropbtn,
.dropbtn:focus {
  background-color: red;
}

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

.show {
  display: block;
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

  <nav>
    <div class="dropdown">
      <button class="dropbtn" onclick="myFunction(event)">Programming
          <i class="icon"></i>
      </button>
      <div class="dropdown-content">
        <a href="#" onclick="myFunc();">Java</a>
        <a href="#">C++</a>
        <a href="#">Python</a>
        <a href="#">Swift</a>
      </div>
    </div>




    <div class="dropdown">
      <button class="dropbtn" onclick="myFunction(event)">Platform
          <i class="icon"></i>
      </button>
      <div class="dropdown-content">
        <a href="#" onclick="myFunc();">Linux</a>
        <a href="#">Windows</a>
        <a href="#">Development Editor</a>
      </div>
    </div>

    <div class="dropdown">
      <button class="dropbtn">Algorithm
          
      </button>

    </div>


    <div class="dropdown">
      <button class="dropbtn" onclick="myFunction(event)">Upgrade 4
          <i class="icon"></i>
      </button>
      <div class="dropdown-content">
        <a href="#" onclick="myFunc();">item 10</a>
        <a href="#">item 11</a>
        <a href="#">item 12</a>
      </div>
    </div>


    <div class="dropdown">
      <button class="dropbtn" onclick="myFunction(event)">Upgrade 4
          <i class="icon"></i>
      </button>
      <div class="dropdown-content">
        <a href="#" onclick="myFunc();">item 10</a>
        <a href="#">item 11</a>
        <a href="#">item 12</a>
      </div>
    </div>


    <div class="dropdown">
      <button class="dropbtn" onclick="myFunction(event)">Upgrade 4
          <i class="icon"></i>
      </button>
      <div class="dropdown-content">
        <a href="#" onclick="myFunc();">item 10</a>
        <a href="#">item 11</a>
        <a href="#">item 12</a>
      </div>
    </div>


    <nav>

      <h3>Dropdown Menu inside a Navigation Bar</h3>
      <p>Click on the "Dropdown" link to see the dropdown menu.</p>


</body>

</html>

Paragraph is not showing, and the navigation bar having more height. But h3 {margin: 0; padding:0} can I use h3 anywhere in paragraph? — , Apr 07 '20 at 13:33
Do you want the h3 and paragraph outside the navbar? If you can show me an image of what you are trying to replicate I can help out better as the HTML can be optimised. — Y4glory, Apr 07 '20 at 13:49
I do not want anything fancy, just a working website. No one noticed,
is not closed. and maybe misplaced, that's why I am getting white-space above. Thanks for reply — , Apr 07 '20 at 14:04
I noticed it but I was not sure where to terminate it as if I terminate it before the h3 background is white, else the background is black — Y4glory, Apr 07 '20 at 14:07

Navigation bar has whitespace above it

1 Answers1