CODEWITHSUNDEEP
htmlcssnavbar
Lorenzo Liguori
Lorenzo Liguori

Reputation: 37

Adding a top navigation bar in a html page with a 100% high css element

I am trying to add a navigation bar in my html template but it gets covered by the map which has height = 100%. This is my map style:

#windyty {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;
}

li {
  float: left;
}

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

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

li a.active {
  color: white;
  background-color: #4CAF50;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
<link rel="stylesheet" href="resources/css/bootstrap-3.3.6.min.css">
<link rel="stylesheet" href="resources/css/font-awesome-4.7.0.min.css">
<link rel="stylesheet" href="resources/css/bootstrap-social-4.12.0.css">
<link rel="stylesheet" href="resources/css/ie10-viewport-bug-workaround.css">
<link rel="stylesheet" href="resources/css/bootstrap-datetimepicker-4.17.37.min.css">
<link rel="stylesheet" href="resources/css/jquery.dataTables-1.10.12.min.css">
<link rel="stylesheet" href="resources/css/buttons.dataTables-1.2.2.min.css">
<link rel="stylesheet" href="resources/css/buttons.bootstrap-1.2.2.min.css">
<link rel="stylesheet" href="resources/css/leaflet-0.7.7.css">
<link rel="stylesheet" href="resources/css/leaflet.extra-markers.min.css">
<link rel="stylesheet" href="resources/css/easy-button.css">
<link rel="stylesheet" href="resources/css/leaflet-sidebar.min.css">
<link rel="stylesheet" href="resources/css/styles-min-20170519174922.css">

<link rel="stylesheet" type="text/css" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.css" />
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.Default.css" />

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script type='text/javascript' src='http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js'></script>
<script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/leaflet.markercluster.js'></script>


<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

<div id="windyty"></div>

ce that my navigation bar still exists but it's covered by the map. How can I do to add a navigation bar which is always visible? I am new to coding so sorry if this is trivial. Thanks

Upvotes: 0

Views: 484

Answers (2)

Hash
Hash

Reputation: 8050

body {
  background:url("UR URL") no-repeat center center;
  background-size:cover; 
}

This will have the background behind the nav.

#windyty {
  height: 100%;
  width: 100%;
}

ul {
  position: fixed;
  width: 100%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;
}

li {
  float: left;
}

body {
  background: url("https://image.freepik.com/free-vector/polygonal-blue-background-with-lights_1035-6712.jpg") no-repeat center center;
  background-size: cover;
}

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

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

li a.active {
  color: white;
  background-color: #4CAF50;
}
<body>

  <ul>
    <li><a class="active" href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
  </ul>

  <div id="windyty">
    <p>MY PAGE</p>
    <p>MY PAGE</p>
    <p>MY PAGE</p>
    <p>MY PAGE</p>
    <p>MY PAGE</p>
    <p>MY PAGE</p>
    <p>MY PAGE</p>
    <p>MY PAGE</p>
    <p>MY PAGE</p>
    <p>MY PAGE</p>
  </div>

</body>

Upvotes: 0

Nawaz Ghori
Nawaz Ghori

Reputation: 591

here is the code of fixed navigation bar. Changes are:1)remove windyty as absolute 2) make ul tag as fixed 

#windyty {
  height: 100%;
  width: 100%;
}

ul {
  position: fixed;
  width: 100%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;
}

li {
  float: left;
}

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

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

li a.active {
  color: white;
  background-color: #4CAF50;
}
<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

<div id="windyty">
  <h1>abcdef</h1>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
</div>

</body>

https://www.w3schools.com/howto/howto_css_fixed_menu.asp

Hope this link helps you in making a fixed navigation bar.

Upvotes: 1

Related Questions