Fancy Header cut off on mobile

[alliehughes]

We are having trouble with the fancy header (naked header) on mobile, it is being cut off by the logo and nav bar.

Website is http://scoopmae.wpengine.com

Tried some CSS fixes, no luck.

Thank you for your help!

Allie

[Rui Guerreiro – SUPPORT]

Hi,

That’s how it is by default in mobile since the header is sticky, it has some background.

If don’t have a solid background you will face this kind of problems when scrolling down.

https://www.dropbox.com/s/xfhnw6rrz2y28eb/sitcky_header_problems.png?dl=0

-Rui

[alliehughes]

Hi Rui,

Is there nothing I can do to correct that? It makes it super not mobile friendly… any CSS that I can implement to work it?

Thanks,
Allie

[alliehughes]

Hi,

I think, from your screen shot, that you are not seeing what I am seeing. I am more referring to how the title is completely chopped in half… is there a fix for that?

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

I tough that you were talking about creating a naked header in mobile. My screenshot was a mockup image.

Don’t see that text from your screenshot in the homepage. Can you provide the url to the page of the screenshot?

What mobile deice are you using?

-Rui

[alliehughes]

Hi Rui,

All of the pages have that issue, the homepage is the only one that does not. This URL would be an example: http://scoopmae.wpengine.com/our-solutions/

I am using an iPhone 6, it is showing up this way on a 5S and two android devices as well.

Thanks so much Rui,
Allie

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

.fancy-heading .heading-text[data-textalign="center"] {
   margin-top:-50px !important;
}

Thanks
Mohammad

[alliehughes]

Hi there,

That didn’t fix the issue… It is specifically the title text for the fancy header on mobile that is the issue. We are still seeing it cut off as it was before.

Anything else we can give a try?

Thanks,
Allie

[Rui Guerreiro – SUPPORT]

Hi,

Was trying to check this but I’m getting a 404 error.
Did you changed your site url? Can you provide it again?

-Rui

[tasken]

2 years later this hasn’t been fixed.

Mohammad css fix was needed for correctly display fancy titles on mobile. Why it is not merged with the css?

[Rui Guerreiro – SUPPORT]

@tasken

One thing that I wrote in my first intervention in this topic.
“That’s how it is by default in mobile since the header is sticky, it has some background.”
“If don’t have a solid background you will face this kind of problems when scrolling down.”

That’s how we designed it by default, since in mobile there are several restrictions due to the size limitations or mobile devices functionalities so for us there is nothing wrong to correct or we obviously already had corrected it.

The css Mohammad provided was just to help the other customer to achieve their desired look, that doesn’t mean that we will include it in the theme version.

Do you need any help in your specific situation? Then provide us further info about the issue and about your site.

-Rui