Блок меню

Часть строк вам нужно менять для перекраски меню под свой проект

Строки, начинающиеся с точки — элемент, после него в фигурных скобках перечисляются свойства. Вам нужно будет менять свойства.

Например, в части

  .mobile-menu {
        box-sizing: border-box;
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 16px;
  border-radius: 20px;
background: #0FCE67;
box-shadow: 0px 0px 20px #0FCE67, inset 0px 0px 20px #0FCE67;
  width: 50px;
  top: 20px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: 10px;
 

Вы можете поменять строку background, вместо #0FCE67 поставив свой цвет. Цвет можете взять тут https://colorscheme.ru/color-converter.html, нажимаете на палитру, подбираете текст, вставляете в бэкграунд. Можно втсавлять и в hex, и в rgba, в общем, любой код цвета с этого сайта сработает.
box-shadow: 0px 0px 20px #0FCE67, inset 0px 0px 20px #0FCE67 — это тени меню. inset отвечает за внутренние тени, поэтому можете либо сделать box-shadow: 0px 0px 20px #0FCE67; и поменять код цвета на свой цвет, либо вообще удалить эту строку, если тень не нужна

.mobile-menu__container {
  position: fixed;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0px;
  left: 0;
  right: 0;
  z-index: 900;
  height: 0;
  opacity: 1;
  transition: .5s;
  overflow: hidden;
    background: rgba(0, 0, 0, 0.95);
box-shadow: inset 0px 0px 50px #22BDCA;
}

Это код стилей открытого меню. Тут тоже меняете бэкграунд и тени на свои цвета

Также в коде будут ссылки на мои ресурсы, которые нужно заменить на ссылки на ваши ресурсы. Будут вопросы — задавайте в чатике https://t.me/taplinkbestchat

<div class="mobile-menu non-animated">
    <input type="checkbox" id="menucheckbox" class="mobile-menu__checkbox">
    <label for="menucheckbox" class="mobile-menu__btn"><div class="mobile-menu__icon"></div></label>
    <div class="mobile-menu__container">
    <ul class="mobile-menu__list">
        <li class="mobile-menu__item"><a href="https://taplink.cc/onthewaytothesun" class="mobile-menu__link"><img width="30" src="https://img.icons8.com/material-sharp/24/ffffff/home.png" alt="Home" class="loaded"></a></li>
    	<li class="mobile-menu__item"><a href="https://shop.besttaplink.ru/price" class="mobile-menu__link">Прайс на услуги</a></li>
        <li class="mobile-menu__item"><a href="https://shop.besttaplink.ru/portfolio" class="mobile-menu__link">Портфолио</a></li>
      <li class="mobile-menu__item"><a href="#contacts_block" class="mobile-menu__link">Контакты</a></li>
      <li class="mobile-menu__item"><a href="https://t.me/taplinkbest" class="mobile-menu__link">Мой тг канал по таплинку</a></li>
 		

      </ul>
    </div>
</div>
<style>

  .mobile-menu {
        box-sizing: border-box;
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 16px;
  border-radius: 20px;
background: #0FCE67;
box-shadow: 0px 0px 20px #0FCE67, inset 0px 0px 20px #0FCE67;
  width: 50px;
  top: 20px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: 10px;
  height: 50px;
  z-index: 9999;
}
.mobile-menu__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 30px;
  cursor: pointer;
  z-index: 999;
  transition: .4s;
}
.mobile-menu__icon {
  display: block;
  position: relative;
  background: white;
  width: 90%;
  height: 3px;
  transition: .4s;
  border-radius: 5px;
}
.mobile-menu__icon::after, .mobile-menu__icon::before {
  content: "";
  display: block;
  position: absolute;
  background: white;
  width: 100%;
  height: 3px;
  transition: .4s;
  border-radius: 5px;
}
.mobile-menu__icon::after {
  top: 8px;
}
.mobile-menu__icon::before {
  top: -8px;
}
.mobile-menu__container {
  position: fixed;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0px;
  left: 0;
  right: 0;
  z-index: 900;
  height: 0;
  opacity: 1;
  transition: .5s;
  overflow: hidden;
    background: rgba(0, 0, 0, 0.95);
box-shadow: inset 0px 0px 50px #22BDCA;
}
.mobile-menu__list {
  transition: .5s;
  list-style: none;
  padding-left: 0;
  margin-top: -50px;
}
.mobile-menu__item {
  font-size: 20px;
  padding-bottom: 15px;
}
.mobile-menu__link {
  text-decoration: none;
  color: white;
}
.mobile-menu__checkbox {
  display: none;
}
.mobile-menu__checkbox:checked ~ .mobile-menu__nav {
  opacity: 1;
}
.mobile-menu__checkbox:checked ~ .mobile-menu__container {
  height: 100%;
}
.mobile-menu__checkbox:checked ~ .mobile-menu__btn .mobile-menu__icon {
  background: transparent;
}
.mobile-menu__checkbox:checked ~ .mobile-menu__btn .mobile-menu__icon::before, .mobile-menu__checkbox:checked ~ .mobile-menu__btn .mobile-menu__icon::after {
  top: 0;
}
.mobile-menu__checkbox:checked ~ .mobile-menu__btn .mobile-menu__icon::after {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
.mobile-menu__checkbox:checked ~ .mobile-menu__btn .mobile-menu__icon::before {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

</style>
<script>
const menulinks = document.querySelectorAll('.mobile-menu__link');
for(var i = 0, menucount = menulinks.length; i < menucount; i++) {
 menulinks[i].onclick = function() {
   document.getElementById("menucheckbox").checked = false;
 } 
}
</script>