[Resolved] mobile menu icon on right

Home Forums Support [Resolved] mobile menu icon on right

Home Forums Support mobile menu icon on right

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #2018354
    Martin

    I am trying to get my mobile menu icon on the right for phone and tablet. I used this code from the forum to set my breakpoint at 1080 for the menu:

    @media( max-width: 1080px ) {
    	.site-header,
    	#site-navigation,
    	#sticky-navigation {
    		display: none !important;
    		opacity: 0;
    	}
    
    	#mobile-header {
    		display: block !important;
    		opacity: 1;
    		width: 100% !important;
    	}
    
            #mobile-header .main-nav > ul {
                display: none;
            }
    
    	#mobile-header.toggled .main-nav > ul,
            #mobile-header .menu-toggle,
            #mobile-header .mobile-bar-items {
                display: block;
            }
    }
    

    but the hamburger icon ends up not flush right on all devices? Can we float it so it is always just a few spaces from the right edge?

    thanks

    #2018414
    Ying
    Staff
    Customer Support

    Hi Martin,

    You don’t need any CSS to set breakpoint for header/navigation, actually there’s an option at customizer > layout > primary navigation > mobile menu breakpoint:
    https://docs.generatepress.com/article/primary-navigation-layout-overview/

    Let me know if this helps ๐Ÿ™‚

    #2018462
    Martin

    Ok, thanks. I deleted the CSS but how do I make the hamburger icon stay on the right? It is not flush right?

    #2018499
    Leo
    Staff
    Customer Support

    There is default padding added:
    https://www.screencast.com/t/kkCVteQx

    You can remove it with this CSS:

    #mobile-header .menu-toggle {
        padding-right: 0;
    }
    #2018522
    Martin

    I tried that and it moved a tiny bit right but I want it justified right over to the right? It seems to be acting like it is centered in some sort of grid…

    #2018535
    Martin

    In a related question to the mobile behavior of this header, I am using a GP block Site Header element which has GenerateBlock (GB) Headers in a GB Container with the hide-on-mobile, hide-on-tablet and hide-on-desktop classes to control the visibility for desktop and tablet and mobile. However, you will note that as you shrink the desktop view in your browser down to tablet and mobile sizes it does not break at the new mobile breakpoint I set in the customizer of 1035?

    Can we fix that so the hide-on-tablet class hides at the theme breakpoint?

    #2018536
    Ying
    Staff
    Customer Support

    Add this CSS:

    nav#mobile-header.main-navigation .menu-toggle {
        flex-grow: 0;
    }

    Change this CSS:

    .mobile-header-navigation {
        padding: 10px;
    }

    to:

    .mobile-header-navigation {
        padding: 10px 0;
    }
    #2018543
    Martin

    Wow fantastic! That works great!
    What about the hide-on-tablet class breakpoint issue (above)?

    #2018554
    Ying
    Staff
    Customer Support

    hide-on-mobile, hide-on-tablet and hide-on-desktop

    These classes are built-in in GP’s theme, so the break point of these class won’t change even if you change the mobile break point in customizer.

    You can add this CSS:

    @media (min-width: 1025px) and (max-width: 1035px)  {
    .gb-container.hide-on-desktop {
        display: block !important;
    }
    }
    
    @media (max-width: 1035px) {
    .gb-container.hide-on-mobile.hide-on-tablet {
        display: none !important;
    }
    }
    #2018604
    Martin

    Thanks so much Ying! That’s perfect!

    #2018681
    Ying
    Staff
    Customer Support

    You are welcome ๐Ÿ™‚

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