Custom Navigation Bar Using Pseudo Elements

Site URL: https://liyasafina.squarespace.com/?password=pearler

I've quite heavily customised this navigation bar, however I'm struggling to get on of the elements to respond to different screen sizes properly. I'd love to know if I've gone to far or if this is fixable 🙂

https://liyasafina.squarespace.com/?password=pearler

// SPLIT NAV➷ ☯ ☯ ☯ ☯ //

.header-nav {
    position: absolute;
    top: -10px;
    bottom: 0;
    margin-top: 0!important;
}

.header-nav-item:nth-of-type(1) {
    margin-right: 250px!important;
}

.header-title-logo a {
    z-index: 1000;
    position: relative;
}


// FORCE MOBILE MENU ➷ ☯ ☯ ☯ ☯ //

.header-display-desktop {
  .header-burger {
    position: absolute;
   	left: 0; 
  }
}


@media screen and (min-width:768px) {
  
.header-nav {
    display: none;
}  
  
.header-burger {
  display: flex;
}

.header--menu-open .header-menu {
	opacity: 1;
	visibility: visible;
	}
}


// STYLING ➷ ☯ ☯ ☯ ☯ //

.header {
	padding-left: 2vw  !important;
	padding-right: 2vw  !important;
}

.header-announcement-bar-wrapper {
  margin-top: 2vh !important;
}

.header-blur-background {
  border: 1px solid #fff;
  border-radius: 100px !important;
  padding: 1em !important; 
}


// POP OUT MENU STYLING ➷ ☯ ☯ ☯ ☯ //

.header-actions-action .theme-btn--primary-inverse {
	color: #fff !important;  
}

.header-menu {
	backdrop-filter: blur(20px)!important;
}

.header-menu-nav-item {
  border: 1px solid @white;
  border-radius: 1000px !important;
  margin-bottom: 3vh !important;
}

.header-menu-nav-folder .sqs-button-element--primary {
  display: none !important;
}

@media screen and (min-width: 768px) {
.header-menu-nav-item a {
    font-size: 3vmin;
	}  
}


// ARROW ICON ➷ ☯ ☯ ☯ ☯ //

.header-actions-action--cta::before {
  content: "";
  position:absolute;
  background-image:url(https://static1.squarespace.com/static/63157662f6b5811cc3a430b2/t/633b8cbffda77e2e702deadb/1664847039839/Arrow.png);
  background-size:contain;
  background-repeat:no-repeat;
  width:200%;
  height:200%;
  top: -50%;
  left: 6vw;
  z-index:2;
}


// PSEUDO 'MENU' WORD ➷ ☯ ☯ ☯ ☯ //

.burger-box::after {
  content: "MENU";
  color: #fff;
  font-family: 'Inter' !important;
  font-size: 1rem;
  position:absolute;
  top: 25%;
  left: 75%;
  z-index:2;
}


// CUSTOM BURGER ICON ➷ ☯ ☯ ☯ ☯ //

.burger-inner .top-bun, 
.burger-inner .patty, 
.burger-inner .bottom-bun {
	background-color:transparent !important;
}

.burger-inner::before {
 	content:"";
  	background-image:url("https://static1.squarespace.com/static/63157662f6b5811cc3a430b2/t/633b8ac03c30215fd4c6a749/1664846528294/Burger.png");
  	background-size:cover;
  	position:absolute;
  	width:150%;
  	height:150%;
  	z-index:2;
  	top: -30%;
  	left:-2vw;
}

// MOBILE MENU SPACING ➷ ☯ ☯ ☯ ☯ //

.header-menu-nav-folder-content {
    flex-grow: unset !important;
  	width: 95%;
    margin: auto;
}

.header-menu-nav-item a {
	margin: 2vw 2vw !important;
}

 

Big thanks!

Can you describe your desired result you want to achieve?