Mobile: center logo and header transparency

Tagged: enfold, header, logo, mobile

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Posts
July 30, 2016 at 1:13 pm #666813

Kaio Fragoso
Participant

Hello there! Guys, I use a centered logo with transparent header on my website (no menu). How do I make it behave the same on mobile decives (transparent header and centered logo)? Right now the background becomes solid and logo is pushed to the left.

August 3, 2016 at 6:33 am #667931
Josue
Inactive Moderator
Hey!

Try adding this code to the Quick CSS:
```
@media only screen and (max-width: 767px) {
    header#header { position: absolute !important; background: transparent !important;}
    .responsive #top .logo {left: 50%;-webkit-transform: translate(-50%, 0);-ms-transform: translate(-50%, 0);transform: translate(-50%, 0);height: 68px;width: auto;position: relative;}
    #top .avia-builder-el-0 .slideshow_inner_caption{padding-top: 80px !important;}
    .responsive #top .av_header_transparency .logo img.alternate {display: block !important;}
    .responsive #top .av_header_transparency.av_alternate_logo_active .logo a > img {opacity: 0;}
}
```
Cheers!
Josue
August 11, 2016 at 1:41 am #671101

Littl3Jo3
Participant

This is what I needed as well and the code worked perfectly. Thanks!

August 11, 2016 at 2:16 pm #671329
Rikard
Keymaster
Hi,

Great, glad we could help :-)

Regards,
Rikard
- This reply was modified 7 years, 8 months ago by Rikard.
August 11, 2016 at 3:39 pm #671386

Kaio Fragoso
Participant

Worked for me too. Thanks guys!
Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

The topic ‘Mobile: center logo and header transparency’ is closed to new replies.