Recently, I came across a helpful YouTube tutorial on creating a navigation menu using HTML and CSS. The main challenge I encountered was getting the width of my navigation bar to span 100% of the screen on all devices while maintaining a height of 30px. In addition, I wanted the navigation bar to be centered automatically as more tabs were added, filling the screen evenly. Below is the code snippet I used:
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>My Website</title>
</head>
<body>
<div id="body">
<div style="display:none">
<audio controls autoplay>
<source src="Audio/welcome 2.4.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
<img src="Images/web-development-banner.jpg" width="100%" height="400">
<h1 class="webheading">Website Development</h1>
<div id="navMenu">
<ul>
<li><a href="index.html">Learn HTML</a>
<ul>
<li><a href="index.html">1. Things You Need</a></li>
<li><a href="setup.html">2. Setting Up Your Website Folders</a></li>
<li><a href="extrainfo.html">3. Extra Information</a></li>
<li><a href="layout.html">4. HTML Layout</a></li>
</ul>
</li>
</ul>
...
// Additional UL elements
...
</div>
CSS:
#body {
background: url(Images/bigimage.jpg);
background-color:#000000;
background-size: 100% 100%;
width: auto;
height: auto;
background-repeat: no-repeat;
background-attachment: fixed;
margin: 0;
margin-top: 0;
color: #FFFFFF;
}
#navMenu {
margin: 0 auto;
padding: 0;
width: 100%;
}
#navMenu ul {
margin: 0;
padding: 0;
line-height: 30px;
}
#navMenu li {
margin: 0;
padding: 0;
list-style: none;
float: left;
position: relative;
background: #999;
}
// Remaining CSS styles...