Jump to content

Make images float over two sections

Go to solution Solved by tuanphan,

Recommended Posts

How do I code so that images overlap two sections and float over both sections? I have two areas on my site where I want to do this. 

1. The main homepage 3 widgets

2. A logo that covers both of my double navigation bars on all pages

This is what I want both to look like:

image.png.cf454555475e44da616464fb12441381.png


image.png.1d387bc296bb18dc1ca1b51e384282df.png

This is what it currently looks like. You can see the images on the LHS of both pictures. (I have a larger logo that should float over/cover that tiny logo in the header) I just can't get them to float in front of the higher section. 
image.thumb.png.c99addaee87e7b30034c8c8ab8adb20c.png

image.thumb.png.928d5d4fdb82bef55c6d382a95950ec3.png

Here's my site, passcode is: cpttestsite
https://columbiapedstherapy.squarespace.com/

 

Here's the code I have currently:

#block-yui_3_17_2_1_1705699986318_9615{margin-top:-75%}
#block-16659e02475574ac6de7{margin-top:-85%}

CPT Widget Design.jpg

Link to comment
  • Replies 4
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

Thank you! This worked to get my logo where it needs to be. I adjusted it to the right a little bit as well.

Unfortunately, this also moved just the background for my primary navigation up. You can see the lighter blue line super thin now. Is there a way to fix this? I played with a few option, but haven't been able to extend just the color itself down. 

I do have some coding for the secondary nav bar in navy blue. Is that creating this problem? 

image.thumb.png.6983620743b7cd2863d620deb1f754c3.png

Edited by Megan_E
Link to comment

Yes, I found a spot in the header design settings where I could make the navigation bar background thicker. I just made it extra thick so now it extends past both the secondary and main navigation bars. 

Thanks for your help! 

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.