Jump to content

Mobile Friendly Website Dropdown & Title for List Not Clickable

Recommended Posts

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 ]

 

Link to comment
  • Replies 2
  • Views 322
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.