Jump to content

Problem using CSS to overlap Header (with no header margin) - Supply Template gallery page

Recommended Posts

Site URL: http://constantinetohme.com/programs

I can’t figure out some issues with CSS in Supply template I am working on. 

I am trying to get the header to overlap the gallery image on this page so that the header links are just on top of (overlap) the gallery image - while keeping the function of the clickable button / the slide out panel..

The CSS I am using to accomplish this works on regular pages but isn’t working on this type of gallery page - here is the page [Click here] and below is the code I am currently using, do you have any suggestions on how to get this to work? [Here] is an example of it working fine on a regular page - you can see the header links just float on top of a full width site image which is the result I am looking for.  

<style>
body#yui_3_17_2_1_1646771047917_133 !important .header-announcement-bar-wrapper {position: absolute !important;}
</style>

<style>
 #header {z-index: 99;}
</style>

<style>
/*REMOVE HEADER FOOTER MOBILE BAR*/
#footer #mobile.bar {
display: none !important;}
</style>

<style>
/*NO MARGINS IMAGE BLOCK*/
#yui_3_17_2_1_1646771047917_133
{margin-top:-70px; 
margin-right: -80px;
margin-left: -80px;
margin-bottom:-70px; 
z-index:1;}
</style>

<style>
/*CORRECT PAGE MARGINS*/
#main {

    margin-left: 0;
    height: auto;}
</style>

<style>
/*CHANGES BACKGROUND COLORS*/

  #main {background-color: #66000000; width: 100% !important;}
  #header {background-color: #66000000;}
body {background-color: #66000000;}
#canvas {background-color: #66000000;}
</style>

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

Top Posters In This Topic

Top Posters In This Topic

On 3/13/2022 at 1:16 AM, tuanphan said:

Hi. Have you solved it yet?

Hey! No I can’t figure out how to get the header to overlap on gallery pages of the supply template. In the previous message I list the CSS code I’m using; it works on regular pages (see - [Here] ) of this template but not on the gallery pages (see here -  [Click here] ); I am trying to get it to work on both pages not just regular pages but gallery pages also. Any idea how I can get it to work on gallery pages also?

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.