[Resolved] Mobile menu slideout navigation showing main navigation

Home Forums Support Mobile menu slideout navigation showing main navigation

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #1426505
    Katrin

    Hey,

    I am currently changing the style of the mobile menu slideout ans already used some code to make changes. E.g. to put lines between the menu items and some indent for the sub menu items. Also my slideout menu is fullsreen.

    That’s the code I already have:

    @media (max-width:  1024px) {
        .main-navigation .main-nav ul li a {
            border-bottom: 1px solid #ddd;
        }
    	
    	.slideout-overlay {
        display:none;
    }
    	.main-navigation.offside--left.is-open {
        width: 100%;
    		top: 64px;
    }
    	
    	.offside-js--is-left.slide-opened .slideout-overlay button.slideout-exit {
    		display:none;
    }
    	
    	.main-navigation .main-nav ul ul li a {
            margin-left: 30px;
    		border-color: #fff;
        }
    	
    }
    

    Now my questions:
    1. I don’t want the slide out menu to overlay the main menu. That’s why I did put the top space of 64 px. But the navigation is not staying on the top of the site, because I made it sticky while scolling up. Is there a possibility to show the main navigation while the slideout is opened? I don’t want the navigation to always be stuck.

    2. The menu toggle already switchs to a X, when opening the slideout menu, but it is not disapearing after klicking it. I would like the menu toggle to appear, when the slideout menu is closed.

    3. I did code light lines between the menu items but deleted them between the sub menu items. Actually I wanted to delete the border which is shown around all the sub menu items and not the border between. How can I do that?

    4. I the wp backend the sub menu items always close emidiatly after klicking on a menu item. This is not happening in the “live” version of the website. Do you have an idea where the error is caused?

    I hope I explained the issues clearly. Thank you very much for reading and helping!

    Best regards
    Katrin ๐Ÿ™‚

    #1427060
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    1. So you don’t want the navigation to always be stuck – what’s going to fill that gap while you’re scrolling down?

    2. Ah, this is happening because clicking the button again is triggering the process all over again. Typically it’s not possible to click it a second time, as there’s an overlay in the way. This will likely take some core javascript updates to work. I’ll play with this for GPP 1.12 and will get back to you.

    3. How do I toggle the sub-menus? It looks like the arrows have been removed.

    4. Can you explain this a bit further? Not sure I fully understand.

    Let me know ๐Ÿ™‚

    #1427421
    Katrin

    Hey,

    thanks for the quick reply!

    1. I would prefer the navigation to be only stuck when scrolling up. But for the mobile slideout menu the navigation should fill the gap and the background shouldn’t have the transparancy, so the user won’t have the feeling of scrolling the website beyond the slideout menu. Is there a possibility, to make the navigation stuck, only when the slideout menu is open?

    2. This would be cool! Thank you ๐Ÿ™‚

    3. The sub menu toggle with clicking the menu item. Yes I removed the arrows, but I commented the code out now, so you can see them. But I think there was no issue bot showing the arrows. But on the left and on the right side of the sub menu items, there is a light border, which I want to remove. I send you a picture, where you can see the border.

    4. I added a video of the issue. When I click on the arrow, the sub menu list is opening correctly. The problem occures only when click the menu item itself. But it’s only a problem in the wordpress backend. When I open the website online, I can click the menu item and it opens the sub menu items correctly. Still it’s a bit annoying while developing the website.

    Picture & Video for questions 3,4,5

    5. As you can see in the end of the video of question 4, long headlines as “Abkanten & Biegen” are shown in one line. The titel overwrites itself. Do you have an idea, why this is happening and how I can fix it?

    Thanks and best regards,
    Katrin ๐Ÿ™‚

    #1428168
    Tom
    Lead Developer
    Lead Developer

    1. Let’s give this a shot:

    .slide-opened #mobile-header.navigation-stick {
        top: 0 !important;
    }

    2. For now, it may be best to just keep the bars so it doesn’t appear broken:

    .toggled .icon-menu-bars svg:nth-child(2) {
        display: none;
    }
    
    .toggled .icon-menu-bars svg:nth-child(1) {
        display: block;
    }

    3. Does this help?:

    .main-navigation .main-nav ul ul li a {
        border: 0;
    }
    
    .slideout-navigation.main-navigation ul ul {
        box-shadow: 0 0 0;
    }

    4. So those links do have a destination, but the site isn’t going there. Do you have any custom functions/javascript that are targeting this functionality? That shouldn’t be the default behavior.

    5. Check the line height options for your headings in Customize > Typography – looks like it may be set to 0.

    #1428951
    Katrin

    1. Works, but still with a bug. The main navigation is still scrolling down and popping up afterwards. Would it be possible to stop the whole website content behind the slideout navigation from scrolling? Or if not, at least stop the main navigation?

    2. & 3. Great, thank you!!

    4. No, I just added some php and css. I tried if the cause it, by inactivating. But they are not. But anyway, if this issue only occurs in the backend, I can live with it ๐Ÿ™‚

    5. solved ๐Ÿ˜‰

    #1429687
    Tom
    Lead Developer
    Lead Developer

    1. That’s strange, can you try this instead?:

    .slide-opened body {
        overflow-y: hidden;
    }
    #1430629
    Katrin

    This works! Thanks ๐Ÿ™‚

    But I found a new issue, which I am not able to solve myself:

    It is not possible to scroll the whole length of the slideout navigation. I did add some menu items to demonstrate it, but it also occurs, when sub menu items are opened. The last item in the slideout navigation is never shown.

    Additionally, it is possible to use two fingers on the mobile device and “zoom out”. If you do this, the content in the background (behind the slideout menu) is starting to move again and leave the appearance of the slideout menu very messy.

    I hope, there is a possibility to fix those bugs too. Thank you, Tom!

    #1431241
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Try adding this CSS:

    .main-navigation.offside {
        height: calc(100vh - 64px);
    }

    I checked the site on my mobile device but I can’t zoom out when the panel is open – it simply stays put as is. I can zoom in, but that doesn’t do anything out of the ordinary.

    #1433563
    Katrin

    Hey Tom,

    the code helps, even though with apple the 64 px where not enough, due to the browser navigation on the bottom. So I enlarged it to 100 px.

    I tested the behavior on android and apple now. The Issue with zooming out occurs only on the apple device. Do you have an idea, how to solve that?
    Here you find pictures of the effect: https://we.tl/t-grY4igL9w8

    Now I figured out, that the problem I told you earlier about, with clicking the main menu item, which is closing directly and not opening the sub menu items, is occurring for android devices (question 4). So it actually is a problem, I need to solve, too. Do you have other ideas, what could cause the wrong behavior?

    Sorry, for asking that many questions!

    Best regards,
    Katrin

    #1433776
    Katrin

    Hey Tom,

    first problem is mainly solved. I added:

    ‘@media (max-width: 1024px) {
    .slide-opened body {
    position: fixed;
    }’

    One Picture I sent in my previous message shows, that it is possible to zoom out at the pages, where I used GenerateBlocks in a Hook Element e.g. “Individuelle Metallprodukte” – “Branchenlรถsungen”.
    Shall I ask for a solution in the GenerateBlocks Support?

    The old Question 4 is still open. Testing the navigation on the iPad, I have the same behavior. The menu is closing, when clicking the menu item itself.

    Thanks for helping!

    #1434265
    Tom
    Lead Developer
    Lead Developer

    That’s a strange one. The closing of the off-canvas panel is expected – there is code that does that when one of the menu items is clicked as long as it has a destination.

    Those links have a destination, but the browser is going there when clicked. That’s the strange part that I’m not understanding.

    If you replicate the menu in the off-canvas panel on a default test site, do you see the same behavior?

    #1442748
    Katrin

    Hey Tom,

    I think it was a caching problem. I installed a caching Plugin and changed the settings for “primary navigation” – “Expanding the navigation”. Now it works.

    Thanks a lot for your help!

    Best regards,
    Katrin

    #1442877
    Tom
    Lead Developer
    Lead Developer

    Glad you got it working! ๐Ÿ™‚

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.