Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Question

Dear All

I am not technical guy. however, i am learning new. I am trying to add a search bar at the header. for which i have to inject java code and css etc. the problem i face is when i try to update css. the existing css i have already there would no longer work. (FYI: i have already pasted a css for logo transparency) when i paste a new css code the logo transparency would stop to work. Please suggest what i am doing wrong and what is the correct way to do it.

Share this post


Link to post

4 answers to this question

Recommended Posts

  • 0

p {
    text-align: justify;
  }

.header-search-bar{
  margin: 0 0 0 2.5vw;
  @media(max-width:799px){
    display:none;
    margin: 0 0 0 0vw;
  }
}
.mobile-header-search-bar{
  display:block;
  padding-left:3vw;
  padding-right:3vw;
  .preFade, .preScale, .preSlide, .preClip{
    opacity:1 !important;    
  }
}

//White Logo on These Sections

.white,.white-bold,.light,.light-bold,.dark,.dark-bold,.black,.black-bold,.bright,.bright-inverse {
  &.header-announcement-bar-wrapper .header-title-logo a {
    content: url('https://static1.squarespace.com/static/5f00086a2ddef016da02598f/t/5f01b50838bdf707c8cf97fb/1593947402048/sportsnu-logo-white.png');
  }
}

 

****************

Here is the thing. The first one is to justify the text. i found this solution, but its not working. my text is still left aligned and i don't seems to find any solution. Please help here.

The second one is to add the search bar header which i have not tried as it was impacting my primary css # 3 which is to show my logo transparent.

There is one more feature i am desperately looking is to add product reviews and stars. please help

Thank you.

Share this post


Link to post
  • 0

I need a link to your page to really help, but here is the current code with syntax errors fixed:

 p {
   text-align: justify;
 }

 .header-search-bar {
   margin: 0 0 0 2.5vw;
 }

 @media screen and (max-width:799px) {
   .header-search-bar {
     display: none;
     margin: 0 0 0 0vw;
   }
 }

 .mobile-header-search-bar {
   display: block;
   padding-left: 3vw;
   padding-right: 3vw;

   .preFade,
   .preScale,
   .preSlide,
   .preClip {
     opacity: 1 !important;
   }
 }

 /* White Logo on These Sections */

 .white,
 .white-bold,
 .light,
 .light-bold,
 .dark,
 .dark-bold,
 .black,
 .black-bold,
 .bright,
 .bright-inverse {
   &.header-announcement-bar-wrapper .header-title-logo a {
     content: url('https://static1.squarespace.com/static/5f00086a2ddef016da02598f/t/5f01b50838bdf707c8cf97fb/1593947402048/sportsnu-logo-white.png');
   }
 }

 


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...