CODEWITHSUNDEEP
htmlcss
Roman Kudryashov
Roman Kudryashov

Reputation: 91

How to keep Navigation Bar elements from overlapping when resizing window?

Here is the HTML. It looks correct in full screen. When resizing the browser, specifically making it smaller, the nav bar elements overlap each other. I can't figure out how to fix it. I've also included the CSS. I'm guessing it has to do with the positioning? I tried adding relative position to the nav element, but it didn't fix the problem. Any input is appreciated. Thank you.

#mainNav {
  margin-left: 20px;
  margin-top: 40px;
}

.dropButton {
  background-color: #F4D35E;
  color: #083D77;
  font-weight: bold;
  font-family: Futura, sans-serif;
  text-decoration: none;
  padding: 16px;
  font-size: 28px;
  border: none;
  cursor: pointer;
}

.dropButton a {
  text-decoration: none;
}

.dropDown a:hover {
  color: #ED2E07;
}

.dropDown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #F4D35E;
  color: #083D77;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  margin-top: 15px;
}

.dropdown-content a {
  padding: 12px 16px;
  text-align: center;
  text-decoration: none;
  display: block;
  color: #083D77;
}

.featRecipe {
  display: flex;
  flex-wrap: nowrap;
  margin-left: 75px;
}

.drink1,
.drink2 {
  margin-right: 110px;
}

.featRecipe li {
  max-width: 300px;
}

.drinkOfTheDay {
  display: flex;
  flex-wrap: nowrap;
  margin-left: 75px;
}

.imgOTD,
.image,
.ingr {
  margin-right: 75px;
}

#libNav li {
  display: inline;
  padding-right: 10px;
}

.library {
  margin-left: 20px;
  margin-top: 40px;
}

.drink {
  display: flex;
  flex-wrap: nowrap;
}

.top {
  text-align: center;
  margin-bottom: 40px;
}
html {
    background: #EBEBD3;
}
#siteTitle {
    font-family: "Brush Script MT", sans-serif;
    text-align: center;
    font-weight: bold;
    font-size: 70px;
    color: #ED2E07;
    margin-bottom: 0;
    margin-top: 20px;
}
#pageTitle {
    margin-top: 40px;
    margin-bottom: 50px;
    text-align: center;
    font-size: 40px;
    font-family: Andale Mono, monospace;
    color: #ED2E07;
}
.body {
    color: #083D77;
    text-align: center;
}
main {
    color: #083D77;
    font-family: Andale Mono, monospace;
}
main h2,h3,h4 {
    color: #F95738;
}

.featRecipe h3 {
    text-align: center;
    color: #083D77;
    font-family: Andale Mono, monospace;
}
.dir li {
    max-width: 500px;
}
#libNav a {
    font-size: 20px;
    color: #083D77;
}
.library h3 {
    font-size: 24px;
    font-weight: bold;
}
.dropdown-content a:hover {
    background-color: #EBEBD3;
}

.dropDown:hover .dropdown-content {
  display: block;
}

.dropDown:hover .dropButton {
  background-color: #EE964B;
}

img {
    border: solid 5px #F95738;
}
#libNav a:visited {
    color: #083D77;  
}
.top a, a:visited {
    color: #083D77;
    font-size: 16px;
}
.dropButton a:visited {
    color: #083D77;
}
.dropdown-content a:hover {
      color: #ED2E07;
}
<!DOCTYPE html>
<html lang=en>

<head>
  <meta charset=utf-8>
  <meta name="author" content="Roman Kudryashov" />
  <meta name="description" content="Drinkmastery.com provides a library of cocktails for drink enthusiasts, connoisseurs, and restaurant professionals." />
  <meta name="keywords" content="coktails, drinks, bar, bartending, mixology, vodka, rum, gin, tequila, whiskey, mixed drinks, recipes, liquor, liquer" />
  <title>Drink Mastery</title>
  <link rel="stylesheet" href="../styles/layout.css">
  <link rel="stylesheet" href="../styles/format.css">
  <link rel="stylesheet" href="../styles/effects.css">
  <script>
    function con() {
      var ans = window.confirm("Are you 21+ years old?\n\nPress \"OK\" if Yes, \"Cancel\" if NO");

      if (ans == false) {
        window.location = "http://www.google.com";
      }
    }
    window.setTimeout("con()", 2000);
  </script>
</head>

<body>
  <h1 id="siteTitle">Drink Mastery</h1>

  <nav id="mainNav">
    <div class="dropDown">
      <a href="home.html" class="dropButton">Home</a>
    </div>
    <div class="dropDown">
      <a href="featuredCocktails.html" class="dropButton">Featured Cocktails</a>
    </div>
    <div class="dropDown">
      <a href="seasonalCocktails.html" class="dropButton">Seasonal Cocktails</a>
      <div class="dropdown-content">
        <a href="xmasDrinks.html">Christmas Drinks</a>
        <a href="springFavorites.html">Spring Favorites</a>
        <a href="summerDrinks.html">Summer Drinks</a>
        <a href="fallSpecials.html">Fall Specials</a>
      </div>
    </div>
    <div class="dropDown">
      <a href="drinkLibrary.html" class="dropButton">Drink Library</a>
      <div class="dropdown-content">
        <a href="vodka.html">Vodka</a>
        <a href="rum.html">Rum</a>
        <a href="gin.html">Gin</a>
        <a href="tequila.html">Tequila</a>
        <a href="whiskey.html">Whiskey</a>
        <a href="misc.html">Miscellaneous</a>
      </div>
    </div>
    <div class="dropDown">
      <a href="resources.html" class="dropButton">Resources</a>
      <div class="dropdown-content">
        <a href="bartendingTips.html">Bartending Tips &amp; Tricks</a>
        <a href="education.html">Educational Articles</a>
      </div>
    </div>
    <div class="dropDown">
      <a href="aboutUs.html" class="dropButton">About Us</a>
    </div>
  </nav>

  <h2 id="pageTitle">Welcome to Drink Mastery!</h2>
  <p class="body">We strive to provide you with a complete library of various cocktail recipes! Happy mixing!</p>
  <main>
    <h3 id="dotd" style="font-size: 24px; font-weight: bold; color: #EE964B">Drink of the Day</h3>
    <div class="drinkOfTheDay">
      <img src="../images/mojito.jpg" alt="Mojito" height="300" class="imgOTD">
      <div class="ingr">
        <h4>Ingredients</h4>
        <ul>
          <li>10 fresh mint leaves</li>
          <li>1/2 lime, cut into 4 wedges</li>
          <li>2 ablespoons of white sugar</li>
          <li>1.5 oz white rum</li>
          <li>1/2 cup club soda</li>
        </ul>
      </div>
      <div>
        <h4>Directions</h4>
        <ol class="dir">
          <li>Place mint leaves and 1 lime wedge into a sturdy glass. Use a muddler to crush the mint and lime to release the mint oils and lime juice.</li>
          <li>Add 2 more lime wedges and the sugar, and muddle again to release the lime juice.</li>
          <li>Fill the glass almost to the top with ice.</li>
          <li>Pour the rum over the ice, and fill the glass with carbonated water.</li>
          <li>Stir, taste, and add more sugar if desired. Garnish with the remaining lime wedge.</li>
        </ol>
      </div>
    </div>
  </main>
  <footer>
    <p>&copy; Created by Roman Kudryashov</p>
  </footer>
</body>

</html>

Upvotes: 1

Views: 1316

Answers (1)

learningtoanimate
learningtoanimate

Reputation: 934

Change your CSS for dropDown to

.dropDown {
    position: relative;
    display: inline-flex;
}

Then add some padding or margin to that so they're not touching.

Upvotes: 2

Related Questions