Menu over image & contact bar

Hi,

1. Something like this in a custom CSS plugin or child theme and you can adjust if needed:

@media only screen and (min-width: 991px) {
	.site-header {
		position: fixed;
		background-color: transparent;
		border: 0
	}
	.header-clone {
		display: none !important;
	}
}

2.

@media only screen and (min-width: 991px) {
        .contact-area {
                display: none;
        }
}

Hi vladff,

Thank you so much for your response! However it doesn’t work :-\
I tried moving the header image up, and then making the site-header the same transparency as the scrolling header, but that doesn’t work either … I did this:

.site-header {
	width: 100%;
	position: relative;
	z-index: 11;
	background-color: rgba(255, 255, 255, 0.8);
	border-bottom: 1px solid #f3f2f2;
}

.header-clone {
	display: none;
	background-color: rgba(255, 255, 255, 0.8);
}

And then in header.php I did this:

<?php do_action('tora_header_bar'); ?>
<div style="margin-top: -150px;">
	<?php do_action('tora_header_image'); ?>

</div>

This moves the image up fine, but it cuts the top half off, rather than making it show through the transparent menu! I’ve tried changing the z-index, but that’s not working either (or I’m using the wrong numbers). It’s very frustrating, as everything I think should work, doesn’t!

Do you (or anyone else) have any other ideas?

Many thanks

Nikki

I might not understand correctly what you’re trying to do. The code I gave you does this which I think is what you’re asking for: https://snag.gy/eR2sYS.jpg

Oh my goodness, it didn’t work when I tried it earlier, but I’ve just tried it again now and it works perfectly! Not sure what went wrong first time! Thank you so much for all your help ??

Happy to help. Feel free to rate the theme if you enjoy it ??

Hi again,
I’m so sorry to come back to you on this!! When I logged off for the day yesterday it was all working as expected … and when I logged on again this morning, the menu had completely disappeared! I removed the custom css and the menu reappeared, however now it seems to go down behind the header image on scroll. I have no idea what happened, I don’t think I changed anything else – I did install a custom header plugin as I wanted to be able to have a different custom header on each page, but I’ve deactivated the plugin and it’s still not working properly. I’ve re-uploaded the original theme css and header.php as I did fiddle around a bit in those files, but other than that I have no idea what could be causing this!
I’m so sorry, but could I ask you for some more help on this?!
My site is: https://avsglass.co.uk/
Many thanks
Nikki

I’ve just updated to WordPress 4.5.3 and now it seems to be working again … argh!!

Could be due to your css minifing plugin. The code itself is pretty straightforward so it can’t stop working by itself.

OK, thank you, I have no idea what that was all about!

While I have you there, would it be a pain to ask you something else??

I’d like to replace the header image on the homepage with a slider … is there an easy workaround for this?

Also, I’d like to display different images (without the text, or with different text) on the other pages. The plugin I tried yesterday allows me to change the header image on different pages, but the same text as the homepage is still overlaying it.

You’ve been more than helpful already, so feel free to tell me to stick it, since this is a free theme ?? I will definitely rate it very highly!

Thanks again!

Nikki

I can point you in the right direction. There are actions throughout the theme. For instance in header.php:

<?php do_action('tora_header_image'); ?>

That’s where the header image function (inc/functions/functions-header.php) is hooked and this is how you remove it:

<?php remove_action('tora_header_image', 'tora_header_area', 9); ?>

Then you can hook your own function that does whatever you need it to do.