[Resolved] Fighting with mobile menu and mobile header again!

Home Forums Support Fighting with mobile menu and mobile header again!

This topic contains 17 replies, has 2 voices, and was last updated by  Tom 2 months ago.

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #898357

    George

    This is the only thing I am constantly fighting against in GP.

    I have a custom mobile header breakpoint of 602px. It is also set to sticky. At the same time, I am using Tom’s code found here to change the mobile breakpoint so that the menu switches to mobile at 602px.

    @media (min-width: 602px) {
        .inside-footer-widgets > div {
            float: left;
            clear: none;
            width: 50%;
        }
    
        .main-navigation .menu-toggle,
        .main-navigation .mobile-bar-items,
        .sidebar-nav-mobile:not(#sticky-placeholder) {
            display: none;
        }
    
        .main-navigation ul,
        .gen-sidebar-nav {
            display: block;
        }
    }

    At this point, I would like to point out that the code given in this article does not work. I hope you revisit and update this article because it gets quite confusing.

    Moving on, I also have sticky navigation activated for Desktop only. Again, I would like to point out here that even if Desktop Only is activated, the main navigation menu remains sticky even in smaller browser windows. I understand if it remains sticky when the menu switches to mobile but on tables sizes, it keeps on being sticky.

    Moving on again!

    Let’s say that around 700px my menu has not turned to mobile yet which is what I want. The same menu at that size though cannot fit on the sticky menu at the top. And that’s because there is the logo on the top left and the menu on the right that still hasn’t turned mobile yet but have parts of the menu wrap to the next line and breaking the layout. I guess this happens because it is set to turn mobile at 602px.

    Then, the question becomes obvious. Is there a way to turn the top sticky menu to mobile at a different breakpoint (earlier, so it becomes the mobile menu icon with the logo on the left) while retaining the menu in a non-mobile form when not sticky?

    Hope I make sense!

    #898379

    Tom Lead Developer

    Hi there,

    At this point, I would like to point out that the code given in this article does not work. I hope you revisit and update this article because it gets quite confusing.

    In GP 2.3, the “mobile header” breakpoint option in GPP 1.8 will apply to the regular mobile navigation as well.

    Moving on, I also have sticky navigation activated for Desktop only. Again, I would like to point out here that even if Desktop Only is activated, the main navigation menu remains sticky even in smaller browser windows. I understand if it remains sticky when the menu switches to mobile but on tables sizes, it keeps on being sticky.

    According to the code, the sticky nav will disable once the .menu-toggle element is visible if it’s set to be sticky on desktop only. Is .menu-toggle visibile when the sticky is still working? Is the mobile header set to sticky?

    Let’s say that around 700px my menu has not turned to mobile yet which is what I want. The same menu at that size though cannot fit on the sticky menu at the top. And that’s because there is the logo on the top left and the menu on the right that still hasn’t turned mobile yet but have parts of the menu wrap to the next line and breaking the layout. I guess this happens because it is set to turn mobile at 602px.

    This sounds like there simply isn’t enough room for everything in the navigation at that size? Maybe 602 isn’t wide enough?

    Then, the question becomes obvious. Is there a way to turn the top sticky menu to mobile at a different breakpoint (earlier, so it becomes the mobile menu icon with the logo on the left) while retaining the menu in a non-mobile form when not sticky?

    You should be able to use CSS to target .main-navigation.navigation-stick and hide the menu items/show the menu toggle using your own media query. As long as .menu-toggle is visible, the sticky navigation javascript should function.

    #899333

    George

    Hi Tom, thanks for getting back.

    In GP 2.3, the “mobile header” breakpoint option in GPP 1.8 will apply to the regular mobile navigation as well.

    Sorry but I don’t know what that means in the context of the link I sent not working. Maybe I am missing something but if the code that I linked doesn’t work now, doesn’t it need to be removed?

    According to the code, the sticky nav will disable once the .menu-toggle element is visible if it’s set to be sticky on desktop only. Is .menu-toggle visible when the sticky is still working? Is the mobile header set to sticky?

    Mobile header is set to sticky with a breakpoint of 602px as I mentioned earlier. Sticky navigation is set to Desktop Only. If what you say is true, a size smaller than 602px should disable sticky but in my case, it doesn’t. I just realized that Mobile header also have Sticky On. Setting it Off leaves the menu Sticky up to a minimum width before it switches to mobile (602px). I guess that should be the expected behavior which I need to balance out. I just find it so confusing though! I think a setting in the Customizer for manually adjusting the mobile breakpoint would help visualize things a bit more, what do you think?

    This sounds like there simply isn’t enough room for everything in the navigation at that size? Maybe 602 isn’t wide enough?

    There isn’t enough room for the sticky navigation but there is enough room for the normal menu and I am looking for a way to possibly separate their behavior and have the sticky menu as a mobile icon even though mobile breakpoint hasn’t been initiated yet.

    You should be able to use CSS to target .main-navigation.navigation-stick and hide the menu items/show the menu toggle using your own media query. As long as .menu-toggle is visible, the sticky navigation javascript should function.

    Aha, the show/hide functionality is what I wanted! I think I just created a super responsive menu here! There are some layout and alignment issues but I think I can handle those. I will get back to you if I have more issues.

    Thanks for the quick reply, as always!

    #899454

    Tom Lead Developer

    Sorry but I don’t know what that means in the context of the link I sent not working. Maybe I am missing something but if the code that I linked doesn’t work now, doesn’t it need to be removed?

    The code should work, but it’s possible that it’s conflicting with the mobile header breakpoint. I mentioned 2.3 because that code will no longer be necessary once it’s released. You can install 2.3 if you’d like to test it (it’s almost in alpha testing).

    I just realized that Mobile header also have Sticky On. Setting it Off leaves the menu Sticky up to a minimum width before it switches to mobile (602px). I guess that should be the expected behavior which I need to balance out. I just find it so confusing though! I think a setting in the Customizer for manually adjusting the mobile breakpoint would help visualize things a bit more, what do you think?

    This sounds like the expected behavior. We introduced the mobile header breakpoint option in GPP 1.8, which will automatically turn into a mobile menu breakpoint in GP 2.3.

    #899475

    George

    Hi Tom.

    I managed to do quite a lot only a couple of problems. It’s hard to describe so I will include a development URL on the first post and say a few things here:

    1) When resizing the browser window, take a look at the main menu (non-sticky). On sizes smaller than 769px the menu shifts to the left. I have tried everything to center it but I couldn’t.

    2) When resizing the browser window, please focus on the sticky menu now at the top. At 769px the mobile menu on the right makes a sudden movement. The same thing happens at 603px. I believe it’s because I used the following CSS:

    @media (min-width: 603px) and (max-width: 769px) {
    		.navigation-stick .menu-toggle {
    		padding-top: 10px;			
    	}
    }

    I had to use that as between those sized, the mobile menu was jumping up so I re-added the padding but it does this weird jump and I would like to avoid that.

    3) Again on the sticky header and on sizes smaller than 603px, the mobile menu floats to the left, near the logo instead of staying floated to the right. I believe it has to do with the menu converting to flex but settings flex-grow to 1 just shifts it a bit to the right.

    I have used this CSS for the responsive menu alignment which seems to me a bit overkill but I could not think of a better more refined way. Maybe you could help?

    @media (min-width: 602px) {
        .inside-footer-widgets > div {
            float: left;
            clear: none;
            width: 50%;
        }
    
        .main-navigation .mobile-bar-items,
        .sidebar-nav-mobile:not(#sticky-placeholder) {
            display: none;
        }
    
        .main-navigation ul,
        .gen-sidebar-nav {
            display: block;
        }
    }
    
    @media (max-width: 769px) {
    	#site-navigation .menu-toggle {
    		display: none;
    	}
    
    	.inside-header {
    		padding-top: 20px;
    	}
    
    }
    
    @media (min-width: 603px) and (max-width: 769px) {
    		.navigation-stick .menu-toggle {
    		padding-top: 10px;			
    	}
    }
    
    @media (max-width: 890px) {
    	.navigation-stick .main-nav {
    		display: none;
    	}
    
    	.navigation-stick .menu-toggle {
    		float: right;
    		display: block;
    	}
    
    }
    
    @media (max-width: 490px){
    	.main-navigation .menu-toggle {
    		margin: 0 auto;
    	}
    
    }
    
    @media (max-width: 494px){
    
    	.main-navigation .mobile-header-logo {
    		margin: 0 auto !important;
    	}	
    
    }	
    
    .mobile-header-logo {
    	padding-top: 10px;
    }
    
    @media (max-width: 601px) {
    	.navigation-stick .mobile-header-logo {
    		padding-top: 0;
    }
    #899489

    Tom Lead Developer

    1. This is because the nav drop point is using the 769px breakpoint. I just adjusted this to use a better filter name, and will update GPP to change the value depending on your mobile header/menu breakpoint: https://github.com/tomusborne/generatepress/commit/2bc03c5c242d15208476a75ecc4a097ede9a5272

    You can of course tweak this now:

    add_filter( 'generate_not_mobile_menu_media_query', function() {
        return '(min-width: 604px)';
    } );

    2. Instead of using your padding CSS, it may be worth playing with this filter:

    add_filter( 'generate_tablet_media_query', function() {
        return '(min-width: 604px) and (max-width: 1024px)';
    } );

    3. I believe this is being caused by this custom CSS you have:

    .main-navigation.is_stuck .site-logo {
        margin: 12px 0 6px 0;
    }
    #899537

    George

    1. I completely lost you there, sorry. I don’t understand the nav drop point using the 769px breakpoint has anything to do with the menu not being able to center with any CSS applied. Also as far as I understand you will update GPP soon but I could use the provided code? Anyway, I tried using the filter you provided but didn’t fix anything. I think it would help if I was able to understand the reasoning behind what you are proposing. So as far as I understand, the filter sets a custom breakpoint, right? How would that fix the menu alignment? I am still using the latest GP version and not 2.3. Do I need to use a development version to see any changes? And if yes, how would I install that since I can’t find it in the repository?

    2. Ok, I applied that filter and removed the CSS. It works better even though I can still see that only at 603px the mobile menu jumps up instantly.

    3. Yes, you are right, I removed it and applied some other styling to fix it, even though I am still not clear why that CSS would cause the mobile menu to come closer to the logo unless I was targeting the wrong class or something (getting very late here and I can’t think so clearly!).

    #900340

    Tom Lead Developer

    1. The nav drop point centers the menu, but only applies when not on mobile. The filter I proposed allows you to set that breakpoint until we get it fixed in the theme.

    You can either use the dev version or update that filter name in your current version (like the commit I linked to).

    2. I’m not seeing a jump anymore. Can you show me a quick gif of what you’re seeing?

    3. The mobile header logo using an auto margin-right to move everything to the right of the mobile header. Your CSS is removing that auto margin.

    #900685

    George

    1. It’s not working. I went into the css.output.php at line 47 and renamed generate_not_mobile_media_query to generate_not_mobile_menu_media_query, then refreshed the page. Top menu jumps on the left. I also don’t understand why I couldn’t have used the original filter name instead.

    2. Updated the first post with a link to a gif. Look at 604px.

    3. Ok, thanks. I believe I have fixed that.

    #900768

    Tom Lead Developer

    1. Did you include this function as well?:

    add_filter( 'generate_not_mobile_menu_media_query', function() {
        return '(min-width: 604px)';
    } );

    The name needs to change so the solution I give you now continues to work when I update the theme/plugin.

    2. And you removed your padding CSS I mentioned? Can you re-add your URL? You can keep the gif URL in there as well if you’d like, just separate them with a |.

    #901194

    George

    1. Yes, I did. I had to deactivate the Cache dynamic CSS in the Customizer general settings. Now it’s working!

    2. Yes, I have removed the code and all realted CSS is the following:

    /* Sticky Logo */
    .main-navigation.is_stuck {
    	background-color: #282828;
    }
    
    .navigation-stick .navigation-logo {
        margin: 14px 0 0 10px;
    }
    
    /* Change mobile break point */
    @media (min-width: 602px) {
        .inside-footer-widgets > div {
            float: left;
            clear: none;
            width: 50%;
        }
    
        .main-navigation .mobile-bar-items,
        .sidebar-nav-mobile:not(#sticky-placeholder) {
            display: none;
        }
    
        .main-navigation ul,
        .gen-sidebar-nav {
            display: block;
        }
    }
    
    @media (max-width: 769px) {
    	#site-navigation .menu-toggle {
    		display: none;
    	}
    
    	.inside-header {
    		padding-top: 20px;
    	}
    
    }
    
    @media (max-width: 890px) {
    	.navigation-stick .main-nav {
    		display: none;
    	}
    
    	.navigation-stick .menu-toggle {
    		float: right;
    		display: block;
    	}
    
    }
    
    @media (max-width: 490px){
    	.main-navigation .menu-toggle {
    		margin: 0 auto;
    	}
    
    }
    
    @media (max-width: 494px){
    
    	.main-navigation .mobile-header-logo {
    		margin: 0 auto !important;
    	}	
    
    }	
    
    .mobile-header-logo {
    	margin-top: 8px;
    }
    
    .navigation-stick .mobile-header-logo {
    	margin-top: 0;
    }
    
    .navigation-stick .mobile-header-logo {
    	padding: 14px 0 8px 0;
    }

    I have also updated links in the first post.

    #901648

    Tom Lead Developer

    1. You can save in the Customizer to clear the cache so you can keep the option on.

    2. I’m not seeing it shift no matter how hard I try. I do the navigation alignment go off to the side at 604, though? I think your min-width in the filter needs to be 603.

    #901666

    George

    1. Ok got it!
    2. Yeah, you are right. Much better now. The only thing is that at 603px now and coming from a smaller size, the whole sticky header disappears instantly and fades in again (as per the Customizer setting I would imagine). Can this be avoided?

    #902123

    Tom Lead Developer

    Hmm, looks like it happens when it initiates. I’ll see if it’s something I can fix in the core JS.

    #903626

    George

    Thanks Tom.

    Those filters found in the css-output.php: I couldn’t find them in the documentation anywhere and they seem very helpful indeed. Can you add them in the documentation maybe? I was under the impression that all filters and hooks available were documented but apparently, there are some that are not?

Viewing 15 posts - 1 through 15 (of 18 total)

You must be logged in to reply to this topic.