BlueOwlCreative » Topic: Transparent Header on Mobile & Responsive problems

Transparent Header on Mobile & Responsive problems

Davide09Tex — Mon, 02 Dec 2019 11:31:12 +0000

Hi,
I have a responsive problem in my new website http://www.poliedra.it/Nuovo/: the transparent heading doesn’t work in Mobile and Pad versions and in the slider revolution hero images the 2 buttons “CHIAMACI” and “SCRIVICI” in Mobile and Pad are too near.
How I can resolve?
Thanks
Davide Crimaldi

Reply To: Transparent Header on Mobile & Responsive problems

BlueOwl — Tue, 03 Dec 2019 11:35:20 +0000

Hi Davide,

Correct mobile devices have a mobile menu implementation and the transparent header is not a part of it. As for the buttons in your slider – you can modify your slider elements’ position and properties depending on the device/resolution. Check here:

https://i.ytimg.com/vi/IPaUF8UEdz8/maxresdefault.jpg

Reply To: Transparent Header on Mobile & Responsive problems

Davide09Tex — Thu, 05 Dec 2019 09:00:44 +0000

So it’s impossible to set the transparent header in the mobile and pad versions?
I prefer to set it!

Reply To: Transparent Header on Mobile & Responsive problems

BlueOwl — Thu, 05 Dec 2019 20:18:35 +0000

It’s simplified in mobile in order for the header to be more stable in general.
Of course you could have yours as transparent with some simple CSS, here’s some major guides:

@media only screen and (max-width: 768px){
#header {
    position: absolute!important;
    background: transparent;
}
}
.m_nav_ham {
    background: #fff;
}

Reply To: Transparent Header on Mobile & Responsive problems

Davide09Tex — Wed, 11 Dec 2019 11:44:34 +0000

I’ve got to copy the entire code in the Custom CSS?
Because it doesn’t work

Reply To: Transparent Header on Mobile & Responsive problems

BlueOwl — Wed, 11 Dec 2019 13:20:32 +0000

I don’t see the code anywhere…
view-source:http://www.poliedra.it/Nuovo/

What am I missing?

Reply To: Transparent Header on Mobile & Responsive problems

Davide09Tex — Thu, 12 Dec 2019 11:12:04 +0000

The code you wrote

@media only screen and (max-width: 768px){
#header {
position: absolute!important;
background: transparent;
}
}
.m_nav_ham {
background: #fff;
}

Reply To: Transparent Header on Mobile & Responsive problems

BlueOwl — Thu, 12 Dec 2019 11:20:25 +0000

Where did you add it?
As I mentioned I dont see it on your page:

view-source:http://www.poliedra.it/Nuovo/

Reply To: Transparent Header on Mobile & Responsive problems

Davide09Tex — Thu, 12 Dec 2019 11:30:40 +0000

I’m sorry!
Now I copy your code in the Custom CSS but the transparent header doesn’t work in Mobile and Pad
Thanks

Reply To: Transparent Header on Mobile & Responsive problems

BlueOwl — Thu, 12 Dec 2019 11:36:28 +0000

Ok, I see the code now. Update it to this:

@media only screen and (max-width: 768px){
#header.transparent_header {
    position: absolute!important;
    background: transparent!important;
}
}
#header.transparent_header .m_nav_ham {
    background: #fff;
}