Transparent header is ignore on mobile/tablet

This topic has 14 replies, 2 voices, and was last updated 6 years by Radu.

Author
May 17, 2018 at 19:13 #197965

lusien
Participant

Hi, I have created a home page with the option:

Transparent headerIf enabled, the page content will start from the very top of the page and the header will go over the content.

This works fine on desktop and header is hidden, however on tablet or mobile header is still visible.

How can we fix this?

Thanks.

May 17, 2018 at 19:38 #197971

Radu
Moderator

Hi,

Are you referring to the menu instead the header ? cuz the header with logo and the login and register button appears on both (desktop and mobile).

Let me know if the marked item from the screenshot it’s that one that you are referring.

Cheers
R

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

May 17, 2018 at 23:19 #197977

lusien
Participant

Hi Radu,

What I see on desktop is different (see attached). And I checked from different browsers and computers. Are you looking with Elementor or normaly from the browser directly?

Thanks,
Luciana

Attachments:
You must be logged in to view attached files.

May 18, 2018 at 16:15 #198042

Radu
Moderator

Hi,

That’s my view from dekstop

And view from mobile it’s

I’m viewing as guest ( non-elementor )

So i think we see the same, do you need to hide this on mobile ?

Cheers
R

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

May 18, 2018 at 17:27 #198052

lusien
Participant

Hi Radu,

Right, I want to have the header as well as menu hidden from Mobile/Tablet.

Thanks.
May 18, 2018 at 17:34 #198054

Radu
Moderator
Use this css
COPY CODE
```
@media(max-width:768px) {
 .contain-to-grid .top-bar { display:none !important;}   
}
```
Cheers
R

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?
May 18, 2018 at 17:41 #198056

lusien
Participant

On the home page only.

May 18, 2018 at 17:53 #198057

lusien
Participant

Hi Radu,

Your code hides the menu everywhere on Mobile/Tablet. In addition, does not make header invisible. It remains invisible/transparent only on desktop. Or, is there any page template I can use to achieve this?

Thanks.
May 18, 2018 at 18:04 #198060

Radu
Moderator
To can hide that only on homepage while mobile tablet

Use this css instead
COPY CODE
```
@media(max-width:768px) {
 .home .contain-to-grid .top-bar { display:none !important;}   
}
```
You can change the 768px value to something higher and the menu will be hidden until that window width .

At this moment using that css will hide the main menu on mobile and tablet under 768px above that ti will follow the behavior that it was.

Cheers
R

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?
May 18, 2018 at 18:33 #198062

lusien
Participant

Hi Radu,

Indeed the code seems to work to hide menu. But header is still visible on home page for tablet and mobile. Any solution here? Maybe because we have picture in the header?

Thanks.
May 21, 2018 at 15:32 #198439

Radu
Moderator
Hi,

Entire header can be hidden until 768px width using this css
COPY CODE
```
@media(max-width:768px) {
    .home header {
        display: none;
    }
}
```
Cheers
R

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?
May 22, 2018 at 20:18 #198610

lusien
Participant

Hi Radu,

I have checked the proposed code and it works but it hides not only the header but the log in/signed out buttons and logo as well. I actually wanted to have the same behaviour with transparent header as on desktop side but probably this is not possible or easy to be achieved.

Thanks.
May 23, 2018 at 18:21 #198751

Radu
Moderator
Hi,

Replace the css with this one, i had understated that you need to hide the entire header on mobile… now it should be ok.
COPY CODE
```
@media(max-width:768px) {
    .header-bg {background:transparent;}
}
```
Cheers
R

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?
May 23, 2018 at 21:24 #198775

lusien
Participant

Perfect. Exactly what I wanted. Sorry for not being clear from the very beginning.

I’ll mark the ticket as resolved.

May 24, 2018 at 15:00 #198839

Radu
Moderator

You’re welcome
Cheers
R

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?
Author

Posts