Add a "fixed" div in responsive footer menu-CodePudding

In the following w3schools code that implements a responsive menu at the bottom of a webpage, I have added a div with a copyright claim for the domain. I would like to make the copyright div centered in the bottom of the screen as long as it is not covered by the menu items, as the browser window gets smaller, and then move again at the bottom of the page bellow the menu items when it gets covered by them or when the menu is opened by the relative button when it previously has minimized.

function myFunction() {
  var x = document.getElementById("myNavbar");
  if (x.className === "navbar") {
    x.className  = " responsive";
  } else {
    x.className = "navbar";
  }
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  bottom: 0;
  width: 100%;
}

.navbar a {
  float: right;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.navbar a:hover {
  background-color: #ddd;
  color: black;
}

.navbar a.active {
  background-color: #04AA6D;
  color: white;
}

.navbar .icon {
  display: none;
}

#copyright {
  position: absolute;
  top: 20%;
  left: 25%;
  width: 50%;
  height: 50%;
  color: white;
}

@media screen and (max-width: 600px) {
  .navbar a:not(:first-child) {
    display: none;
  }
  .navbar a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .navbar.responsive .icon {
    position: absolute;
    right: 0;
    bottom: 0;
  }
  .navbar.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>

  <div class="navbar" id="myNavbar">
    <div id="copyright">© domain.com</div>
    <a href="#home" class="active">Home</a>
    <a href="#news">News</a>
    <a href="#contact">Contact</a>
    <a href="#about">About</a>
    <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
  </div>

  <div style="padding-left:16px">
    <h2>Responsive Bottom Navbar Example</h2>
    <p>Resize the browser window to see how it works.</p>
  </div>

</body>

</html>

Any ideas for a good implementation are welcome!

CodePudding user response：

This You Something Like This?.

function myFunction() {
  var x = document.getElementById("myNavbar");
  if (x.className === "navbar") {
    x.className  = " responsive";
  } else {
    x.className = "navbar";
  }
}

   body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
  }

  .navbar {
    overflow: hidden;
    background-color: #333;
    position: fixed;
    bottom: 0%;
    right: 0%;
    width: 100%;
    display: flex;
  }

  .navbar a {
    color: #f2f2f2;
    text-decoration: none;
    font-size: 17px;
    padding: 0 15px;
  }

  .navbar a:hover {
    background-color: #ddd;
    color: black;
  }

  .navbar a.active {
    background-color: #04aa6d;
    color: white;
  }

  .navbar .icon {
    display: none;
  }

  /* #copyright {
    position: absolute;
    top: 20%;
    left: 25%;
    width: 50%;
    height: 50%;
    color: white;
  } */

  #copyright {
    flex-grow: 1;
    text-align: center;
    color: white;
  }

  #copyright-bottom {
    flex-grow: 1;
    text-align: center;
    color: white;
    display: none;
  }

  @media screen and (max-width: 600px) {
    .navbar a:not(:first-child) {
      display: none;
    }
    .navbar a.icon {
      float: right;
      display: block;
    }
  }

  @media screen and (max-width: 600px) {
    .navbar {
      display: inline-block;
      text-align: center;
    }
    .navbar.responsive .icon {
      position: absolute;
      right: 0;
      bottom: 0;
    }
    .navbar.responsive a {
      float: none;
      display: block;
      text-align: left;
    }

    #copyright {
      flex-grow: 1;
      text-align: center;
      color: white;
      display: none;
    }

    #copyright-bottom {
      flex-grow: 1;
      text-align: center;
      color: white;
      display: block;
    }
  }

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>

  <div class="navbar" id="myNavbar">
  <span id="copyright">© domain.com</span>
  <a href="#about">About</a>
  <a href="#contact">Contact</a>
  <a href="#news">News</a>
  <a href="#home" class="active">Home</a>

  <a href="javascript:void(0);" style="font-size: 15px" class="icon" onclick="myFunction()"
    >&#9776;</a
  >
  <span id="copyright-bottom">© domain.com</span>
</div>

<div style="padding-left: 16px">
  <h2>Responsive Bottom Navbar Example</h2>
  <p>Resize the browser window to see how it works.</p>
</div>
</body>

</html>

CodePudding user response：

Try this solution:

function myFunction() {
  var x = document.getElementById("myNavbar");
  if (x.className === "navbar") {
    x.className  = " responsive";
  } else {
    x.className = "navbar";
  }
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  display: flex;
  justify-content: center;
  bottom: 0;
  width: 100%;
}

.navbar a {
  float: right;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.navbar a:hover {
  background-color: #ddd;
  color: black;
}

.navbar a.active {
  background-color: #04AA6D;
  color: white;
}

.navbar .icon {
  display: none;
}

#copyright {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

@media screen and (max-width: 600px) {
  .navbar {
    display: block;
  }

  .navbar a:not(:first-child) {
    display: none;
  }

  .navbar a.icon {
    float: right;
    display: block;
  }

  #copyright {
    margin: 5px;
  }
}

@media screen and (max-width: 600px) {
  .navbar.responsive .icon {
    position: absolute;
    right: 0;
    bottom: 0;
  }

  .navbar.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>

  <div class="navbar" id="myNavbar">
    <div id="copyright">© domain.com</div>
    <a href="#home" class="active">Home</a>
    <a href="#news">News</a>
    <a href="#contact">Contact</a>
    <a href="#about">About</a>
    <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
  </div>

  <div style="padding-left:16px">
    <h2>Responsive Bottom Navbar Example</h2>
    <p>Resize the browser window to see how it works.</p>
  </div>

</body>

</html>