各位前輩好
小弟我為個人興趣有在接觸WordPress的部分
由於不是專門僅為興趣學習，有些部分想了解也不知從何下手

單純網站架設（含DNS設定、Mail設定相關）、套用樣版並修改這些大略知道
但如果說想要對於有些外觀進階要求的話，似乎就要依靠html+CSS（甚至要js）
我本職不是靠這個吃飯（該說是完全不相關的產業），還請各位前輩鞭小一點

主要我參考別人的作品並修改成我想要的效果（參考下方的網頁）
https://codepen.io/FH-Wei/pen/XWxyLoL
這個效果是當游標靠近該選單的位置時，會自動展開選單

不過好笑的事情來了，這該怎麼套用到現在網站上？
WordPress使用Head, Footer and Post Injections插件
然後WordPress內建的附加CSS語法也弄進去

呃…結果整個頁面變得四不像
我想應該跟html和css語法的關係（以及網頁架構的關係）
但也不知道從何下手，還請前輩們指點

我的需求如下

1.原先的Header（標頭選單）在post（文章）的頁面時會被取消（因為本來Header選單部分變成空白，這邊不知道如何改造，所以想說限定進入文章頁面就拿掉），然後使用這個效果的選單
2.僅在post（文章）才會執行該功能
3.此功能僅會在Desktop和Table的狀況下才會顯示，手機裝置下不會出現這功能

我將html和CSS的語法PO出來
html語法

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Unbounded&display=swap" rel="stylesheet">

<div class="side_menu">
	<div class="title">MENU</div>
	<ul class="nav">
		<li><a href="https://www.spinlux.com">Home</a></li>
		<li><a href="https://www.spinlux.com/about">About</a></li>
		<li><a href="https://www.spinlux.com/products">Products</a></li>
		<li><a href="https://www.spinlux.com/applications">Applications</a></li>
		<li><a href="https://www.spinlux.com/resources">Resources</a></li>
		<li><a href="https://www.spinlux.com/contact">Contact</a></li>
	</ul>
</div>

CSS語法

body {
  margin: 0;
  font-family: "Unbounded", sans-serif;
}
.side_menu {
  font-weight: 400;
  background: #f7b51b;
  width: 190px;
  height: 100%;
  padding-left: 50px;
  position: fixed;
  z-index: 100;
  -webkit-box-shadow: -3px 0px 5px 0px rgba(0, 0, 0, 0.2);
          box-shadow: -3px 0px 5px 0px rgba(0, 0, 0, 0.2);
  right: -160px;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  color: #222;
}
.side_menu:hover,
.side_menu:focus {
  transform: translate3d(-150px, 0, 0);
    -webkit-transform: translate3d(-150px, 0, 0);
    -ms-transform: translate3d(-150px, 0, 0);
    animation-timing-function: 1s ease-in;
}
.side_menu .title {
    top: 50%;
    position: absolute;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    transform: rotate(270deg);
    left: 10px;
    font-weight: 800;
    font-size: 20px;
}
.side_menu .nav {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    font-weight: 100;
}
.side_menu .nav li {
      padding-bottom: 30px;
      list-style-type: none;
}
.side_menu .nav li a {
        display: block;
        text-decoration: none;
        color: inherit;
        transition: all 0.3s;
        -webkit-transition: all 0.3s;
}
.side_menu .nav li a:hover {
          color: #ff0000;
}

想請教各位前輩，我可以怎樣把這個效果套用到網站裡呢？
還請不吝指教，謝謝！