Jump to content

How to adjust main site header so my logo appears to float above content?

Recommended Posts

Hello, I was previously starting to design my site in a different application until I discovered Squarespace.

However I was previously able to make my logo in my header appear on top (or in the foreground) of my main content and also allow it to stick in position.

Is it possible to do this in Squarespace?

Please do check the video of my old work: 

 

Also this is the link to the current page I am working on: https://bluebird-porcupine-yzdg.squarespace.com/home-v7

Password is: squarespace

NOTE: I would like my brand logo the same position in my video i.e. to the left with the page links, cart and login button to the right.

Many thanks in advance,

Best,

Faizal

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

Thanks very much Derrick,

So I found the code useful as it makes my header sticky:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    if(window.location.href.indexOf("search") > -1) {
       var editCSS = document.createElement('style');
        editCSS.innerHTML = ".sqs-search-page-input {margin-top: 50px;} .Header { background-color: white !important; }";
        document.body.appendChild(editCSS);
    }
});
</script>

 

But I didn't know if I should add the next code as the document you shared states that it will turn my header from transparent to white.

I want to keep the header transparent.

I also notice that since I've added this code in my Page Settings / Advance, I notice now that some earlier code is now permanent on my homepage top even when I sign out and check the live site.

Please advise.

Sorry - I'm not at all confident with code.

Best,

Faizal

code-in-header.png

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.