Mobile menu style changing

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.

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

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

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

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

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

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

.site-logo {
    width: 100px;
}

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

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.

Hi,

Thanks for the reply.

That works perfect.

Thank you!!!

Regards,

Zun Min Lee

Glad to be of help