Jump to content

Quick Shopping Cart CSS Question

Recommended Posts

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>

Link to comment
  • Replies 3
  • Views 864
  • Created
  • Last Reply
  • 1 month later...
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!)

Link to comment

Archived

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

×
×
  • 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.