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

Navbar Appear on Background Image Hover


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

Edited by rjsimplelyfe

Share this post

Link to post

1 answer to this question

Recommended Posts

  • 0

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/

Edited by tuanphan

COVID-19Free priority support for all users (29/03 - 30/04). You can tag me (@tuanphan) or send to my email.

With paid support, see here


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...