Question 228660 in Html Question posted in
Some basic documentation can be found here.

Html – Align the Links in my Responsive Navbar with Dropdown Menu, so that it lines up with the website content

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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The answer from ayus_98 had the opposite effect I was trying to achieve, however I was able to use that information and come up with a partial fix.

    I modified the following from my original code:

    .content {
  width: 1000px;
  margin: 0 auto;
  /*I added the padding you suggested, and it did in fact make it better :-) */
  padding: 10px 20px;
}

.topnav {
  background-color: #0066ff;
  overflow: hidden;
  /* Added both max-width & margin values */
  max-width: 1000px;
  margin: 0 auto;
}

    The only issue now is that the blue background colour of the top navigation menu bar does not extend to the edge of the screen on either side (left & right), which I want it to do. I'm not sure if this can be achieved with the new code.

    Here is what the new navigation menu bar looks like. You'll have to resize the browser window to see the full effects.

    <!DOCTYPE html>
<style>
    /* Add a background color to the top navigation */
  
  .topnav {
    background-color: #0066ff;
    overflow: hidden;
    /* Added both max-width & margin values */
    max-width: 1000px;
    margin: 0 auto;
  }
  /* 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;
    /*I added the padding you suggested, and it did in fact make it better :-) */
    padding: 10px 20px;
  }
  
  .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()">&#9776;</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>

    Any ideas to get the blue background colour of my top navigation menu bar to extend all the way to the edge of the screen in either direction (left & right) without changing the current alignment of the links inside the menu bar?


  2. 0

    The div having class ‘content’ has a fixed width of 1000px, just remove that in css and you are done!

    .content {
    /*removed the width of 1000px */
    margin: 0 auto;
    /* added padding for making it better */
    padding: 10px 20px;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search