Menu problems on mobile

pattythesnugbug · November 2014

Hi there -

My site is at www.thesnugbugmercantile.com

It looks fine on the desktop - I use a revolution slider for home page, then a mix of a header image (uploaded in the be theme options panel) and featured images (uploaded on individual pages) for the rest of the pages.

I have the sticky menu/dark.

When I look on my iPhone (iPhone 6, OS8) there is a large white space and the header image / slider (depending on page) is pushed down. Since my logo and menu type is in white, I can't see any of the options. Please advise how to get the logo and menu to sit on TOP of the slider/header/featured image instead of above it on mobile devices.

Thanks, Patty

Albert · November 2014

Hi,

in this case, below css will be the best choice:

@media only screen and (max-width: 1239px) { #Top_bar #menu { background: #FF7713 !important; } }

pattythesnugbug · November 2014

Hi there - i added the code, but do not like the results. The logo showing white on white is not very supportive of our brand, and the 'menu' is still sitting on top of everything else.

How do I ensure that the header image/revolution slider/featured image sit underneath the logo/at the top of the screen, the way that it should? Is this how all of your mobile sites look? I'm confused at the layout!

Thanks, Patty

Albert · November 2014

Sorry but we don`t understand what exactly still does not work... As we see, your menu on mobile looks fine now what you can see at http://snag.gy/ejHeV.jpg - do you mean to add also background for logo on mobile or what exactly?

pattythesnugbug · November 2014

That's what it looks like for me, too. The white background is not right for a white logo. It doesn't look professional to my eye. It looks improperly rendered.

I would like the header image** to be BEHIND the logo, menu, etc..

**

home - the header is a revolution slider of a piece of furniture

shop - the header image is a piece of wood, set as header in the be theme menu

tour - the header image is a piece of wood, set as header in the be theme menu

blog - the header image is the featured image, set in the page settings

contact - the header is the featured image, set in the page settings

The white background is not right for a white logo. It doesn't look professional to my eye. It looks improperly rendered.

If it is impossible to move the header image to sit behind the logo, etc (move to the top of the window) then i would like to show a different logo on mobile - one that is black instead of white.

Thanks, Patty

Albert · November 2014

To add background image for header on mobile, please use below css:

#Top_bar #logo { height: 75px !important; } //instead of 130px that you have already 
@media only screen and (max-width: 767px) { 
    #Top_bar, #Action_bar { background: none !important; }
    #Header_wrapper { background: red; } 
}

But it is not possible to show different logo on different devices at all.

Menu problems on mobile

Comments