Jump to content
Join us live on Dec. 11 as we discuss the most-anticipated designs of 2025 with three brand design experts. ×

Quick Shopping Cart CSS Question

Recommended Posts

CharnyHealingCenter Level 1

CharnyHealingCenter

Posted
Posted

Hello!

I'm working on a page where the main content is custom html + css + java. The code generates a magnifying glass search button that becomes a dropdown list (highlighted in green below). The script works in an external editor I've used to debug, but when I insert into Squarespace it's messing up the shopping cart in the header (red highlight).

Is there a way to override these changes to the shopping cart in the header with something like: ".cart-button <some command> !important"? Or is there a bug in my code I'm not noticing? Code is also below.

Any suggestions are welcome. Thanks in advance!

Capture.PNG.98abcdb6e7f9f68db5b92666399d08dd.PNG

 

Code:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

/*animated search bar*/
.search {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 80px;
    height: 80px;
    background: #fff;
    box-shadow: 0 5px 20px rgba(0,0,0,0.5);
    border-radius: 4px;
    transition: width 0.5s;
    overflow: hidden;
}

.search.active {
    width: 400px;
}

.search input {
    position: absolute;
    top: 10px;
    left: 10px;
    width: calc(100%-90px);
    height: 60px;
    border: none;
    outline: none;
    font-family: arial;
    font-size: 36px;
    padding: 0 4px;
    color: #666;
}

.icon {
    position: absolute;
    width: 60px;
    height: 60px;
    top: 15px;
    right: 4px;
    background: white;
    cursor: pointer;
    transition: 0.5s;
    border-radius: 4px;
}

.search.active .icon {
    background: rgba(100,100,100,0.3);
    top: 10px;
}

.icon:before {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    width: 24px;
    height: 24px;
    background: transparent;
    border: 2px solid #262626;
    border-radius: 50%;
    transition: 0.5s;
}

.search.active .icon:before {
    content: '';
    position: absolute;
    top: 7px;
    left: 13px;
    width: 18px;
    height: 30px;
    background: transparent;
    border: none;
    border-right: 2px solid #fff;
    border-radius: 0;
    transition: 0.5s;
    transform: rotate(45deg);
}

.search.active .icon:after {
    content: '';
    position: absolute;
    top: 20px;
    left: 13px;
    width: 18px;
    height: 30px;
    background: transparent;
    border: none;
    border-right: 2px solid #fff;
    border-radius: 0;
    transition: 0.5s;
    transform: rotate(-45deg);
}

.icon:after {
    content: '';
    position: absolute;
    top: 25px;
    left: 35px;
    width: 18px;
    height: 18px;
    background: transparent;
    border-left: 2px solid #262626;
    border-radius: 0;
    transform: rotate(-45deg);
    transition: 0.5s;
}

/*dropdown*/
/*dropdown search bar*/
.dropbtn {
  background-color:transparent;
  border: none;
  color: white;
  text-color: white;
  position: absolute;
  top: 42%;
  left: 20.7%;
  margin: 24px;
  font-size: 36px;
  font-family:arial;
  cursor: pointer;
  height: 60px;
}

#myInput {
  box-sizing: border-box;
  background-image: url('searchicon.png');
  background-repeat: no-repeat;
  font-size: 36px;
  font-family:arial;
  color: #666;
  padding: 19px;
  border: none;
  border-bottom: 1px solid #ddd;
  border-radius: 4px;
}

#myInput:focus {outline: 3px solid #ddd;}

.dropdown {
  float:right;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 43.5%;
  left: 24.1%;
  background-color: #f6f6f6;
  min-width: 200px;
  overflow: scroll;
  height: 400px;
  width: 325px;
  border: 1px solid #ddd;
  border-radius: 4px;
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}

</style>
</head>
<body>

<div class="search">
  <div class="icon"></div>
</div>

<div>
<div id="myDropdown" class="dropdown-content">
  <input type="text" placeholder="Search..." id="myInput" onkeyup="filterFunction()" autocomplete="off">
  <a href="allergy-research-group-products">Allergy Research Group</a>
</div>


    
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $('.icon').click(function(){
      $('.search').toggleClass('active')
      document.getElementById("myDropdown").classList.toggle("show");
    })
  });
 
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

function filterFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  div = document.getElementById("myDropdown");
  a = div.getElementsByTagName("a");
  for (i = 0; i < a.length; i++) {
    txtValue = a.textContent || a.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      a.style.display = "";
    } else {
      a.style.display = "none";
    }
  }
}
</script>
</body>
</html>

  • Replies 3
  • Views 955
  • Created
  • Last Reply
  • 1 month later...
tuanphan Level 18

tuanphan

Posted
Posted
On 7/24/2020 at 10:15 PM, CharnyHealingCenter said:

Hi tuanphan! The site is still under construction (updating from 7.0 to 7.1) but here's the info:

url: https://daffodil-lizard-tb7t.squarespace.com/testsearch

pw: PAMttJt8Y3RZ

The page is called ~TestSearch. Many thanks!

Hi. Do you still need help on this?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources