Responsive Header Opacity and Menu Placement Issue

[ronin]

Our site has Dante with header #3 set to 0% opacity. Full width header on, sticky header on, but turned off for mobile & tablet.

I have set background images as assets that carry from the back of the title area to the top of the screen. This works fine in desktop browsers and iPad, but on the tablet, the header is incorrectly opaque. How do I fix that so it’s 0% as it should be?

Also, on portrait orientation of an iPhone, the menu icon/button is placed awkwardly. This has only occurred with header #3 selected.

See images for clarification.

cheers, Kurt

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-
.alt-bg.alt-four{background-size: cover !important;}
Thanks 🙂
With Best Regards
Mohammad

[ronin]

Thanks, but that hasn’t fixed it.

We need the header to remain transparent on mobile devices, and for the menu icon to be in the correct spot.

cheers, Kurt

[Kyle – SUPPORT]

Hi

Try this:

@media only screen and (max-width: 768px) { 
.header-3 #logo, .header-4 #logo, .header-5 #logo {
  padding-right: 0;
  position: relative;
  width: 100%;
}
.page-id-4580 #logo {
  margin: 0 5%;
  width: 100%;
}
}

– Kyle

[ronin]

Thats fixed the logo, thanks; but how do we make the header transparent like it is on bigger resolutions?

cheers, Kurt

[Kyle – SUPPORT]

It already is? (see screenshot)

– Kyle

Attachments:

You must be logged in to view attached files.

[ronin]

No, that’s only on the front page where your Home8 css mods are in effect. The rest of the pages look like this attachment on mobile.

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Well you would use this:

.header-wrap {
position: absolute !important;
}

But then the rev slider / title below overlaps with the header and looks messy, for e.g. see screenshot

– Kyle

Attachments:

You must be logged in to view attached files.

[ronin]

So to clarify – Is that problem restricted to pages where we have the rev. slider at the top?

Because we’re still playing with layouts, pending a solution to this problem. We may do the rev. slider pages another way to get around it.

[Kyle – SUPPORT]

When you say you want the naked header on mobile, it means all the content below the header is pushed to the top of the page, so that the header overlays the content. Which in some cases does not look good.

– Kyle

[ronin]

I don’t so much want all the content pushed UP, but just for the header to be 0% opacity like on larger devices. Isn’t there a way to remove the header, and then space what’s below it back down again for phone resolutions?

Really hoping for a solution to this – right now, we’ve got 3-4 more Dante builds that we want to use that sort of a look for, and the only shortcoming is the phone view.

[Kyle – SUPPORT]

I don’t understanding what you’re trying to achieve? The header is 0% opacity, when it was showing grey behind (which is the color of your body background). Please can you attach a screenshot of what you are trying to achieve?

– Kyle

[ronin]

Sure mate, thanks – gimme a sec…

[ronin]

So at the moment, it looks like my 7:08 z header attachment on a phone. There is a grey box behind the logo and menu icon.

But I want it to match these attachments, where the logo, the menu (menu icon), and header title are all superimposed on the page title background image.

I just need it to do whatever it’s doing at that tablet resolution, at the smaller phone res.

cheers, Kurt

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Yes, I have provided you with the CSS to do that already. But like I said, in some cases it looks messy, for e.g. the page where you are using the Rev slider

– Kyle