Navigation Bar Error


#1


I am currently working on a personal website and I am having problems with the nav bar. This is a horizontal navbar. I in total have about 10 pages interlinked with each other. I use the program named Brackets. The problem is, on every other page other than the homepage, the navbar works fine. But on my home page, when you open the page in a browser, the navbar becomes smaller, the dropdown menu doesn't work, and when I hover over the tabs, instead of becoming light black, it underlines the text in blue.

Note that to understand the problem, you need to be able to open my code in a browser. The information on the website will be replaced with random text for personal reasons. I will also only be placing 4 pages - 2 main .html pages and two .css pages supporting them.

As mentioned before this is my personal project. WHen I go to my navbar on the home page, it behaves incorrectly compared to the other pages on my website. When I hover over the tabs, insted of turning light black, they under line the text in blue and the drop down doesn't work.


Home Page: .html File this is the page with the problem
<!DOCTYPE html>
<html>
<head>
   <title>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href='' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="style.css">
    

    <style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}
        
 ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

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

li a:hover, .dropdown:hover .dropbtn {
    background-color: #111;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

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

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

.dropdown:hover .dropdown-content {
    display: block;
}
        
section {
            background-color: antiquewhite;
            padding: 16px;
            margin: 16px;
            display: block;
            
        }
        
footer {
        background-color: white;
        padding: 16px;
        margin: 16px;
        display: block;
}
        
</style>
    
</head>
<body>
    
<ul>
  <li><a href="My%20Website.html">Home</a></li>
  <li><a href="About%20Us.htm">About Us</a></li>
  <li><a href="#news">Contact Us</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Lessons</a>
    <div class="dropdown-content">
      <a href="HTML.html">HTML</a>
      <a href="CSS.html">CSS</a>
      <a href="JavaScript.html">JavaScript</a>
    </div>
  </li>
</ul>
<div class="jumbotron text-center">
  <h1>Lunar Polar Great Heights</h1>
  <p>Top Cats and Dogs</p> 
</div>
  
<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <h3>Crates</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Planes</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>School</h3>        
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>



</body>
    
    <footer>
    
       <a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/88x31.png" /></a><br />This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>.
        
    </footer>
    
</html>

Home Page: .css file

html, body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  font-weight: 300;
  line-height: 1.5;
}
header {
  padding: 20px 0;
}

header .row,
footer .row {
  display: flex;
  align-items: center;
}
header nav {
  display: flex;
  justify-content: flex-end;
}

header p {
  padding: 0 20px;
  margin: 0;
}

body {
  font-family: 'Lato', sans-serif;
  
  background-position: center top;
  background-size: cover;
  margin: 0;
}



/* FOOTER NAVIGATION */


About Us Page: .html This is how the nav bar is supposed to look like

<!DOCTYPE html>
<html>
<head>
    <title>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</title>
    <meta charset="utf-8"/>
    <link href='' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="style2.css">
    
    <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    
    <style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}
        
 ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

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

li a:hover, .dropdown:hover .dropbtn {
    background-color: #111;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

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

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

.dropdown:hover .dropdown-content {
    display: block;
}
        
section {
            background-color: antiquewhite;
            padding: 16px;
            margin: 16px;
            display: block;
            
        }
        
footer {
        background-color: white;
        padding: 16px;
        margin: 16px;
        display: block;
}
        
</style>
    
</head>
<body>
    
<ul>
  <li><a href="My%20Website.html">Home</a></li>
  <li><a href="About%20Us.htm">About Us</a></li>
  <li><a href="#news">Contact Us</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Lessons</a>
    <div class="dropdown-content">
      <a href="HTML.html">HTML</a>
      <a href="CSS.html">CSS</a>
      <a href="JavaScript.html">JavaScript</a>
    </div>
  </li>
</ul>


</body>
    
    <section>
    <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...Lorem ipsum dolor sit amet, consectetur adipisicing elit...Lorem ipsum dolor sit amet, consectetur adipisicing elit...Lorem ipsum dolor sit amet, consectetur adipisicing elit...Lorem ipsum dolor sit amet, consectetur adipisicing elit...Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
    </section>

   
       <footer>
    
       <a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/88x31.png" /></a><br />This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>.
        
    </footer>
    
</html>
About us page: .CSS file

html, body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  font-weight: 300;
  line-height: 1.5;
}
header {
  padding: 20px 0;
}

header .row,
footer .row {
  display: flex;
  align-items: center;
}
header nav {
  display: flex;
  justify-content: flex-end;
}

header p {
  padding: 0 20px;
  margin: 0;
}

body {
  font-family: 'Lato', sans-serif;
  
  background-position: center top;
  background-size: cover;
  margin: 0;
}



}
/* FOOTER NAVIGATION */

I need the navbar on the HOME PAGE to look the same as the navbar on the about us page and I also need to Lessons drop down menu working.
Thx for your time and Help
Regards
Satanshu


#2

Try making the li inline instead of inline-block.


#3

Thx for the replies guys, I managed to retrace my steps to find the error ... it not fixed but thx for your time...
Regards
Satanshu


#4

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.