Mobile menu style changing

[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.

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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

[David]

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;
	}
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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

[David]

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

.site-logo {
    width: 100px;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[ZUN MIN]

Hi,

Thanks for the reply.

That works perfect.

Thank you!!!

Regards,

Zun Min Lee

[David]

Glad to be of help

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts