Logo in Mobile Menu

Thank you so much Yigit! That’s close to what I’m looking for. I changed the media queries so it only affects my iPad in portrait mode and changed the background color of the header meta to match the current site colors of #f8f8f8 but still need some help.

1. With this code it makes the transparent header show up in white at the top of the screen on my homepage which I don’t want. I still want the header to be invisible and only appear once the user scrolls down.

2. Since the header shows up in white and the extra elements section, you can’t see the text on the extra elements section. I want the extra elements text color to be #188ece when the mobile menu is pulled up.

@media only screen and (min-width: 768px) and (max-width: 990px) {
#top .av_header_scrolldown.av_header_transparency {
    opacity: 1 !important;
    margin-top: 0!important;
}
.show_mobile_menu .logo .subtext {
    opacity: 1;
}
.show_mobile_menu .logo a > img {
    opacity: 1!important;
}
ul#mobile-advanced {
    padding-top: 0!important;
    margin-top: 110px;
}
.show_mobile_menu #header {
    background: white;
}
.show_mobile_menu #header_meta {
    background: #f8f8f8!important;
}
}

• This reply was modified 9 years ago by djshortkut.

Thank you Yigit! So I was able to figure out the issue for the color of the text in the extra elements section to make it the correct color. It was conflicting some other quick css I had that I had to remove.

The code that you provided above makes a transparent section behind the logo when the mobile menu is pulled up which I don’t want (see image) so I had to remove the code.

Now when the mobile menu is pulled up on my iPad in portrait mode everything looks great. All I need help with now is making it so that the transparent header doesn’t show up at the top of the fullscreen slider on my iPad in portrait mode. I want the header to be invisible and only appear once the user scrolls down like it is in landscape mode. How can I make this work correctly? Thank you!

Thanks Ismael! That worked great and fixes the issue of having the transparent header showing up on the screen and makes the header behave the same way it does on the desktop. However, this created a new problem…

When the mobile menu is opened on the iPad in portrait mode, the site automatically scrolls to the top of the screen and now the header portion does not show up with this code when the mobile menu is pulled up. (See image) How can I keep it like it is so that the header still behaves the same way as it does on desktop but get the header to show up when the mobile menu is pulled up like it does on all the other pages? If there is a way to force the header to appear once the mobile menu is pulled up that would solve the issue so it looks like this image. (See Image 2) Note: The other pages don’t use any type of transparent header. Thanks so much!

• This reply was modified 9 years ago by djshortkut.

Still the same result. Not sure why this wouldn’t work. Here are my login credentials so you can take a closer look. Thanks!

• This reply was modified 9 years ago by djshortkut.

Thank you so much Ismael, that did it! You can close this thread.