[Resolved] Header Menu Customisation

[Leo]

The menu label can be removed in the customizer:
https://docs.generatepress.com/article/mobile-menu-label/

The underline CSS is wrapped in the desktop only media query already so it should not appear on mobile:
https://generatepress.com/forums/topic/header-menu-customisation/page/2/#post-2161368

Please make sure your code matches my code.

[GeneratePressUser]

Hello Leo,

Yes, I did the changes on the code and now its almost all done.

[Leo]

For desktop, try adding margin-left to these two blocks of CSS and tweak the numbers as you see fit:

.main-navigation .main-nav ul li.register-button-class a {
    border: 1px solid;
    border-color: #366EFF;
    border-radius: 5px;
    line-height: 35px;
}
.main-navigation .main-nav ul li.login-button-class a {
    background: #366EFF;
    color: #fff;
    border-radius: 5px;
    line-height: 35px;
}

This can be removed:

.main-navigation li:last-child {
    margin-left: 20px;
}

For mobile, tweak the margin-bottom of this existing CSS:

@media (max-width: 768px) {
    .main-navigation .main-nav ul li.register-button-class a,
    .main-navigation .main-nav ul li.login-button-class a {
        display: inline-block;
        margin-left: 20px;
        margin-bottom: 10px;
    }
}

[GeneratePressUser]

Hey Leo,

Thanks it’s done just pls can u check the mobile toggle button in mobile on homepage and wp.

[Leo]

What about it?

You don’t want the close icon?

[GeneratePressUser]

Hey Leo,

Yes, no close icon make it same like home page or you can tell how can we edit those icon there, also how to make that icon more bold?

[Leo]

Try this PHP snippet:

add_filter( 'generate_svg_icon', function( $output, $icon ) {
	if ( 'menu-bars' === $icon ) {
        $output = '<svg viewBox="0 0 512 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><path d="M0 96c0-13.255 10.745-24 24-24h464c13.255 0 24 10.745 24 24s-10.745 24-24 24H24c-13.255 0-24-10.745-24-24zm0 160c0-13.255 10.745-24 24-24h464c13.255 0 24 10.745 24 24s-10.745 24-24 24H24c-13.255 0-24-10.745-24-24zm0 160c0-13.255 10.745-24 24-24h464c13.255 0 24 10.745 24 24s-10.745 24-24 24H24c-13.255 0-24-10.745-24-24z" /></svg>

       <svg viewBox="0 0 512 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><path d="M0 96c0-13.255 10.745-24 24-24h464c13.255 0 24 10.745 24 24s-10.745 24-24 24H24c-13.255 0-24-10.745-24-24zm0 160c0-13.255 10.745-24 24-24h464c13.255 0 24 10.745 24 24s-10.745 24-24 24H24c-13.255 0-24-10.745-24-24zm0 160c0-13.255 10.745-24 24-24h464c13.255 0 24 10.745 24 24s-10.745 24-24 24H24c-13.255 0-24-10.745-24-24z" /></svg>';
	}
	
	$classes = array(
		'gp-icon',
		'icon-' . $icon,
	);

	$output = sprintf(
		'<span class="%1$s">%2$s</span>',
		implode( ' ', $classes ),
		$output
	);
	return $output;
}, 10, 2 );

Adding PHP: https://docs.generatepress.com/article/adding-php/

This CSS should work to make the toggle bolder:

.gp-icon.icon-menu-bars svg path {
    stroke: #fff;
    stroke-width: 20pt;
}

[GeneratePressUser]

Hello Leo,

Thanks a lot, I will check it out, sorry for the delay was stuck in some work, we can mark this topic as resolved. Have a great weekend and stay safe 🙂

[Leo]

No problem 🙂

[Author]

Posts