Menu background image & text on mobile

michaelxxx · December 2015

Hi,

I have 2 questions to the responsive functions.

I use a backgound Image for my menu.
Header & Subheader > Header > Background > Image

With a big screen everything looks good:

But on mobile there is a black area under the image:

Is there any way not to have that black area under the image?

2. On smaler resolutions there is only the icon for the menu (above right). I found the option that I can replace that icon with a text.
But is there no setting to display the menu as normal links on top of mobile pages?

Michael

Albert · December 2015

Hi,

1. Please send us url to page where you have this header background.

2. Yes, we have an option responsible for this behave. It's called Responsive Menu Initial width and is located under Theme options > Responsive section.

michaelxxx · December 2015

Hey,

1. This is the url with the header background: http://www.djdasilva.de/downloads/

2. I found the point Responsive Menu Initial width
This tells me the minimum resolution size of the standard menu, or? But what happens when I got under the 768 Pixel? Then there comes the menu with the 3 dashes. But I also want to show the menu under 768 Pixel, just with a smaler font size. Is that possible?

I also saw the sentence:
Responsive menu is working only with WordPress custom menu, please add one in Appearance > Menus and select it for Theme Locations section.

I created an own menu and marked it as Main Menu | depth 5 (Header Overlay 1)
But it´s always the same behavior. When I open the site with my mobile device I only saw the word "menu" with a dropdown or the menu with the 3 dashes and the dropdown. But I don´t like the dropdown, i want to have a fixed textlink menu on top of the page.

I hope you can help me.

Albert · December 2015

1. Ok. So your header background is not tall enough and that's why you got empty black space on mobile devices. To decrease this space, please use below css:

body:not(.template-slider):not(.header-simple) #Header { min-height: 250px !important; }

2. Sorry but it is not possible to display regular menu items on devices smaller than 768px. 767px and less are reserved for mobile devices and that's why it is not possible. Like you mentioned, this option works only with WP custom menu. So if you set this menu as as Main Menu | depth 5 (Header Overlay 1) it supposed to work.

Thanks for understanding!

michaelxxx · December 2015

1. Works

Thank you.

2. As you can see in the next screenshot there is a lot of black space on top of the mobile version. Is there a way to reduce that black space on mobile?

Albert · December 2015

2. This is Top bar section which is necessary for mobile devices. If you want, you can try to remove it with below css:

@media only screen and (max-width: 767px) {
    #Top_bar { height: 0 !important; }
}

This is the only way to decrease top bar height on mobile devices.

michaelxxx · December 2015

2. I added your code to the Custom CSS. But now only Slider is cutted and there is still the black top bar section.

This is the code I have in my cusom CSS right now:

<code>
@media only screen and (min-width: 1024px) {
#Top_bar { top: 20px !important; }
#Top_bar:not(.is-sticky) .search_wrapper { top: 120%; }
}

@media only screen and (max-width: 767px) {
    #Top_bar { height: 0 !important; }
}
</code>

Albert · December 2015

The css we gave you above, decrease top bar height. If it does not work as you wish, then we do not have any workaround unfortunately.

Thanks for understanding!

Menu background image & text on mobile

Comments