Jump to content

custom css to move logo on gazette cover page

Recommended Posts

I'm trying to move the logo on my cover page vertically so it can sit in the top left corner, but only have the option to move it horizontally across the midline of the page. Any custom css code to help? I also want to make sure the navigation stays in the bottom right. Not sure if better to create a proper page vs cover page, but wasn't able to find another way to make a full-bleed carousel background where the images weren't links. Any help would be so appreciated. Thanks!

 

Screen Shot 2022-03-13 at 8.09.00 PM.png

Edited by sophrec
updating information, typo
Link to comment
  • sophrec changed the title to custom css to move logo on gazette cover page
  • Replies 5
  • Views 446
  • Created
  • Last Reply

Top Posters In This Topic

16 hours ago, sophrec said:

Add this to Cover Page Header

<style>
  .sqs-slide-wrapper[data-slide-type="cover-page"] [data-compound-type="logo"][data-slice-type="image"] img {
    position: fixed !important;
    top: 5px !important;
    left: 5px !important;
}
</style>

 

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
On 3/15/2022 at 3:02 AM, tuanphan said:

Add this to Cover Page Header

<style>
  .sqs-slide-wrapper[data-slide-type="cover-page"] [data-compound-type="logo"][data-slice-type="image"] img {
    position: fixed !important;
    top: 5px !important;
    left: 5px !important;
}
</style>

 

i updated the padding amount to match the footer on desktop, but it doesn't match on mobile since the page is dynamic. is there separate code I can use to differentiate desktop vs mobile padding?

Link to comment
On 3/16/2022 at 7:06 PM, sophrec said:

i updated the padding amount to match the footer on desktop, but it doesn't match on mobile since the page is dynamic. is there separate code I can use to differentiate desktop vs mobile padding?

Use this code

<style>
  .sqs-slide-wrapper[data-slide-type="cover-page"] [data-compound-type="logo"][data-slice-type="image"] img {
    position: fixed !important;
    top: 5px !important;
    left: 5px !important;
}
  /* Mobile */
  @media screen and (max-width:767px) {
  	 .sqs-slide-wrapper[data-slide-type="cover-page"] [data-compound-type="logo"][data-slice-type="image"] img {
    top: 25px !important;
    left: 25px !important;
}
  }
</style>

 

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

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.