Jump to content

Transparent navigation disappearing when I try to take my website live / click "set as homepage"

Recommended Posts

Site URL: https://unscriptedfilmco.com/home

Hello!
I am wrapping up a website, and running into a weird problem. Currently, I have the design set to have the header/navigation to be transparent, with a video banner on the home page. It looks great as I am working on it, but as soon as I click "set as home page" the header turns white, and it's not transparent anymore.
 
Here is a link to the home page, you can see now the navigation is appearing as it should since it's not set as home page yet: https://unscriptedfilmco.com/home
 
Any ideas why this is happening? Thanks!!
Link to comment
  • Replies 4
  • Views 358
  • Created
  • Last Reply

Some scripts don't run when in setup. You log out or view them "live" and the script is running. If it has an error in it then you see it. There are some good coders here, much better than I am, and they can inspect your site for a problem. If you are using code to set your banner to transparent, post it here so we can look at it, and see what can be done to remedy the problem. 

Link to comment
1 hour ago, derricksrandomviews said:

Some scripts don't run when in setup. You log out or view them "live" and the script is running. If it has an error in it then you see it. There are some good coders here, much better than I am, and they can inspect your site for a problem. If you are using code to set your banner to transparent, post it here so we can look at it, and see what can be done to remedy the problem. 

Thanks! I tried viewing it in different browsers and in incognito mode, but no luck.

I implemented a coded "template" by a third party. Here is the section of CSS I believe is causing the issue - I tried changing the header from "white" to "transparent":


/* Homepage - White Header */
.homepage [data-controller="HeaderOverlay"] .Header-branding {
    filter: none;
}
.homepage .Header--bottom.Header--overlay,
.homepage .tweak-header-bottom-overlay-on-index-gallery .Header--bottom.Header--index-gallery {
    position: relative;
}
.homepage .Header-inner--bottom {
    padding-bottom: 24px;
}
.Header--overlay.flo-sticky-header,
.tweak-header-primary-nav-hover-style-plain .Header--overlay.flo-sticky-header .Header-nav .Header-nav-folder,
.homepage .Header--bottom.Header--overlay,
.homepage.tweak-header-primary-nav-hover-style-plain .Header--overlay .Header-nav .Header-nav-folder {
    background-color: #transparent;
}
.tweak-header-primary-nav-hover-style-plain .Header--overlay.flo-sticky-header .Header-nav .Header-nav-folder-item,
.tweak-header-primary-nav-hover-style-plain .Header--overlay.flo-sticky-header .Header-nav .Header-nav-item,
.homepage.tweak-header-primary-nav-hover-style-plain .Header--overlay .Header-nav .Header-nav-folder-item,
.homepage.tweak-header-primary-nav-hover-style-plain .Header--overlay .Header-nav .Header-nav-item {
    color: #fff;
}
.tweak-header-primary-nav-hover-style-plain .Header--overlay.flo-sticky-header .Header-nav .Header-nav-folder-item:hover,
.tweak-header-primary-nav-hover-style-plain .Header--overlay.flo-sticky-header .Header-nav .Header-nav-item:hover,
.homepage.tweak-header-primary-nav-hover-style-plain .Header--overlay .Header-nav .Header-nav-folder-item:hover,
.homepage.tweak-header-primary-nav-hover-style-plain .Header--overlay .Header-nav .Header-nav-item:hover {
    color: #474747;
}

 

Link to comment
14 hours ago, courtneynowlin said:

Thanks! I tried viewing it in different browsers and in incognito mode, but no luck.

I implemented a coded "template" by a third party. Here is the section of CSS I believe is causing the issue - I tried changing the header from "white" to "transparent":



/* Homepage - White Header */
.homepage [data-controller="HeaderOverlay"] .Header-branding {
    filter: none;
}
.homepage .Header--bottom.Header--overlay,
.homepage .tweak-header-bottom-overlay-on-index-gallery .Header--bottom.Header--index-gallery {
    position: relative;
}
.homepage .Header-inner--bottom {
    padding-bottom: 24px;
}
.Header--overlay.flo-sticky-header,
.tweak-header-primary-nav-hover-style-plain .Header--overlay.flo-sticky-header .Header-nav .Header-nav-folder,
.homepage .Header--bottom.Header--overlay,
.homepage.tweak-header-primary-nav-hover-style-plain .Header--overlay .Header-nav .Header-nav-folder {
    background-color: #transparent;
}
.tweak-header-primary-nav-hover-style-plain .Header--overlay.flo-sticky-header .Header-nav .Header-nav-folder-item,
.tweak-header-primary-nav-hover-style-plain .Header--overlay.flo-sticky-header .Header-nav .Header-nav-item,
.homepage.tweak-header-primary-nav-hover-style-plain .Header--overlay .Header-nav .Header-nav-folder-item,
.homepage.tweak-header-primary-nav-hover-style-plain .Header--overlay .Header-nav .Header-nav-item {
    color: #fff;
}
.tweak-header-primary-nav-hover-style-plain .Header--overlay.flo-sticky-header .Header-nav .Header-nav-folder-item:hover,
.tweak-header-primary-nav-hover-style-plain .Header--overlay.flo-sticky-header .Header-nav .Header-nav-item:hover,
.homepage.tweak-header-primary-nav-hover-style-plain .Header--overlay .Header-nav .Header-nav-folder-item:hover,
.homepage.tweak-header-primary-nav-hover-style-plain .Header--overlay .Header-nav .Header-nav-item:hover {
    color: #474747;
}

 

Add to Home > Design > Custom CSS

/* Home header color */
body.homepage .Header-nav-inner * {
    color: black !important;
}
body.homepage .Header-branding-logo {
    filter: invert(1);
    -webkit-filter: invert(1);
}

image.thumb.png.9298fcb50fce6bbeaa8d3da543860d26.png

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

Archived

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.