Hello!
I've recently implemented a youtubers code to develop a neat dropdown effect for my website. Where internet surfers/clients/newcomers to our site can visit our services page while accessing the folder contents and their pages under the services umbrella dropdown list. Although this code is good. I noticed it only worked for desktop web browsers and was not mobile-friendly like it was advertised.
I'm looking for help with this code as I'm not a very good coder, more of a designer trying to find a CSS code to help me attain the look and accessibility I need for our website.
Here is the code:
//Fit on Mobile Portrait//
@media screen and (max-width:767px) {
.gallery-fullscreen-slideshow {
height: 16vh !important;
}
}
footer .sqs-block-html a {
background-image: none !important;
background-repeat: no-repeat !important;
text-decoration: none !important;
}
/*TO MAKE FOLDER TITLES CLICKABLE IN SQUARESPACE ON DESKTOP AND MOBILE (7.1)*/
#header .header-menu-nav-folder--open {
transform: none !important;
}
#header .header-menu-nav-folder--active:not([data-folder="root"]) {
transform: translateX(100%);
}
#header .chevron.chevron--right {
display: none;
}
//Wrapping the Dropdown below the header//
.header .header-nav-wrapper a, .header .language-item a {
padding: 1.50em 0;
}
.header .header-announcement-bar-wrapper {
padding: 0 3vw;
}
// DROPDOWN PADDING //
.header-nav .header-nav-item--folder .header-nav-folder-content {
padding: 0px; }
// DROPDOWN CONTAINER //
.header-nav-folder-content {
border-radius: 0px;
background: #FFFFFF !important; }
// LINK STYLING //
.header-nav-folder-item { a {
color: #3273EC !important;
padding: 9px !important; }}
// HOVER COLOR //
.header-nav-folder-item:hover {
background: #3273EC !important; }
// this is to match the border radius of the container //
.header-nav-folder-item:first-child:hover { border-radius: 6px 6px 0 0;}
.header-nav-folder-item:last-child:hover { border-radius: 0 0 6px 6px;}
// HOVER LINK STYLING //
.header-nav-folder-item:hover {
a { color: #FFFFFF !important; }}
// DROP SHADOW //
.header-nav-folder-content {box-shadow: 2px 2px 5px rgba(0,0,0,.2)}
// REMOVE ACTIVE MAIN NAV UNDERLINE //
.header-nav-item--active a {
background-image: none !important; }
// REMOVE ACTIVE NAV UNDERLINE WITHIN DROPDOWN //
.header-nav-folder-item--active .header-nav-folder-item-content {
background-image: none !important; }
// LEFT ALIGN DROPDOWN LINKS //
.header-nav-folder-item {
text-align: left; }
[Code Reference: https://youtu.be/OWchLzQoxWA?si=1yQSPwSVZ6ONoQem ]