Nav bar appears to behind the body content

HTML-CSS
#1

Hi

Nav bar appears to behind the body(content)
I am not able to solve this issue

Refer below code

<html>

<head>

<meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8”>

<title>navbar</title>

<style>

  &lt;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"&gt;

<meta name=“viewport” content=“width=device-width, initial-scale=1”>

  • {box-sizing: border-box;}

body {

width:100%;

margin: 0;

font-family: Times New Roman, Arial, Helvetica, sans-serif !important;

}

.header {

overflow: hidden;

background-color: #f1f1f1;

padding: 11px 25px;

font-weight: bold;

}

.header a {

float: left;

color: black;

text-align: center;

padding: 6px;

text-decoration: none;

font-size: 16px;

line-height: 25px;

border-radius: 4px;

}

.header a.logo {

font-size: 25px;

font-weight: bold;

}

.header a:hover {

background-color: #ddd;

color: black;

}

.header-right {

float: right;

}

@media screen and (max-width: 500px) {

.header a {

float: none;

display: block;

text-align: left;

}

.header-right {

float: none;

}

}

.

.dropdown {

position: relative;

display: inline-block;

}

.dropdown-content {

display: none;

position: absolute;

background-color: #f9f9f9;

opacity: 0.3;

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

padding: 12px 16px;

z-index: 5000;

transition: .5s ease;

}

table, th, td {

border: 1px solid black;

}

.dropdown:hover .dropdown-content {

display: block;

float:left;

left:auto;

right:0;

margin-right:-10px;

opacity: 1;

}

.text-block {

position: absolute;

background-color: black;

color: white;

padding-left: 20px;

padding-right: 20px;

}

</style>

</head>

<body>

<!–Navigation bar–>

&lt;div class="header2"&gt;

<a href="#default" class=“logo”>Call Us: 9999999999 / 000 - 1111111&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>

<div class="header-right class=“social-icon unstyled”>

&lt;a href="#"&gt;

&lt;div class="fa fa-twitter"&gt; &amp;nbsp;&amp;nbsp;&lt;/div&gt;

&lt;/a&gt;

&lt;a href="#" target="_blank"&gt;

&lt;div class="fa fa-facebook"&gt; &amp;nbsp;&amp;nbsp;&lt;/div&gt;

&lt;/a&gt;

&lt;a href="#"&gt;

&lt;div class="fa fa-linkedin"&gt; &amp;nbsp;&amp;nbsp;&lt;/div&gt;

&lt;/a&gt;

&lt;a href="#"&gt;

&lt;div class="fa fa-google-plus"&gt;&amp;nbsp;&amp;nbsp; &lt;/div&gt;

&lt;/a&gt;

&lt;a href="#"&gt;

&lt;div class="fa fa-pinterest"&gt; &amp;nbsp;&amp;nbsp;&lt;/div&gt;

&lt;/a&gt;

</div>

</div>

<div class=“header”>

<a href="#default" class=“logo”><img src=“img/logo.png” alt="" width=“40” height=“40”/></a>

<div class=“header-right”>

&lt;a class="active" href="#home"&gt;&amp;nbsp;&amp;nbsp;Home&amp;nbsp;&amp;nbsp;&lt;/a&gt;

&lt;a class="dropdown" href="#contact"&gt;&lt;span&gt;&amp;nbsp;&amp;nbsp;Courses&amp;nbsp;&amp;nbsp;&lt;/span&gt;

<div class=“dropdown-content text-block”>

<table>

<tr>

&lt;th&gt;JAVA&lt;/th&gt;

<th>SQL</th>

&lt;th&gt;TESTING&lt;/th&gt;

&lt;th&gt;PHYTHON&lt;/th&gt;

</tr>

<tr>

<td>J2EE</td>

<td>MYSQL</td>

<td>MANUAL TESTING</td>

</tr>

<tr>

&lt;td&gt;ADVANCE JAVA&lt;/td&gt;   

&lt;td&gt;ORACLE&lt;/td&gt;

&lt;td&gt;AUTOMATION TESTING&lt;/td&gt;

</tr>

</table>

</div>

</a>

&lt;a class="dropdown2"  href="#"&gt;&lt;span&gt;&amp;nbsp;&amp;nbsp;Training &amp;amp; Development&amp;nbsp;&amp;nbsp;&lt;/span&gt;

<div class=“dropdown2-content text-block2”>

<table>

<tr>

&lt;th&gt;Development&amp;nbsp;&amp;nbsp;&lt;/th&gt;

<th>Technologies&nbsp;&nbsp;</th>

&lt;th&gt;industry Training&amp;nbsp;&amp;nbsp;&lt;/th&gt;

</tr>

<tr>

<td>App Development</td>

<td>Java</td>

<td>Java Training</td>

</tr>

<tr>

&lt;td&gt;App Re-Designing&lt;/td&gt;   

&lt;td&gt;Php&lt;/td&gt;

&lt;td&gt;Php Training&lt;/td&gt;

</tr>

&lt;tr&gt;

&lt;td&gt;Mob App&lt;/td&gt;   

&lt;td&gt;Testing&lt;/td&gt;

&lt;td&gt;Testing Training&lt;/td&gt;

</tr>

</table>

</div>

</a>

<a href=“contact.html”>&nbsp;&nbsp;Contact&nbsp;&nbsp;</a>

&lt;a href="about.html"&gt;&amp;nbsp;&amp;nbsp;About&amp;nbsp;&amp;nbsp;&lt;/a&gt;

</div>

</div>

&lt;!-- Navigation bar--&gt;

</body>

</html>

How to solve this issue??

1 Like
#2

Could you paste your code in one code block (use three backticks before and after code)?

#3

I’ve tried to have a go at this, but there is so much unicode that’s been pasted in that it’s going to take way too long to go through and sort in my text editor.

Have you been creating your html in Word or some other non-standard text editor?

Anyway, without spending hours on it, you seem to have defined a media query very early in your style, and not given your classes styling without a media query here:

.header-right {

float: right;

}

@media screen and (max-width: 500px) {

.header a {

float: none;
display: block;
text-align: left;

}

So your z-index would only be applied up to 500px width anyway. Try that first, but if not, try pasting your code in here, rather than the text dump and we’ll be able to make more sense of it.

#4