Hi all, While designing a website I used a code for my navbar that I felt like wasn't working correctly. So I decided to remove it and replace it with a forced mobile menu code instead. Problem is, my previous code is affecting my forced mobile menu code. And now it looks like the first pic:
Instead of the second pic (Another of my websites)
I know this is caused by my first code because I have tested the forced mobile menu code on three different websites with no issues.
This is the code I removed and has seemingly broken my site:
@media (min-width: 767px) {
/* Fullwidth navigation border*/
// Remove Active Nav Line - Ghost //
.header-nav-item--active a {
background-image: none !important;
}
.header-announcement-bar-wrapper {
padding-left: 0px !important;
padding-right: 0px !important;
}
.header-display-desktop {
flex-direction: column;
}
.header-title-nav-wrapper {
flex: 0 0 100% !important;
margin-right: auto;
width: 100% !important;
}
nav.header-nav-list {
display: flex;
width: 100%;
border-top: 2px solid;
border-bottom: 2px solid;
}
.header-nav-item a {
line-height: initial;
padding-top: 15px !important;
padding-bottom: 15px !Important;
}
.header-nav-item {
border-left: 1px solid;
border-right: 1px solid;
margin: 0 !important;
padding-left: 2vw;
padding-right: 2vw;
margin-left: -1px !important;
}
nav.header-nav-list {
justify-content: center !important;
flex-wrap: nowrap;
}
nav.header-nav-list>div {
width: 20%;
}
// Cart and buttons //
.header-actions.header-actions--right {
position: absolute;
inset: auto 4vw 1rem auto;
bottom: 11vh;
}
// Social icons //
.header-actions.header-actions--left {
position: absolute; left: 8vw; top: 3vh;
}
}
This is the code I am using now:
// Forced mobile //
.header .header-burger{display:flex}
.header-nav, .header-actions {display:none}
.header--menu-open .header-menu {
opacity: 1; visibility: visible;
}
This is also the exact code I am using in the second photo.
My website is https://beige-parsnip-rxyj.squarespace.com/ , password: 1234
Thank you in advanced!