Menu above built with this plugin including Mega Menu.

Header issues / Native Menu with Desktop

This topic contains 15 replies, has 2 voices, and was last updated by  Peter Featherstone 1 year, 2 months ago.

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #29524 Reply

    Wilko Ufert
    Participant

    Hi, we’ve go the Pro version installed, but when the desktop menu ist running, the native menu of the Theme still seems to linger in the background (it appears if we turn off the header and turn the menu transparent). Also in Desktop mode. the top items don’t respond to the menu width parameter, but the submenues seem to (wehen width=100% the suddenly slide open right-to-left).
    In some resolutions, the header overlaps some of the site Content (namely, the site titel), and we can’t snyc up header height with the scaling of the logo image. We now had to insert a blank png into the themes cutom logo slot as a ver messy workaround…
    The header search box wraps around and floats above body content as well, at least on mobile devices.
    Additionally, could custom css be used to align the Logo other then left? What is the identifier?
    Additionally, how do multiple line in the headers html-content work? linebreakes look awful, but most style options are seemingly overwritten.

    Any help would be very much appreciated.
    our site is at http://www.michaelschule-bonn.de
    Cheers!

    • This topic was modified 1 year, 2 months ago by  Wilko Ufert.
    • This topic was modified 1 year, 2 months ago by  Wilko Ufert. Reason: forgot searchbox issue
    #29528 Reply

    Hey there,

    There are a lot of questions there. Let me try and break them down one by one.

    1. The native desktop menu from the theme still appears.

    You have a few options here. You either need to find a setting in your theme to turn the native menu off, failing that you can remove the menu calls from your theme templates and finally, if all else fails you can add the below Custom CSS:

    #site-nav-wrap {
       display: none;
    }

    2. The Desktop Menu main items don’t respond to the width options.

    Are you referring to the container sizes, i.e – 1, 2, 3 etc.? If so, it is likely that you haven’t set a width on the Desktop Menu so it is just using an auto width setting and as such the sizes don’t have much meaning.

    3. The Header Bar overlaps the content.

    You have a fixed header height of 138px so can you just add a top margin to your body, as below?

    body {
       margin-top: 138px;
    }

    4. Can’t sync up the logo image with the header bar.

    Again, as you have a 138px fixed height header bar, you can force the logo to have that height with the below Custom CSS:

    #responsive-menu-pro-header .responsive-menu-pro-header-box img {
       height: 138px;
    }

    5. The Search Bar overlaps the content.

    If you are having problems with the search bar on smaller devices, then you can use some media queries to hide it on smaller screens.

    6. Can the logo be aligned left.

    Re-arranging the Header Bar options so that the logo is the far right option should achieve this for you. Can you confirm that you have done this and that it is not working?

    7. Multiple Lines in Header HTML content.

    Can you please show me where you are doing this and what the issue is? It may be best to create your own HTML containers and then you can style them accordingly using CSS.

    I hope the above helps!

    Peter

    #29542 Reply

    Wilko Ufert
    Participant

    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

    #29544 Reply

    Hey Wilko,

    Thanks for the replies, I will try to answer further. I have renumbered the answers in the order you asked them in the last reply.

    1. You’re correct that this only takes effect when you are below the Initial Breakpoint Width. It may actually be a good idea for me to include a CSS of Desktop Menu to Hide option too. Will follow up with that for the next release.

    2. Can you clarify what you mean by “the header bar generated by the plug-in is not identified as header and floats above header and content”? Do you mean you don’t want a floating header? If so, you can change the positioning option to absolute. This will mean you don’t need the top margin stuff on the body too.

    3. The header bar doesn’t auto size as there is a fixed height option which you have set at 136px. You can use some CSS to change the logo to have a max-height instead of a fixed height if you want it to still scale.

    4. I’m not sure why the menu is not taking up 100% width of your screen. I will need to look again at that on my development sites to see if it is specific to your site or a bug in the plugin. Actually, looking at your menu, you have the alignment set to centre which adds a 50% transform and left margin on it. If you want it to be truly 100% you will need to switch the positioning to left, right or none at all.

    5. In regards the header bar widget. Does it come with a shortcode as you can just place that in there? If you put it back in I’d be happy to take a look at it.

    I hope the above helps.

    Peter

    #29546 Reply

    Wilko Ufert
    Participant

    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

    #29547 Reply

    Hey Wilko,

    1. That is good information. I will use that for improving the plugin.

    2. By identifiers, do you mean classes or IDs? If so, then that is correct that it will have different identifiers.

    3. I thought adding the padding to the top of the body fixed these issues? I also see that you still have my header and your theme header active. Is there any reason you still have both? The image is popping out of the header because it is too big, which is why I suggested putting a max height on it.

    4. The HTML Content box should work with shortcodes, have you tried it yet and did it not work?

    Peter

    #29609 Reply

    Wilko Ufert
    Participant

    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

    • This reply was modified 1 year, 2 months ago by  Wilko Ufert.
    #29612 Reply

    Hey Wilko,

    It’s likely because of the large line height on the header.

    Have you tried resetting the line height on your particular widget with some CSS, such as below:

    .textwidget,
    .textwidget p {
       line-height: 12px !important;
    }

    Please let me know if that gets you on the way.

    Peter

    #29616 Reply

    Wilko Ufert
    Participant

    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

    #29617 Reply

    Hey Wilko,

    The line height comes from the height of the header bar itself because such things as the title or single line text need it that way.

    Without the line height the text will automatically show at the top of the bar instead of being nicely centred vertically which is less pleasing for the general use case of the header.

    I will see if there is any way of localising this to just the logo and text sections and leave the HTML section free of any line height as I guess it is more likely that items placed in there won’t need a line height.

    I am worried that by changing it however, that it will break existing users of the plugins style who are using it just for plain text. For example, I know a lot of people use it for displaying their phone number in a link or social media icons etc.

    Peter

    #29623 Reply

    Wilko Ufert
    Participant

    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

    #29626 Reply

    Hey Wilko,

    The header bar is expecting a height as otherwise it can’t create the CSS correctly.

    Unfortunately a number is required in that box for the plugin to function.

    As with the nature of something like this there will always be some CSS adjustments needed to get things exactly as you want them.

    My goal is to get those CSS adjustments down to the bare minimum but if I had options for every padding and margin option the admin section would become extremely large and confusion.

    Finding the balance between customisation and usability is quite tricky :-(

    I’m always open to feedback however and to take on new ideas.

    Peter

    #29709 Reply

    Wilko Ufert
    Participant

    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

    #29710 Reply

    Hey Wilko,

    That looks good and glad you found a solution.

    I believe setting a header height of 0 would give it an actual height of 0 rather than it being auto sized which would be less than ideal.

    Peter

    #29714 Reply

    Wilko Ufert
    Participant

    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

Viewing 15 posts - 1 through 15 (of 16 total)
Reply To: Header issues / Native Menu with Desktop
Your information:





<a href="" title="" rel="" target=""> <blockquote cite=""> <code> <pre> <em> <strong> <del datetime=""> <ul> <ol start=""> <li> <img src="" border="" alt="" height="" width="">

Responsive Menu Title Image
Responsive Menu
No coding knowledge needed