How can I make all the items in the menu sticky?-CodePudding

I am trying to add a menu bar to my website and it looks nearly the way I want it, with the hamburger to the left and the two contact info to the right. However, only the hamburger is sticky. Also, I would like to add a background color to the menu so that when the webpage is scrolled the sticky bits sit neatly inside the colored bar. How can I make these changes?

nav {
  margin: 0;
  padding: 0px;
  /* make it look decent enough */
  background: #232323;
  color: #cdcdcd;
  font-family: inherit;
}

#menuToggle {
  display: inline-block;
  position: fixed;
  top: 50px;
  left: 50px;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle a {
  text-decoration: none;
  color: #232323;
  transition: color 0.3s ease;
}

#menuToggle a:hover {
  color: yellowgreen;
}

#menuToggle input {
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  cursor: pointer;
  opacity: 0;
  /* hide this */
  z-index: 2;
  /* and place it over the hamburger */
  -webkit-touch-callout: none;
}


/*
       * Just a quick hamburger
       */

#menuToggle span {
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  background: #cdcdcd;
  border-radius: 3px;
  z-index: 1;
  transform-origin: 4px 0px;
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease;
}

#menuToggle span:first-child {
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2) {
  transform-origin: 0% 100%;
}


/* 
       * Transform all the slices of hamburger
       * into a crossmark.
       */

#menuToggle input:checked~span {
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}


/*
       * But let's hide the middle one.
       */

#menuToggle input:checked~span:nth-last-child(3) {
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}


/*
       * Ohyeah and the last one should go the other direction
       */

#menuToggle input:checked~span:nth-last-child(2) {
  transform: rotate(-45deg) translate(0, -1px);
}


/*
       * Make this absolute positioned
       * at the top left of the screen
       */

#menu {
  position: absolute;
  width: 300px;
  margin: -100px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
  padding-bottom: 325px;
  background: #ededed;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}

#menu li {
  padding: 8px 0;
  font-size: 20px;
}


/*
       * And let's slide it in from the left
       */

#menuToggle input:checked~ul {
  transform: none;
}


/* header-right  */

.header-right li {
  display: inline-block;
  margin-right: 50px;
  margin-top: 45px;
  font-size: 16px;
  text-decoration: none;
  float: right;
  font-family: inherit;
  -webkit-transition: .5s;
  -moz-transition: .5s;
  -ms-transition: .5s;
  -o-transition: .5s;
  transition: .5s;
}

.header-right li i {
  margin-right: 7px;
  color: #888;
  text-decoration: none;
}

.header-right li :hover {
  color: #7370d8;
  text-decoration: none;
}


/*
       * Subscription form for newsletter
       */

.subscribe-form input[type="text"] {
  padding: 13.225px 30px;
  border: none;
  background: #f2f2f2;
  float: none;
}

.subscribe-form input[type="submit"] {
  background: #9bf55f;
  color: #fff;
  padding: 16px 24px;
  border: none;
  font-size: 18px;
  float: none;
}

<!DOCTYPE HTML>
<html>

<head>
  <title>My website</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <!--[if lte IE 8]>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="css/ie/html5shiv.js"></script>
    <![endif]-->
  <script src="js/jquery.min.js"></script>
  <script src="js/jquery.poptrox-2.2.js"></script>
  <script src="js/skel.min.js"></script>
  <script src="js/init.js"></script>
  <noscript>
    <link rel="stylesheet" href="css/skel-noscript.css">
    <link rel="stylesheet" href="css/style.css">
    </noscript>
  <!--[if lte IE 8]>
    <link rel="stylesheet" href="css/ie/v8.css">
    <![endif]-->

</head>

<body>
  <nav role="navigation">
    <div id="menuToggle">

      <input type="checkbox" />


      <span></span>
      <span></span>
      <span></span>


      <ul id="menu">
        <a href="index.html">
          <li>Home</li>
        </a>
        <a href="about-us.html">
          <li>My listings</li>
        </a>
        <a href="https://selar.co/vmo2" target="_blank">
          <li>Bookings</li>
        </a>
        <a href="faq.html">
          <li>FAQ</li>
        </a>
      </ul>
    </div>
    <div >
      <ul >
        <li>
          <a href="#">
            <i ></i>  5558976555
          </a>
        </li>
        <li>
          <a href="#">
            <i ></i>[email protected]
          </a>
        </li>
      </ul>
    </div>

CodePudding user response：

You are so close to the solution. I really appreciate you for that.

You can use the following CSS to make your navbar sticky.

 nav {

       /* to give background color */
       background: #232323;
       /* to give the text color */
       color: #cdcdcd;
       /* to make the nav fixed */
       position: fixed;
       /* to set the position of the navbar */
       top: 0;
       /* to set the width of navbar */
       width: 100%;
       /* to make it look cleaner */
       padding-bottom: 30px;
     }

Do let me know if you need more help with this.

Thanks,
Shubh Wadekar

CodePudding user response：

What you're trying to achieve requires you to apply position: fixed to both elements. Another better approach is to only apply position: fixed to the parent nav element.
For making it change color on scroll, requires javascript. I've added the code in the demo. Also, added a transition to it. The default nav is absolute but as the scroll reaches nav height it becomes fixed and changes in color.
I also noticed you were using floating but not clearing the float. It's better to just use display: flex. I have wrapped the inner nav elements inside .nav-inner and applied flex to it for better control.
Your code is also missing the closing tags for nav, body, and html.

Demo:

let nav = document.getElementById("nav");

window.addEventListener('scroll', function() {
  if (window.pageYOffset > nav.offsetHeight) {
    nav.classList.add("sticky");
  } else {
    nav.classList.remove("sticky");
  }
});

body {
  height: 2000px; /* For demo only */
  margin: 0;
  position: relative;
}

nav {
  position: absolute;
  width: 100%;
  transition: all 0.2s ease;
}

.sticky {
  position: fixed;
  z-index: 1;
  /* make it look decent enough */
  background: #232323;
  color: #cdcdcd;
}


.inner-nav {
  padding: 25px;
  display: flex;
  align-items: center;
  /* To vertically align #menuToggle and .header-right */
  justify-content: space-between;
  /* To horizontally align #menuToggle and .header-right */

}

#menuToggle a {
  text-decoration: none;
  color: #232323;

  transition: color 0.3s ease;
}

#menuToggle a:hover {
  color: yellowgreen;
}


#menuToggle input {
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;

  cursor: pointer;

  opacity: 0;
  /* hide this */
  z-index: 2;
  /* and place it over the hamburger */

  -webkit-touch-callout: none;
}

/*
   * Just a quick hamburger
   */
#menuToggle span {
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;

  background: #cdcdcd;
  border-radius: 3px;

  z-index: 1;

  transform-origin: 4px 0px;

  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
    background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
    opacity 0.55s ease;
}

#menuToggle span:first-child {
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2) {
  transform-origin: 0% 100%;
}

/* 
   * Transform all the slices of hamburger
   * into a crossmark.
   */
#menuToggle input:checked~span {
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}

/*
   * But let's hide the middle one.
   */
#menuToggle input:checked~span:nth-last-child(3) {
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
   * Ohyeah and the last one should go the other direction
   */
#menuToggle input:checked~span:nth-last-child(2) {
  transform: rotate(-45deg) translate(0, -1px);
}

/*
   * Make this absolute positioned
   * at the top left of the screen
   */
#menu {
  position: absolute;
  width: 300px;
  margin: -100px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
  padding-bottom: 325px;

  background: #ededed;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */

  transform-origin: 0% 0%;
  transform: translate(-100%, 0);

  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}

#menu li {
  padding: 8px 0;
  font-size: 20px;

}

/*
   * And let's slide it in from the left
   */
#menuToggle input:checked~ul {
  transform: none;
}


/* header-right  */
.header-righ {
  display: flex;
}

.header-right li {
  display: inline-block;
  margin-right: 50px;
  font-size: 16px;
  text-decoration: none;
  font-family: inherit;
  -webkit-transition: .5s;
  -moz-transition: .5s;
  -ms-transition: .5s;
  -o-transition: .5s;
  transition: .5s;

}

.header-right li:last-child {
  margin: 0;
}

.header-right li i {
  margin-right: 7px;
  color: #888;
  text-decoration: none;
}

.header-right li :hover {
  color: #7370d8;
  text-decoration: none;
}

/*
   * Subscription form for newsletter
   */

.subscribe-form input[type="text"] {
  padding: 13.225px 30px;
  border: none;
  background: #f2f2f2;
  float: none;

}

.subscribe-form input[type="submit"] {
  background: #9bf55f;
  color: #fff;
  padding: 16px 24px;
  border: none;
  font-size: 18px;
  float: none;

}

<!DOCTYPE HTML>
<html>

  <head>
    <title>My website</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <!--[if lte IE 8]>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="css/ie/html5shiv.js"></script>
<![endif]-->
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.poptrox-2.2.js"></script>
    <script src="js/skel.min.js"></script>
    <script src="js/init.js"></script>
    <noscript>
      <link rel="stylesheet" href="css/skel-noscript.css">
      <link rel="stylesheet" href="css/style.css">
    </noscript>
    <!--[if lte IE 8]>
<link rel="stylesheet" href="css/ie/v8.css">
<![endif]-->
  </head>

  <body>
    <nav id="nav" role="navigation">
      <div >
        <div id="menuToggle">
          <input type="checkbox" />

          <span></span>
          <span></span>
          <span></span>

          <ul id="menu">
            <a href="index.html">
              <li>Home</li>
            </a>
            <a href="about-us.html">
              <li>My listings</li>
            </a>
            <a href="https://selar.co/vmo2" target="_blank">
              <li>Bookings</li>
            </a>
            <a href="faq.html">
              <li>FAQ</li>
            </a>
          </ul>
        </div>
        <div >
          <ul>
            <li>
              <a href="#">
                <i ></i>  5558976555
              </a>
            </li>
            <li>
              <a href="#">
                <i ></i>[email protected]
              </a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </body>

</html>