Mobile Header Not displaying correctly

cnatalino · February 2015

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 · February 2015

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.

cnatalino · February 2015

That worked perfectly!
Thank you much.

Albert · February 2015

No problem

cnatalino · June 2015

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 · June 2015

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

cnatalino · June 2015

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 · June 2015

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);}
}

cnatalino · June 2015

Thank you! That worked.

All the best,
Cheri

Albert · June 2015

You're welcome

Mobile Header Not displaying correctly

Comments