Header issues / Native Menu with Desktop

Thanks for the quick and competent respsones!

Some follow ups:
1. #site-nav-warp should have been disabled by the “initial setup” tab of rsp-mn-pro. Or does this only hide the menu when it reaches the hamburger-breaking-point? Either way, you css-fix works perfectly for this problem. It also seems to resolve the issue of the plugin’s header-bar background blocking some of the content for desktop and tablet, but not mobile displays. We implemented that, great!
3. seems to fix the issue of the overlap as well, and even the search bar for mobile views. Bute in desktop view it adds additional 138px, which seems a bit wasteful. It seems to me, that the header bar generated by the plug-in is not identified as header and floats above header and content. A smaller margin seems to work for the logo, but not for the search box when it wraps on mobile devices. Could some kind of “clear” property be assigned to it, or would that display the desktop menu and the menu button?

4.Its quite the other way around: the Logo has a transparent background, but since #site-nav-wrap wasn’t disabled properly, a header bar background seemed necessary. This in turn seemed to require the fixed height, but the image scales down on smaller devices (as it is supposed to). Any tip on how to set up the height properly? Ideally, the header would adjust its container to block the space for its content. That doesn’t seem to be the case right now. Your solution would “squash” the logo in its proportions.

2. We had set the width of the menu to 100%, but the top items didn’t stretch. Only the second-level containers used the wohl width, which, since the menu is centered, looked quite strange, as they aligned right with their parent items instead of left. Ideally we’d like to stretch the menu as wide as our middle body column.
5. I don’t quite get this one. Ideally we would lice to include the search box into the menu container in desktop view and hide it when the hamburger is triggered, but still display the rsp.-mn-header, or at least affix the search box to the top of the page in both cases. We’ll just disable the header-search box for now, and place it in the sidebar instead. But what is its identifier? Is it in the header-box or floating above it? maybe we could try some things.

6. We’d like to align the logo not left, but maybe centered or with an auto-margin on the left. Ordering the drag&drop items around only works as long as the are no empty. We would be happy if the search box could go on the left, but then the header is again wrapping on small devices, only this time it is the Logo instead of the search box (see 4.)

7. We’d love to place a mla-textwidget into the rsp.-mn.-header to show our address. The widget is currently placed on the bottom of out sidebar. We tried to place spans into the html-content box of the header or just plain text with line breaks, but the lines were spread across the whole header height and it seemed impossible to style it differently then the title-text of the header bar.

But anyway: Thanks for your reply and for the great work!
Cheers,
Wilko

Hey Peter,
I’ll be quick, since I’m afraid I’m in a hurry.
1. I understand that but I wouldn’t have gotten that form documentation -tanks for clarifying
2. The header bar generated by the plugin seems to have different identifiers than the header generated by the theme… Or I still don’t get where its borders are ;-). It is nice that it is floating, but it did block the pagetitle.
3. This is related to 2. – I mainly wanted to make suhre the items within the header bar don’t block out content and have a background (since the logo itself is transparent). Maybe I should define a background for the logo img in the header alone, since the bodymargin otherwise does the trick and don’t use the header-bar-height at all? It’s just strange that the image and the searchbar keep popping out of it – we might even use relative positioning and a semi-transparent background otherwise.
4. We’ll try that, again thanks for clarifying (I felt a bit stupid about it)
5. It’s a MLA-text widget (“mla-text-widget-4” is it jumpto identifyer), a normal wp-text widget would also do the trick. But the html-content box doesn’t take wp shortcodes yet, does it?

Best regards
Wilko

Hey Peter, it’s me again.
I’ve still got issues with the html content box.

<div class="textwidget"><p>GGS Michaelschule<br>
Rheinbacher Straße 7<br>
53115 Bonn<br>
<br>
Telefon: 0228 / 777 218<br>
E-Mail:e</a></p>
</div>	

leads to this: https://snag.gy/YcP18E.jpg

Also, I’m able to call a gallery shortcode in the html box, but I’m to stupid to add a text widget into the header content. I’ve patched on the “amr shortcode any widget”-Plugin in, wich allows a properly styled widget to be called via shortcode in the hmtl content area. https://snag.gy/DfpSG2.jpg
But if the header wraps, there’s still some clash with the contend and it is not well aligned with the menu in desktop mode. https://snag.gy/CvHJ7f.jpg
…
I found the IDs., but I’m unsure how to disable the theme header and if I should any clearance to any responsive-menu Objekt or container.

Regards, Wilko

Hey Peter,
sorry I was editing above when you’d already replied. I rest the header -height to auto, wich resolves most overlapping issues. The textwidget called via shortcode (and the amr-plugin) looks fine, and by that way i should even be call a different searchbox directly above the address. But why was the line-height set so big? did it take the 138 px form the plugins header bar settings? Now There’s only the issue with some overlap of the menu and the alignment of the logo and the address.
But many thanks for your help so far.
Wilko

Hey Peter,
I get that – it just confused me. But inserting multiple lines inside a widget works fine, really.
I’ve left the height of the header blank, but get an error message: “Validation failed on Header bar height: Invalid number.”
The pages looks ok though.
Wilko

Hallo Peter,

I’ve come up with a different solution for the Theme Header:

#site-nav-wrap {
   visibility: hidden;
}
#header img{
   visibility: hidden;
   }

hides it well, but prevents it form jumping into content.
Would a 0 revert the responsive-header-height to auto?

Best regards
Wilko

Hey Peter,
it still seems complicated. The Original header changes size at a different Breakpoint and i cant seem to manage a :before or :after-Element that fixes the overflow. The body/content follows the original page-header, and keeps the pagetitle (entry-title) in a different header-enviroment inside the body. But that are more or less problems of the Theme, I guess…
the width-Option for the desktop-menu still didn’t have an effect, event if we changed alignment to left or none.
But it’s fine for now.
Thank you for the amazing plug-in and the kind support.

Cheers,
Wilko