Jump to content

Navbar Appear on Background Image Hover

Recommended Posts

Site URL: https://www.fourmens.squarespace.com/home-page

I'm working on a site for a local hardware store, which is one of 3 stores owned by 3 owners together which all use the same "Fourmens Farm Home" name.  Since there are 3 stores, I currently have one main home page & just beneath the background header (which incidentally contains no Sqsp text, only spacers), I give them the button option to choose which store they (the customer) would like to visit.

The main home page has the navigation set currently to not display (.Header {display: none !important;} because it interferes with the look of the main page.  However, I want the main home page below the 3 buttons to continue with information for the largest store (rather than making them load another page).

Is there a way to make the navigation bar appear by hovering over the main home page background image (no Sqsp text, only spacers on main banner) so that it could appear for those looking and needing it (by hovering over the background image - perhaps instinctively) to go elsewhere in the largest store, but otherwise it would remain hidden so as to not disrupt the appearance of the main home page.

Bottom line:  Main banner in background; header on main home page set to hide navbar for appearance sake; no Sqsp text, only spacers on top of main background image; would like the navbar to appear by hovering over the background image so as the customer mouses over the main banner, they see the navbar appear at the top of the screen enabling them to navigate away from & to other pages for that specific store.  site: fourmens.squarespace.com,  password:  joyful1

Link to comment
  • Replies 1
  • Views 779
  • Created
  • Last Reply

Can you share access password?

Also, this seems difficult, and I think you need to use JavaScript to achieve this.

if you know CSS basic or HTML basic, you can try this. 

My idea is hover on background 1, It will add class Show-1 to Navigation, then set CSS display: block

Hover on background 2 It will add class Show-2 & Remove Show-1, then set CSS display: block


Reference: https://css-tricks.com/snippets/jquery/addingremoving-class-on-hover/

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


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.