I used the code I found at w3schools.com, and I styled it to my taste in order to create my websites top navigation menu:
<!DOCTYPE html>
<style>
/* Add a background color to the top navigation */
.topnav {
background-color: #0066ff;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
transition-duration: 0.4s;
}
/* Add an active class to highlight the current page */
.active {
background-color: #4d94ff;
color: white;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
/* Dropdown container - needed to position the dropdown content */
.dropdown {
float: left;
overflow: hidden;
}
/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
transition-duration: 0.4s;
}
/* Style the dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #b3d1ff;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Style the links inside the dropdown */
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #99c2ff;
color: white;
}
/* Add a background to dropdown links on hover */
.dropdown-content a:hover {
background-color: #cce0ff;
color: black;
}
/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
display: block;
}
/* */
.content {
width: 1000px;
margin: 0 auto;
}
.content h2 {
margin: 0;
padding: 25px 0;
font-size: 20px;
border-bottom: 1px solid #e0e0e3;
color: #4a536e;
}
.content .block {
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
margin: 25px 0;
padding: 25px;
background-color: #fff;
}
.content .block p {
padding: 5px;
margin: 0 0 10px 0;
}
/* When the screen is less than 1000 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 1000px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 1000px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
@media screen and (max-width: 1000px) {
.content {
padding: 5px 10px;
width: 100%;
}
}
</style>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1">
<title>Home Page</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer">
</head>
<body>
<div class="topnav" id="myTopnav">
<a href="../" class="active" title="Homepage"><i class="fas fa-home"></i> Home</a>
<a href="/members/home.php" title="Member's Homepage"><i class="fa-solid fa-door-open"></i> Member's Homepage</a>
<div class="dropdown">
<button class="dropbtn" title="Sections"><i class="fa-solid fa-link"></i> Sections <i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="/members/music/" title="Enjoy Our Music Section"><i class="fa-solid fa-music"></i> Music Section</a>
<a href="/members/polls/" title="Vote in A Poll"><i class="fa-solid fa-square-poll-horizontal"></i> Polls Section</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn" title="Help"><i class="fa-regular fa-circle-question"></i> Help <i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="/members/tickets/" title="Create a Ticket For An Issue"><i class="fas fa-ticket"></i> Ticket System</a>
<a href="contact/" title="Send A Message to Site Administration"><i class="fas fa-envelope"></i> Contact Form</a>
</div>
</div>
<a href="profile.php" title="Profile Page"><i class="fas fa-user-circle"></i> Profile</a>
<a href="logout.php" title="Bye Bye"><i class="fas fa-sign-out-alt"></i> Logout</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">☰</a>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
<div class="content">
<h2>Member's Page</h2>
<h2>WELCOME TO THE MEMBERS ONLY SECTION!</h2>
</div>
</body>
</html> However I can't figure out how to align the links in the navigation menu with the site content. The links in the navigation menu always goes to the edge of the screen (on the left side). I want to get the links from the left side lined up with the left side of the text in the site content (but not go past the right most part of the site content). I would also like to place the website's title in the navigation menu, on the left side before the links, but keeping it aligned with the rest of the site's content.
Is there an easy fix for this styling issue?
Thanks to anyone who can help.
In order to achieve your desired changes, we need to modify both html and css. For the html part, I added another div inside of 'topnav', gave it a class 'nav-links' and put all the contents of 'topnav' to inside it. In the css, remove the 'max-width and margin' from topnav and add this styles to 'nav-links'. You can also make the default padding and margin for the body zero (Browsers add a default margin and padding due to which your navbar won't extend completely up to end).
Here's the css changes:
* {
/* Removed the default margin and padding values */
margin: 0;
padding: 0;}
.topnav {
background-color: #0066ff;
overflow: hidden;
/* removed the max-width & margin values */}
.nav-links {
/* Added both max-width & margin values */
max-width: 1000px;
margin: 0 auto;}
And the html changes:
<div class="topnav" id="myTopnav"><div class="nav-links"><a href="../" class="active" title="Homepage"><i class="fas fa-home"></i>Home</a><a href="/members/home.php" title="Member's Homepage"><i class="fa-solid fa-door-open"></i>Member's Homepage</a><div class="dropdown"><button class="dropbtn" title="Sections"><i class="fa-solid fa-link"></i>Sections<i class="fa fa-caret-down"></i></button><div class="dropdown-content"><a href="/members/music/" title="Enjoy Our Music Section"><i class="fa-solid fa-music"></i>Music Section</a><a href="/members/polls/" title="Vote in A Poll"><i class="fa-solid fa-square-poll-horizontal"></i>Polls Section</a></div></div><div class="dropdown"><button class="dropbtn" title="Help"><i class="fa-regular fa-circle-question"></i>Help<i class="fa fa-caret-down"></i></button><div class="dropdown-content"><a href="/members/tickets/" title="Create a Ticket For An Issue"><i class="fas fa-ticket"></i>Ticket System</a><a href="contact/" title="Send A Message to Site Administration"><i class="fas fa-envelope"></i>Contact Form</a></div></div><a href="profile.php" title="Profile Page"><i class="fas fa-user-circle"></i>Profile</a><a href="logout.php" title="Bye Bye"><i class="fas fa-sign-out-alt"></i>Logout</a><a href="javascript:void(0);" class="icon" onclick="myFunction()">☰</a></div></div>