Any ideas why my sticky menu stopped sticking?

December 13, 2022

I’m literally sorry for asking this, but I’ve been looking for a mistake in this code for around 1,5h and I’m just fed up with it.

It’s probably something really stupid and obvious.

Practicing to an IT qualification exam.

Succesully built a sticky menu, it worked for a while.

After adding next elements to my site it literally stopped being sticky despite having all needed properties in css. Any ideas?

* {
  background-color: rgb(30, 33, 38);
  color: rgb(230, 229, 229);
  font-size: 40px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-weight: Italic;
  font-variant: common-ligatures tabular-nums;
  text-align: center;
  text-shadow: rgb(26, 26, 26) 2px 2px 2px;
  margin: 0%;
}

.main {
  width: 100%;
  height: auto;
}

.header {
  width: 98.8%;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  background-color: rgb(27, 31, 36);
  height: auto;
  margin-bottom: 10px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.header1 {
  background-color: rgba(0, 0, 0, 0);
}

.menu {
  z-index: 9999;
  position: sticky;
  top: -1px;
  width: 98.8%;
  height: 70px;
  background-color: rgb(35, 38, 44);
  margin-bottom: 10px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 2px 2px 3px rgba(36, 36, 36, 0.451);
}

.button_menu {
  position: relative;
  float: left;
  background-color: rgb(41, 44, 49);
  border: none;
  width: 70px;
  height: 100%;
  padding-left: auto;
  padding-right: auto;
}

.menu_icon {
  float: left;
  width: 100%;
  height: 70%;
  background-color: rgba(0, 0, 0, 0);
}

.content {
  clear: both;
  width: 98.8%;
  height: auto;
  box-shadow: 2px 2px 3px rgba(36, 36, 36, 0.451);
  margin-left: auto;
  margin-right: auto;
}

.left {
  position: relative;
  float: left;
  width: 40%;
  height: 4000px;
  background-color: rgb(47, 50, 56);
  box-shadow: -2px 2px 3px rgba(36, 36, 36, 0.451);
}

.centerright {
  float: left;
  width: 60%;
  height: 4000px;
  background-color: rgba(0, 0, 0, 0);
}

.center {
  position: relative;
  float: left;
  margin-right: 0px;
  width: 55%;
  height: 1500px;
  background-color: rgb(47, 50, 56);
  box-shadow: 2px -1px 3px rgba(36, 36, 36, 0.451);
}

.right {
  position: relative;
  float: right;
  width: 45%;
  margin-left: 0px;
  margin-right: 0px;
  height: 1500px;
  background-color: rgb(47, 50, 56);
  box-shadow: 2px -1px 3px rgba(36, 36, 36, 0.451);
}

.bottom {
  clear: both;
  width: auto;
  margin-left: 0%;
  margin-right: 0%;
  height: 500px;
  background-color: rgb(47, 50, 56);
  box-shadow: 2px 2px 3px rgba(36, 36, 36, 0.451);
}

<div class="main">
  <div class="header">
    <h1 class="header1">header</h1>
  </div>
  <div class="menu">
    <button class="button_menu" onclick="">
      <img class="menu_icon" src="menuicons/menu.png" alt="menu icon">
    </button>
    <button class="button_menu" onclick="">
      <img class="menu_icon" src="menuicons/menu.png" alt="menu icon">
    </button>
  </div>
  <div class="content">
    <div class="left">
      312312312
    </div>
    <div class="centerright">
      <div class="center">
        2312312
      </div>
      <div class="right">
        123123
      </div>
      <div class="bottom">
        najs
      </div>
    </div>
  </div>
</div>

>Solution :

Your .main elements height is not big enaugh. You shold add a min-hight to your .main Element.
Try this:

.main{
  min-height:100vh;
}

And you need to close your the close-tag of the .main element where you want your sticky menu stops.
In other word, your .main Element should contain all the Elements in page.