Mobile Header Not displaying correctly

cnatalino

I am using BeTheme with the Yoga demo and I am having trouble with the responsiveness of the header.
On mobile devices, the purple transparent header disappears so my white logo does not show on mobile devices.

http://www.wholelife-studio.com/2015Site/

Is there a way to
1) specify a header color for mobile devices (to make sure it is purple like the real site)
2) specify a color logo only to be used on mobile devices that drop the full menu/header

I do want to say that other than this issue the site is performing wonderfully on mobile devices, thanks for creating such a beautiful and responsive theme!

Cheri

Albert

Hi Cheri,

1. To make this color on mobile devices only, please use below css:

@media only screen and (max-width: 479px) {
    #Top_bar, #Action_bar {
        background: #b4569e !important;
    }
}

2. This is unfortunately not possible.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

cnatalino

That worked perfectly!
Thank you much.

Albert

No problem

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

cnatalino

My site has been up for awhile and I just noticed that on mobile devices the responsive menu on the individual Blog pages loads differently than it does on every other page of the site. For some reason, when you are on individual blog articles and you click on the menu, the background of the drop down menu is all white (the background color is missing) so you can't see the links. This doesn't happen on the blog page (where all the articles are listed), just on the individual blog article pages, for instance this page: http://www.wholelife-studio.com/mindfulness-and-the-modern-mind/

See attached screen shot as well to see the problem.

Why isn't the purple menu background showing in the menu like it does when you are on any other page? Thank you for your insight!

Cheri

Albert

On which page this background color is invisible? Because we can't replicate it on our side. Also under which browser this happen?

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

cnatalino

It is happening on every blog post page. Here are the url's to the posts:

http://www.wholelife-studio.com/why-yoga-works-to-relieve-stress-a-mind-body-connection/
http://www.wholelife-studio.com/yogaismorethanposes/
http://www.wholelife-studio.com/welcome-to-the-whole-life-wellness-studio-blog/
http://www.wholelife-studio.com/why-yoga-works-to-relieve-stress-a-mind-body-connection/

The purple background is missing from the menu on these single post pages, but shows up everywhere else on the site.

This only happens on mobile devices ... I am using an iPhone and Safari as browser.

Thank you!

Albert

Ok. So to change background color of menu on mobile, please use below css:

@media only screen and (max-width: 767px) {
    #Top_bar #menu > ul { margin-bottom: 30px;}
    #Top_bar #menu ul li { background: rgba(145, 39, 145, 0.7);}
}

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

cnatalino

Thank you! That worked.

All the best,
Cheri

Albert

You're welcome

Learn more: Video Tutorials | How To | FAQ Vote on what comes next