Docs

[ctlittler]

Hi there!

I’m building a site where I would like the home page to have a transparent header over an image, which I have successfully done. It appears that one can only have a transparent header over an image (in Integrity) by having a fixed header. So I did that.

Site: http://www.5daysinthedesert.com

However, I do not want a fixed header on subsequent pages.

So, to solve that, I inserted some code in my global CSS:

.page-id-10 .x-navbar.x-navbar-fixed-top {
  position: static;
}

.page-id-40 .x-navbar.x-navbar-fixed-top {
  position: static;
}

.page-id-44 .x-navbar.x-navbar-fixed-top {
  position: static;
}

My only problem is that I when I load up those three pages, the header appears, then disappears the moment I begin to scroll. I believe the problem may be in the CSS I used to make the original home page header transparent:

@media (min-width: 980px) {
    .masthead-stacked .x-nav {
        display: block;
    }

    .x-navbar .x-nav>li:last-child {
        float: right;
    }

    .x-navbar .x-nav>li:last-child a {
        border: 1px solid #fff;
        padding-left: 10px;
        padding-right: 10px;
      	padding-bottom: 20px;
        border-radius: 1px;
    }
}

.x-navbar .desktop .x-nav > li > a:hover, 
.x-navbar .desktop .x-nav > .x-active > a, 
.x-navbar .desktop .x-nav > .current-menu-item > a {
    -moz-box-shadow:   none;
    -webkit-box-shadow: none;
    box-shadow:         none;
}

.x-navbar {
  			border-bottom-color:  rgba(255, 255, 255, 0) !important; 
  			box-shadow: none !important;
  			background-color: transparent;
}

If anyone has a solution that would keep my headers on those three pages from disappearing the minute I begin to scroll, I would be thrilled. Thank you!

—

URL: http://www.5daysinthedesert.com
Wordpress: 4.7
X Version: 4.6.4
Cornerstone: 1.3.3

[Nabeel A]

Hi there,

Thanks for writing in! Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.page-id-10.x-navbar-fixed-top-active header.masthead.masthead-inline,
.page-id-40.x-navbar-fixed-top-active header.masthead.masthead-inline,
.page-id-44.x-navbar-fixed-top-active header.masthead.masthead-inline {
    height: auto !important;
}

Let us know how this goes!

[Author]

Posts