Header image below menu or slider

Hello - I have been searching these forums for about 3 hours - so I am confident I have tried close to everything (probably just haven’t tried the right thing!).

Anyway, I am trying to accomplish the following two things:

(1) Header image to be below menu (not overlaid on the image);
(2) The menu to continue to be sticky.

The most promising thing I have tried is:

.site-header{
  position: relative !important;
}

However, when I do that, if I am using a static image, the menu is no longer “sticky” and it also turns white. If I am using a slider through the shortcode, it looks fine, but the menu is no longer sticky.

Any thoughts?

the website I am working on is new2.calgaming.org

Thanks!

Hello Joe,

Please try to use the following CSS code.

You can add CSS code in DashboardAppearanceCustomizeAdditional CSS (WordPress 4.7 and up). Also you can add CSS code directly to style.css file of your child theme.

@media (min-width: 1025px) {
    .header-image {
        padding-top: 84px;
    }
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

OK… great news - it mostly worked - but I am still having an issue when using the crelly slider. Your code set me on the right track - but using that code alone turned the menu gray… I added your code code to my child CSS, but also added the following:

.site-header.has-single,
	.site-header.has-video,
	.site-header.has-header {
		background-color: #00334D;
	}

Now - it looks great with images - but when I put the slider back on, I get the same issue as before.

Any thoughts on what to add for fixing when using the slider?

Thanks again!

I tried adding something like:

.header-shortcode {
   padding-top: 84px;
}

Just to see if it would work… since it isn’t an image - it is shortcode… I suspect I might be on the right track, but not quite there.

I also played around with various settings on the crelly plugin to try and get the thing to have some padding… but to no avail.

Please help a guy out!

Thank you.

Hello Joe,

It looks like this issue requires close inspection, this goes beyond our support policy. As an option, you can find a reputable freelancer on Upwork for this kind of service.

Kind Regards, Roman.

Really? That seems kind of weak. I appreciate the help- but I’m surprised that when using your theme, the shirt code on the pro version… your only option is to have the menu bar overlay the slider you recommend in the tutorials?

I think this is a great theme, but I’m surprised the only option is to overlay the menu on top of content.

Hello Joe,

Well, that’s the way it is. You have specific requirements and Astrid theme header doesn’t seem to meet those requirements. I agree that Astrid is a great theme, but it’s a theme, after all :slight_smile:

Kind Regards, Roman.