Sticky header (header-image NOT colored headerbar)

Hello there!

First - I love your theme!! Thank you so much for letting us using it for free!

I’m struggling with the floating header: I think, this is a really minor change in the css-code but I didn’t find the right code-part to modify. I would like to use a sticky menu including the site logo on the left, the menu (including the search-form and submit). If i’m scrolling down, the header image got replaced by a colored bar, but i would like to keep the headerimage as sticky background for the menu and everything…
How can i do that? i really tried it on my own in the css-editor, but it didn’t work.

the website-url is: wp.weyrauch.ch/our-shoes/boot

(When you’re on the “boot”-page you can see, that if you click on the first of the three upper shoes, a lightbox opens with an dark overlay over the whole page, except the three lower shoe-pictures, the header-logo and menu, and the hr.style-two line (for separation). How can i expand the overlay over everything? i tried working with the z-index, but it didn’t work out properly. I would also like to add a scrollbar, that there is no resizing of the content because of “no scrollbar existing” if i click on the lightbox.)

Does someone have a solution for these two/three problems?
I would be soooooo happy!
Thank you in advance.
Simon

Hi Simon,

You can try to use the following css code to replace the current float-header with the background image:

.site-header.float-header {
    background-image: url(http://wp.weyrauch.ch/wp-content/uploads/2016/01/cropped-IMG_1864-3.jpg);
    background-size: cover;
}

I’m not sure why the z-index is not working, have you try to ask to the plugin supports?

Hello Awan
Thank you so much for your answers!

First: The header-image works almost perfectly now. I would like to eliminate the standard-header which appears when I am at the top of a page (which is a bit higher). It looks strange when i’m scrolling to the top: I still see the colored bar which I wanted to replace with my header-image. I would like to have just one header-image in the one size all the time (it shouldn’t matter if i am at the top of the page or in the middle).

Second: I tried to insert the css-style attribute in the pagebuilder. It didn’t work :frowning:
I found out, that it works fine for the first row of shoes if i click on a picture of the second row of shoes. Or for example if I click on the 4th row of shoes there is a perfect overlay over the separation-lines (hr.style-two) and all pictures/rows before (row 1, row 2, row 3). But the following rows (row 5, row 6, etc.) do not have an overlay.

And the whole website slightly moves/stretches to the right when i’m opening a lightbox (because it doesn’t show a scrollbar on the right in the lightbox). Can I place a standard scrollbar in the lightbox as a placeholder?

I’m so sorry for all these questions. And I know that you really don’t have to take time for answering all this, but I would do me a HUGE favour with a few tips.

Simon

Please try this css code instead for the header:

.site-header.float-header {
    background-image: url(http://wp.weyrauch.ch/wp-content/uploads/2016/01/cropped-IMG_1864-3.jpg) !important;
    background-size: cover;
    background-position: 100% 45%;
}

It doesn’t work. When i’m scrolling down the page now, the header picture scrolls as well. And the colored bar still appears for a half of a second when i’m scrolling back to the top. I should kind of overwrite or delete the standard-header (for the not scrolled page, when I’m at the very top of the page), but I have no idea how. I don’t want to mess up the whole style.css with just deleting something there.

(For the other problem i have to ask at the webdorado-support. But thanks anyway for your efforts on this!)

Oh I see, you can use these css code to remove the brown color on the header

.site-header.float-header {
    background-color: unset;
}

If the unset didn’t worked, You can try to use transparent instead

Hello Awan
The colored bar disappeared now. Thank you! But as I said: the header a (not scrolled) should be the same as the header b (scrolled). The height, the position of the picture and the zoom of the picture. And there should be no movement at all between header a and header b. Just one sticky header for everywhere (except the frontpage). What do I have to delete or replace in my header-section of my style.css?

Style.css----------------
/--------------------------------------------------------------
Header
--------------------------------------------------------------
/
.site-title {
font-size: 32px;
line-height: 1.2;
}
.site-title a,
.site-title a:hover {
color: #fff;
}
.site-logo {
max-height: 100px;
}
.site-header {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
background-color: transparent;
padding: 20px 0;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.admin-bar .site-header,
.admin-bar .site-header.float-header {
top: 32px;
}
.header-image {
display: none;
position: relative;
height: 300px;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.header-inner {
display: none;
}
.site-title {
margin: 0;
}
.site-description {
font-size: 16px;
margin: 15px 0 0;
line-height: 1.6;
color: #efefef;
}
.site-header.fixed {
position: fixed;
}

.site-header .col-md-4,
.site-header .col-md-8 {
	min-height: 0;
}

.site-header .logo {
	margin: 40px 0;
	float: left;
	-webkit-transition: all 0.3s linear;
	   -moz-transition: all 0.3s linear;
	    -ms-transition: all 0.3s linear;
	     -o-transition: all 0.3s linear;
	        transition: all 0.3s linear;
}

.site-header .logo a {
	display: block;
	height: 100%;
}

.site-header .logo {
	width: 135px;
	height: 27px;
}

.site-header.float-header {
	background-color: rgba(0,0,0,0.9);
	padding: 5px;
}
.site-header.float-header #mainnav {
	padding: 0;
}

.site-header.float-header #mainnav > ul > li > a {
    height: 70px;
    line-height: 70px;
}

.site-header.float-header .logo {
    margin: 20px 0;
}

Style.css---------------------------

Thank you so much for your help!

Simon

PS: and i added your code to my child theme style.css–>

.site-header.float-header {
background-image: url(http://wp.weyrauch.ch/wp-content/uploads/2016/01/cropped-IMG_1864-3.jpg) !important;
background-size: fixed !important;
background-color: transparent !important;
}

Just checking back your site and looks like you change the image?
These css code should be have the same displays before the page is scrolled, please remove the previous custom css code and change with this:

.site-header.float-header {
    background-image: url(http://wp.weyrauch.ch/wp-content/uploads/2016/01/cropped-IMG_1869-1.jpg);
    background-color: transparent !important;
    height: 120px;
    background-size: cover;
    background-position: center;
}

And about the effect of the header image when page is scrolled, its because the javascript event, you have to contact codeable for full support

Hello Awan

I replaced the css-code with your new code. Now the picture is the same as in the header showed when the page is NOT scrolled.
I tried to find the line in the main.js and i thought i was successful. I found the following lines:

var headerFixed = function() {
var headerFix = $(’.site-header’).offset().top;
$(window).on(‘load scroll’, function() {
var y = $(this).scrollTop();
if ( y >= headerFix) {
$(’.site-header’).addClass(‘fixed’);
} else {
$(’.site-header’).removeClass(‘fixed’);
}
if ( y >= 107 ) {
$(’.site-header’).addClass(‘float-header’);
} else {
$(’.site-header’).removeClass(‘float-header’);
}
});
};

Actually this should be the place where i could get rid of the header replacement, when i’m scrolling down further than y=107. I uploaded the changed file
(i deleted:
if ( y >= headerFix) {
$(’.site-header’).addClass(‘fixed’);
} else {
$(’.site-header’).removeClass(‘fixed’);
}
)

and I changed the y>=107 to y>=0.
But it didn’t work. It didn’t change anything…

I also asked codeable for help, but they didn’t reply. :frowning:

Hi,

I’m afraid we don’t support this level of customisation for free. We have helped you as much as we can. I can recommend Upwork for finding a developer to work with.