[Resolved] Mobile menu style changing

Home Forums Support Mobile menu style changing

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1356123
    ZUN MIN

    Hi.

    How do I implement mobile menu style such as Awaken theme or Artisan theme? which they appear on the left or right side rather then drop down.

    Also how do I put logo on the top left side and menu on the top right on mobile view such as those theme Aspire or Vibe?

    I am using Zeal theme which is logo in the center and menu under the logo.

    #1356309
    David
    Staff
    Customer Support

    Hi there,

    1. Thats the Off Canvas Panel:

    https://docs.generatepress.com/article/off-canvas-panel-overview/

    Please make sure you assign a Menu to it like you do the Primary or Secondary Navigation.

    2. Enable the Mobile Header:

    https://docs.generatepress.com/article/mobile-header/

    Note: The mobile header has its own Logo.

    #1357662
    ZUN MIN

    Hi.

    Thanks for the reply.

    All good, but when I apply mobile header with logo, logo position is a bit high, not in the center of the menu, not alight with menu. how can I fix?

    When I use them with site title it is aligned with menu. but when I use logo it is not right position.

    It’s a bit upper and middle. please have a look.

    Thank you.

    Regards,

    Zun Min Lee

    #1357726
    David
    Staff
    Customer Support

    Can you remove the following CSS in Customizer > Additional CSS:

    /* Mobile Navigation Breakpoint */
    @media (max-width: 922px) {
    	.site-logo {
        width: 140px;
        margin: 0 auto 32px auto!important;
        display: block;
    }
    	#menu-main-navigation li {
        border-bottom: 1px solid rgba(255,255,255,0.2);
    }
    	.main-navigation .main-nav ul li a {
        line-height: 50px;
    }
    	.main-navigation .menu-toggle {
    		display: block;
    	}
    
    	.main-navigation ul {
    		display: none;
    	}
    
    	.main-navigation.toggled .main-nav > ul {
    		display: block;
    	}
    
    	.main-navigation .main-nav ul ul.toggled-on,
    	.secondary-navigation .main-nav ul ul.toggled-on {
    		position: relative;
    		top: 0;
    		left: auto !important;
    		right: auto !important;
    		width: 100%;
    		pointer-events: auto;
    		height: auto;
    		opacity: 1;
    		display: block;
    	}
    
    	.main-navigation .main-nav li {
    		float: none;
    		clear: both;
    		display: block !important;
    		text-align: left !important;
    	}
    
    	.main-navigation .main-nav li.hide-on-mobile {
    		display: none !important;
    	}
    
    	.main-navigation .dropdown-menu-toggle:before {
    		content: "\f107" !important;
    	}
    
    	.main-navigation .sfHover > a .dropdown-menu-toggle:before {
    		content: "\f106" !important;
    	}
    
    	.main-navigation .menu-item-has-children .dropdown-menu-toggle {
    		float: right;
    	}
    
    	.main-navigation .mobile-bar-items {
    		display: block;
    	}
    
    	.main-navigation .menu li.search-item {
    		display: none !important;
    	}
    
    	.main-navigation .sf-menu > li.menu-item-float-right {
    		float: none !important;
    		display: inline-block !important;
    	}
    
    	[class*="nav-float-"] .site-header .inside-header > * {
    		float: none;
    		clear: both;
    	}
    
    	.gen-sidebar-nav {
    		display: none;
    	}
    
    	.sidebar-nav-mobile:not(#sticky-placeholder) {
    		display: block;
    	}
    }
    #1357755
    ZUN MIN

    Hi,

    That works perfect? why there were such CSS, because it was made for ZEAL theme?
    I have one more question, How can I show little bigger for my logo on desktop view? it doesn’t seem to be full height on the header. is that possible to make full size height on the black header area?
    Thanks for the help!

    Regards,

    Zun Min Lee

    #1357787
    David
    Staff
    Customer Support

    Yeah – Zeal was built a long time before some of the mobile breakpoint features were introduced. We need the designer to update it really or we’ll replace it.

    Logo size can be controlled in Customizer > Site Identity –> Logo Width

    #1357802
    ZUN MIN

    Hi,

    Thanks for the reply.

    I increased logo size maximum, but it doesn’t seem to be big enough. there are lots of black spacing on the top and bottom.

    I want to make logo bigger something like this
    https://gpsites.co/finance/

    Can I make it bigger in the current size of header?

    Thank you!

    Regards,

    Zun Min Lee

    #1357813
    David
    Staff
    Customer Support

    Aah more CSS in Customizer > Additional CSS that needs deleting:

    .site-logo {
        width: 100px;
    }
    #1357822
    ZUN MIN

    Hi,
    Thanks for the reply. I increased logo, but header size getting too big.

    I think logo size doesn’t matter I want to make less margin on header for top and bottom, so I can make logo bigger on same header size.

    is that possible?

    Thank you!

    Regards,

    Zun Min Lee

    #1357884
    David
    Staff
    Customer Support

    You can reduce the Padding in Customizer > Layout > Header:

    https://docs.generatepress.com/article/header-layout-overview/

    This will reduce the space around the logo and the nav. Then you can increase the logo size if you wish.

    #1357891
    ZUN MIN

    Hi,

    Thanks for the reply.

    That works perfect.

    Thank you!!!

    Regards,

    Zun Min Lee

    #1357903
    David
    Staff
    Customer Support
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.