Add a “fixed” div in responsive footer menu

by

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" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" class="active">Home</a>
    <a href="#news" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">News</a>
    <a href="#contact" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">Contact</a>
    <a href="#about" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">About</a>
    <a href="javascript:void(0);" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" style="font-size:15px;" class="icon" onclick="myFunction()">☰</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!

Contents hide
Answers:
Method 1
Method 2

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Here You Go I also added Browser Support, since you mention that it didn’t look right on your browser. I commented more so you can get a sense of what is going on.

  function myFunction() {
    var x = document.getElementById("myNavbar");
    if (x.className === "navbar") {
      x.className += " responsive";
    } else {
      x.className = "navbar";
    }
  }
/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.3.6,
* Autoprefixer: v10.3.1
* Browsers: last 7 version
*/

  /*
  Body
  */

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

  /*
  The Navigation Container/Block
  */

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

  /*
  Grid Container
  */

  .grid-container {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
  }

  /*
  Item 1
  */

  .item-1 {
    text-align: end;
  }

  /*
  Item 2
  */

  .item-2 {
    color: white;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }

  /*
  Item 3
  */

  .item-3 {
    text-align: end;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }

  .item-3 a {
    color: #f2f2f2;
    text-align: center;
    padding: 15px 16px;
    text-decoration: none;
    font-size: 17px;
  }

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

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

  /*
  Toggle Icon For Menu
  */

  .navbar .icon {
    display: none;
  }

  /*
  This Will Display In Media Queries
  */

  .copyright-bottom {
    display: none;
  }

  /*
  Media Queries
  */

  @media screen and (max-width: 970px) {
    .item-3 a {
      display: none;
    }

    .navbar a.icon {
      display: block;
    }

    .navbar.responsive .icon {
      position: absolute;
      right: 0;
      bottom: 0;
    }

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

    .navbar.responsive .copyright-bottom {
      display: block;
      text-align: center;
      color: white;
    }

    .navbar.responsive .copyright {
      display: none;
    }

    .navbar.responsive .item-3 {
      -ms-grid-column-span: 3;
      grid-column: span 3;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-align: start;
          -ms-flex-align: start;
              align-items: flex-start;
      -webkit-box-pack: start;
          -ms-flex-pack: start;
              justify-content: flex-start;
    }
  }
<!DOCTYPE html>
<html>

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

<body>

<div class="navbar" id="myNavbar">
  <div class="grid-container">
    <div class="item-1"></div>
    <div class="item-2">
      <p class="copyright">© domain.com</p>
    </div>
    <div class="item-3">
      <a href="#about" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">About</a>
      <a href="#contact" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">Contact</a>
      <a href="#news" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">News</a>
      <a href="#home" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" class="active">Home</a>
      <a href="javascript:void(0);" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" style="font-size: 15px" class="icon" onclick="myFunction()"
        >☰</a
      >
    </div>
  </div>
  <p class="copyright-bottom">© domain.com</p>
</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>

Method 2

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" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" class="active">Home</a>
    <a href="#news" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">News</a>
    <a href="#contact" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">Contact</a>
    <a href="#about" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">About</a>
    <a href="javascript:void(0);" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" style="font-size:15px;" class="icon" onclick="myFunction()">☰</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>


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x