menschenschreck

Hello @putra1arya,

that’s too bad. Nevertheless many thanks. So I will close this topic.

• This reply was modified 5 months, 3 weeks ago by menschenschreck.

Hello @putra1arya,

I know this button in the menu bar. But I can’t add my own icon above it. I have found a workaround to enable this using my own font in conjunction with CSS. But this is very complex. It would be much easier to be able to upload and use your own icon via the “Choose Icon” button.

Hi Pradnya,

I could have figured that out myself.
Works great, thank you very much.

Like this support here from you. It’s really great ??

Hi Pradnya,

here me again. Been trying to remove the “.gutenverse-nav-identity-panel” for hours. But don’t get it. It should then look like this. https://prnt.sc/Hp-xkpRK4JeR

In chrome it’s easy to delete the line, but in CSS it’s harder. Tried all that:

.always-hamburger .guten-nav-menu.guten-element .gutenverse-nav-identity-panel > div {
	display: none;
}

.always-hamburger .gutenverse-identity-panel {
	display: none;
}

.always-hamburger .gutenverse-identity-panel > div {
	display: none;
}

.always-hamburger .gutenverse-identity-panel > div {
	visibility: collapse;
}

.always-hamburger .gutenverse-identity-panel {
	visibility: collapse;
}

Please help ??

Hi Pradnya,

many thanks, this code works very well for me. Thank you very much again.
Do you know why “my” code in script.js doesn’t work? If I write this as custom-html somewhere on the page inside a block it works:

<button class="hamburger hamburger--collapse" type="button">
    <span class="hamburger-box">
    <span class="hamburger-inner"></span>
    </span>
 </button>

<script>
  // Look for .hamburger
  var hamburger = document.querySelector(".hamburger");
  // On click
  hamburger.addEventListener("click", function() {
    // Toggle class "is-active"
    hamburger.classList.toggle("is-active");

    // Do something else, like open/close menu

  });
</script>

When I write it in the script.js it doesn’t work.
Do you know why?

Hi Pradnya,

sorry I’m late. But I’m trying a lot of things at the moment and my WordPress installation is messed up.

I just tested your code snippets and now I get a critical error, my site is down.
I need to find out what I can do to fix the site now.

Also tried replacing the navicon with one of https://jonsuh.com/hamburgers/
I think I tried too much and now everything is down. Will try (and ‘try’ again) to fix it, but it may take time.

If you want, we can close the topic, since the main issue has been resolved.

Thank you again ??

Hi Pradnya,

thank you very much for this solution. I changed it a bit and it works great for me now.
I commented out the delay, I think the menu slides nicer without. Is there a special reason for the short delay, something I don’t see? Here my working code:

/* Flyout TOP */

.always-hamburger .guten-nav-menu.guten-element .gutenverse-menu-wrapper {
    max-width: 90%;
    height: auto !important;
    top: 80px;
    left: unset;
    right: 5%;
    overflow: hidden;
    background: transparent;
    visibility: hidden;
    transition: visibility 1s;
/*  transition-delay: 0.001s;  */
}

.always-hamburger .guten-nav-menu.guten-element .gutenverse-menu-wrapper > div {
    position: relative;
    top: -500px;
    background: #f6f6f6;
/*  opacity: 0.95;  */	
    transition: top 1s ease;
}

.always-hamburger .guten-nav-menu.guten-element .gutenverse-menu-wrapper.active {
    max-width: 90%;
    top: 80px;
    left: unset;
    right: 5%;
    visibility: visible;
}

.always-hamburger .guten-nav-menu.guten-element .gutenverse-menu-wrapper.active > div {
    top: 0px;
}

The hamburg icons are not accessible from the internet because I’m still working on a virtual machine. But here is a download link for you:

https://drive.google.com/file/d/1zwOA0Hb7bUDHGbjvbABQd8v9pX0GxDtO/view?usp=sharing

I hope the download works via my link.

Thanks again.

Hi Pradnya,

your updated code works exactly how I imagined it. Many Thanks.

I was able to solve the problem with the text in the menu so well.

The css for the border works too.

Thanks again for everything here and the first-class support.
I think we can close this topic now.

Hi Pradnja,

I copied your code into functions.php and my custom styles under the customizer into style.css. My path looks like this:

add_action(
			'enqueue_block_editor_assets',
			function() {
				wp_enqueue_style( 'custom-style', 'style.css', array(), '1.0.0' );
			},
			999
		);

		add_action(
			'wp_enqueue_scripts',
			function() {
				wp_enqueue_style( 'custom-style', 'style.css', array(), '1.0.0' );
			},
			999
		);

Because the functions.php and the style.css are in the same directory.
Unfortunately that doesn’t work. Do I need to change anything else?

Yes, I wanted to align this menu text in the middle.
However, not horizontally but vertically centered. I hope I didn’t mix up horizontal and vertical. Here is a picture of it. Is it possible to add borders below?

https://prnt.sc/5g0TilzFS4-o

Many Thanks.

Hi Pradnja,

thank you for the improved hover code. It works now ??

I wanted to outsource the custom css code to style.css and then load it for the customized header. Sorry, but hooks don’t really mean anything to me.

I’ve tried everything for the logo. It either appears too small or is cropped.
Now I added this code in the customizer:

.guten-nav-menu .gutenverse-menu-wrapper .gutenverse-nav-identity-panel .gutenverse-nav-site-title .gutenverse-nav-logo img {
    max-width: 200px;
    height: auto;
}

and selected these settings in the backend: https://prnt.sc/3PbaTmKl3h_R

Fits quite well now and I’m more likely to find my way in the code.
https://prnt.sc/zSWGEPguucnr
Now I’ll try to put the text in the middle. The text line is too far down. But I think this will work.

It would be great if custom icons would work in a future version. that would simplify a lot.

Thank you very much again. ??

Hello Pradnja,
many thanks for the answer.
How do I have to load the style.css on the website? Probably about the functions.php? I’ll try that later. Found this code: wp_enqueue_style( 'style', get_stylesheet_uri() );
Your code for the logo works and both logo and button are displayed. Thanks very much!
A custom icon is also displayed with the other code, but the hover effect is missing.
I tried to customize the CSS but it doesn’t work properly. When hovering, both symbols can be seen at the same time. Here the CSS:

.fixed-header-small {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	z-index: 9999;
}

.always-hamburger .guten-nav-menu.guten-element .gutenverse-menu-wrapper {
	width: 100%;
	max-width: 360px;
	border-radius: 0px 0px 0px 0px;
	background-color: #f7f7f7;
	width: 100%;
	position: fixed;
	top: 0;
	left: -110%;
	height: 100% !important;
	box-shadow: 0 10px 30px 0 rgba(255, 165, 0, 0);
	overflow-y: auto;
	overflow-x: hidden;
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
	transition: left 0.6s cubic-bezier(0.6, 0.1, 0.68, 0.53);
}

.always-hamburger .guten-nav-menu.guten-element .gutenverse-hamburger-menu {
	display: block;
}

.always-hamburger .guten-nav-menu.guten-element .gutenverse-menu-wrapper .gutenverse-menu-container {
	overflow-y: hidden;
}

.always-hamburger .guten-nav-menu.guten-element .gutenverse-menu-wrapper .gutenverse-menu, .guten-nav-menu.guten-element .gutenverse-menu-wrapper .gutenverse-menu > ul {
	display: block;
	overflow-y: auto;
}

.always-hamburger .guten-nav-menu.guten-element .gutenverse-menu-wrapper .gutenverse-menu li, .guten-nav-menu.guten-element .gutenverse-menu-wrapper .gutenverse-menu > ul li {
	display: block;
	width: 100%;
	position: inherit;
}

.always-hamburger .guten-nav-menu.guten-element .gutenverse-menu-wrapper .gutenverse-menu li a, .guten-nav-menu.guten-element .gutenverse-menu-wrapper .gutenverse-menu > ul li a {
	display: block;
}

.always-hamburger .guten-nav-menu.guten-element .gutenverse-menu-wrapper.active {
	left: 0;
}  

.always-hamburger .guten-nav-menu.break-point-tablet .gutenverse-menu-wrapper .gutenverse-nav-identity-panel {
    padding: 10px 0px 10px 0px;
    display: block;
    position: relative;
    z-index: 5;
    width: 100%;
}

.always-hamburger .guten-nav-menu.break-point-tablet .gutenverse-menu-wrapper .gutenverse-nav-identity-panel .gutenverse-nav-site-title {
    display: inline-block;
}

.always-hamburger .guten-nav-menu.break-point-tablet .gutenverse-menu-wrapper .gutenverse-nav-identity-panel .gutenverse-close-menu {
    display: block;
}

.always-hamburger .guten-nav-menu.guten-element .gutenverse-hamburger-menu i::before {
	display: block;
    content: ' ';
    background-image: url("https://192.168.2.35/wp-content/uploads/2022/11/Navi-Button3.svg");
	
	  background-size: 25px 25px;
    height: 25px;
    width: 25px;
}

.always-hamburger .guten-nav-menu.guten-element .gutenverse-hamburger-menu:hover {
	display: block;
    content: ' ';
    background-image: url("https://192.168.2.35/wp-content/uploads/2022/11/Navi-Button5.svg");
	
	  background-size: 25px 25px;
    height: 25px;
    width: 25px;
}

Can’t I create a custom font with my icons and put that in the Gutenverse Icon Library one way? Then the settings (hover, color, etc.) would be fairly easy to manage via the block menu. Or is inserting it too complicated?
Here is the code of one of my test pages:

<!-- wp:columns {"className":"ticss-d289e2bb","hasCustomCSS":true,"customCSS":"..ticss-d289e2bb {}"} -->
<div class="wp-block-columns ticss-d289e2bb"><!-- wp:column {"layout":{"inherit":false}} -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Das ist ein Test für eine Spalte!!! Das ist ein Test für eine Spalte!!! Das ist ein Test für eine Spalte!!! Das ist ein Test für eine Spalte!!! Das ist ein Test für eine Spalte!!! Das ist ein Test für eine Spalte!!! Das ist ein Test für eine Spalte!!! Das ist ein Test für eine Spalte!!! Das ist ein Test für eine Spalte!!! Das ist ein Test für eine Spalte!!! Das ist ein Test für eine Spalte!!! Das ist ein Test für eine Spalte!!! Das ist ein Test für eine Spalte!!! Das ist ein Test für eine Spalte!!! Das ist ein Test für eine Spalte!!! Das ist ein Test für eine Spalte!!! Das ist ein Test für eine Spalte!!! Das ist ein Test für eine Spalte!!! Das ist ein Test für eine Spalte!!! Das ist ein Test für eine Spalte!!! Das ist ein Test für eine Spalte!!! Das ist ein Test für eine Spalte!!! Das ist ein Test für eine Spalte!!! Das ist ein Test für eine Spalte!!! </p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"top","layout":{"contentSize":"100vw","inherit":false}} -->
<div class="wp-block-column is-vertically-aligned-top"><!-- wp:paragraph -->
<p>Absatz 2 - Absatz 2 - Absatz 2 - Absatz 2 - Absatz 2 - Absatz 2 - Absatz 2 - Absatz 2 - Absatz 2 - Absatz 2 - Absatz 2 - Absatz 2 - Absatz 2 - Absatz 2 - Absatz 2 - Absatz 2 - Absatz 2 - Absatz 2 - Absatz 2 - Absatz 2 - Absatz 2 - Absatz 2 - Absatz 2 - Absatz 2 - Absatz 2 - Absatz 2 - Absatz 2 - Absatz 2 - Absatz 2 - Absatz 2 - Absatz 2 - Absatz 2 - Absatz 2 - Absatz 2 - Absatz 2 - Absatz 2 - Absatz 2 - Absatz 2 - Absatz 2 - Absatz 2 - Absatz 2 - Absatz 2 - Absatz 2 - Absatz 2 - Absatz 2 - </p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"20%"} -->
<div class="wp-block-column" style="flex-basis:20%"><!-- wp:gutenverse/animated-text {"elementId":"guten-jVuHjE","style":"jump","text":"Animierter Text","alignText":{"Desktop":"center"},"verticalAlign":{"Desktop":"center"},"margin":{"Desktop":{}},"padding":{"Desktop":{}}} -->
<div class="guten-element guten-animated-text guten-jVuHjE style-jump" data-animation="jump" data-loop="true"><h2 class="text-content"><span class="text-wrapper"><span class="letters">Animierter Text</span></span></h2></div>
<!-- /wp:gutenverse/animated-text --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:image {"align":"center","id":59,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-full"><img src="https://192.168.2.35/wp-content/uploads/2022/10/Logo-Orange-1line.svg" alt="" class="wp-image-59"/></figure>
<!-- /wp:image -->

<!-- wp:image {"align":"center","id":62,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-full"><img src="https://192.168.2.35/wp-content/uploads/2022/10/Logo-WEISS-1line.svg" alt="" class="wp-image-62"/></figure>
<!-- /wp:image -->

<!-- wp:coblocks/shape-divider {"className":"ticss-e130cc90","hasCustomCSS":true} /-->

<!-- wp:navigation {"ref":340,"textColor":"pale-pink","backgroundColor":"pale-cyan-blue","overlayMenu":"always","icon":"menu","overlayBackgroundColor":"black","overlayTextColor":"luminous-vivid-orange","layout":{"type":"flex","justifyContent":"center"}} /-->

The corresponding template code for this:

<!-- wp:template-part {"slug":"hrader-fix-small","theme":"createblocktheme_0111222","tagName":"header"} /-->

<!-- wp:query {"queryId":0,"query":{"perPage":10,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true,"taxQuery":null},"tagName":"main","layout":{"inherit":true}} -->
<main class="wp-block-query"><!-- wp:post-template -->
<!-- wp:group {"displayRules":[{"_key":0,"displayKey":"authentication","tpgb_authentication_value":"authenticated","tpgb_role_value":"administrator","tpgb_os_value":"iphone","tpgb_browser_value":"ie","assigOpr":"is","tpgb_startdate_value":"2021-10-13","tpgb_enddate_value":"2021-10-15","tpgb_time_value":"12:00","tpgb_day_value":"[]","tpgb_post_type_value":"[]","tpgb_page_value":"[]","tpgb_post_value":"[]","tpgb_taxonomy_archive_value":"[]","tpgb_single_terms_value":"[]","tpgb_author_archive_value":"[]","tpgb_post_type_archive_value":"[]","tpgb_static_page_value":"home","tpgb_date_archive_value":"day","tpgb_search_results_value":"","tpgb_single_archive_value":"[]"}]} -->
<div class="wp-block-group"><!-- wp:post-title {"isLink":true} /-->

<!-- wp:post-featured-image {"isLink":true} /-->

<!-- wp:post-content /-->

<!-- wp:group {"style":{"typography":{"fontSize":"14px"}},"layout":{"type":"flex"}} -->
<div class="wp-block-group" style="font-size:14px"><!-- wp:post-author {"showAvatar":false,"showBio":false} /-->

<!-- wp:post-date {"isLink":true} /-->

<!-- wp:post-terms {"term":"category"} /-->

<!-- wp:post-terms {"term":"post_tag"} /--></div>
<!-- /wp:group -->

<!-- wp:spacer {"height":"40px"} -->
<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:group -->
<!-- /wp:post-template -->

<!-- wp:group {"layout":{"inherit":true,"type":"constrained"},"displayRules":[{"_key":0,"displayKey":"authentication","tpgb_authentication_value":"authenticated","tpgb_role_value":"administrator","tpgb_os_value":"iphone","tpgb_browser_value":"ie","assigOpr":"is","tpgb_startdate_value":"2021-10-13","tpgb_enddate_value":"2021-10-15","tpgb_time_value":"12:00","tpgb_day_value":"[]","tpgb_post_type_value":"[]","tpgb_page_value":"[]","tpgb_post_value":"[]","tpgb_taxonomy_archive_value":"[]","tpgb_single_terms_value":"[]","tpgb_author_archive_value":"[]","tpgb_post_type_archive_value":"[]","tpgb_static_page_value":"home","tpgb_date_archive_value":"day","tpgb_search_results_value":"","tpgb_single_archive_value":"[]"}]} -->
<div class="wp-block-group"><!-- wp:query-pagination -->
<!-- wp:query-pagination-previous /-->

<!-- wp:query-pagination-numbers /-->

<!-- wp:query-pagination-next /-->
<!-- /wp:query-pagination --></div>
<!-- /wp:group --></main>
<!-- /wp:query -->

<!-- wp:template-part {"slug":"footer","theme":"createblocktheme_0111222","tagName":"footer"} /-->

On this “hrader-fix-small” is used as a template part. I know there is a mistake here “r” instead of “e”. Here is the code for this one:

<!-- wp:group {"tagName":"header","style":{"spacing":{"padding":{"top":"15px","right":"15px","bottom":"15px","left":"15px"}},"color":{"background":"#fc7000"}},"className":"fixed-header-small always-hamburger","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<header class="wp-block-group fixed-header-small always-hamburger has-background" style="background-color:#fc7000;padding-top:15px;padding-right:15px;padding-bottom:15px;padding-left:15px"><!-- wp:image {"id":62,"width":146,"height":37,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="https://192.168.2.35/wp-content/uploads/2022/10/Logo-WEISS-1line.svg" alt="" class="wp-image-62" width="146" height="37"/></figure>
<!-- /wp:image -->

<!-- wp:group {"textColor":"white","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"},"fontSize":"medium"} -->
<div class="wp-block-group has-white-color has-text-color has-medium-font-size"><!-- wp:gutenverse/nav-menu {"elementId":"guten-tiL3sS","menuId":7,"alignment":{"Desktop":"flex-end"},"mobileMenuLogo":{"media":{"imageId":59,"sizes":{"full":{"url":"https://192.168.2.35/wp-content/uploads/2022/10/Logo-Orange-1line.svg"}}},"size":"full"},"mobileIcon":"fas fa-align-right","mobileCloseIcon":"fas fa-times-circle","mobileLogoWidth":{"Desktop":"150"},"mobileLogoHeight":{"Desktop":"150"},"mobileLogoFit":{"Desktop":"none"},"mobileMenuMargin":{"Desktop":{}},"mobileMenuPadding":{"Desktop":{}},"menuHeight":{"Desktop":"40"},"menuPadding":{"Desktop":{}},"menuMargin":{"Desktop":{}},"menuRadius":{"Desktop":{}},"itemTypography":{"font":{"label":"Verdana","value":"Verdana","type":"system"},"weight":"normal","transform":"normal","decoration":"none","style":"normal","size":{"Desktop":{"unit":"px","point":"20"}}},"itemSpacing":{"Desktop":{"unit":"px","dimension":{"top":"10","right":"20","bottom":"10","left":"20"}}},"itemTextNormalColor":{"Desktop":{"type":"variable","id":"black"}},"itemTextHoverColor":{"Desktop":{"type":"variable","id":"white"}},"itemTextHoverBg":{"type":"default","color":{"type":"variable","id":"cyan-bluish-gray"}},"itemTextActiveColor":{"Desktop":{"type":"variable","id":"white"}},"itemTextActiveBg":{"type":"default","color":{"type":"variable","id":"luminous-vivid-orange"}},"submenuIndicatorMargin":{"Desktop":{}},"submenuIndicatorPadding":{"Desktop":{}},"submenuIndicatorBorder":{"radius":{"Desktop":{}}},"submenuTypography":{"font":{"label":"Ubuntu","value":"Ubuntu","type":"google"}},"submenuSpacing":{"Desktop":{}},"submenuTextNormalBg":{"type":"default","image":{"Desktop":{"id":25,"image":"https://192.168.2.35/wp-content/uploads/2022/10/Tulips.jpg"}},"position":{"Desktop":"center left"},"repeat":{"Desktop":"no-repeat"},"size":{"Desktop":"auto"},"blendMode":{"Desktop":"overlay"}},"submenuItemBorder":{"radius":{"Desktop":{}}},"submenuFirstItemBorder":{"radius":{"Desktop":{}}},"submenuLastItemBorder":{"radius":{"Desktop":{}}},"submenuPanelPadding":{"Desktop":{}},"submenuPanelBorder":{"radius":{"Desktop":{}}},"hamburgerAlignment":{"Desktop":"flex-end"},"hamburgerSize":{"Desktop":"30"},"hamburgerPadding":{"Desktop":{"unit":"px","dimension":{"top":"5","right":"5","bottom":"5","left":"5"}}},"hamburgerMargin":{"Desktop":{"unit":"px","dimension":{"top":"0","right":"0","bottom":"0","left":"0"}}},"hamburgerColorNormal":{"Desktop":{"type":"variable","id":"white"}},"hamburgerBgNormal":{"type":"default","color":{"r":0,"g":0,"b":0,"a":0},"position":{"Desktop":"default"},"repeat":{"Desktop":"no-repeat"},"size":{"Desktop":"contain"},"blendMode":{"Desktop":"normal"}},"hamburgerBorderNormal":{"radius":{"Desktop":{"unit":"px","dimension":{"top":"0","right":"0","bottom":"0","left":"0"}}},"all":{"type":"none","color":{"type":"variable","id":"white"},"width":"0"}},"hamburgerColorHover":{"Desktop":{"type":"variable","id":"black"}},"hamburgerBgHover":{"type":"default","blendMode":{"Desktop":"multiply"}},"hamburgerBorderHover":{"radius":{"Desktop":{}},"all":{"type":"none"}},"closeSize":{"Desktop":"41"},"closePadding":{"Desktop":{"unit":"px","dimension":{"top":"4","right":"56","bottom":"0","left":"0"}}},"closeMargin":{"Desktop":{"unit":"px","dimension":{"top":"0","right":"0","bottom":"0","left":"0"}}},"closeColorNormal":{"Desktop":{"type":"variable","id":"luminous-vivid-orange"}},"closeBgNormal":{"type":"default","color":{"r":0,"g":0,"b":0,"a":0}},"closeBorderNormal":{"radius":{"Desktop":{"unit":"px","dimension":{"top":"0","right":"0","bottom":"0","left":"0"}}},"all":{"type":"none","width":"0","color":{"r":0,"g":0,"b":0,"a":0}}},"closeColorHover":{"Desktop":{"type":"variable","id":"black"}},"closeBgHover":{"type":"default","color":{"r":0,"g":0,"b":0,"a":0}},"closeBorderHover":{"radius":{"Desktop":{}}},"border":{"radius":{"Desktop":{}},"all":{"type":"none"}},"borderHover":{"radius":{"Desktop":{}},"all":{"type":"none"}},"margin":{"Desktop":{}},"padding":{"Desktop":{}},"positioningType":{"Desktop":"inline"},"positioningAlign":{"Desktop":"center"},"positioningLocation":"default"} -->
<div class="guten-element guten-nav-menu guten-tiL3sS"></div>
<!-- /wp:gutenverse/nav-menu --></div>
<!-- /wp:group --></header>
<!-- /wp:group -->

<!-- wp:spacer {"height":"70px"} -->
<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

Here you can see the cropped logo. Unfortunately I can’t take a screen shot with the double icons in the hamburger menu. Cut of Logo

If the browser’s scroll bar appears, the icon does not move to the left either, it sticks too near by the right border.

Thank you again for the great effort and great support!

Hi Pradnya,
my site is unfortunately not online. I use a development environment in the virtual machine. But I’ll try to upload some screenshots for you.
Your new code works for me now too. I add it to the appropriate line in the header using <always-hamburger>. Thank you very much for the help here. This is really exceptionally good!
Can I also paste the code into my style.css or wouldn’t that work?
With the menu is something going wrong. The logo and the button are missing from a certain resolution. Available up to 780px, missing from 781px and above.
with Logo Logo missing
Can I also customize individual parts of the menu via CSS? The space for the logo is actually too small, tried something in Chrome “Editor” (as you see on the pictures, now the logo is larger). But how to do that in CSS or anywhere else?
I’m a design junky, sorry for that, but can I put a custom icon for the hamburger menu? Which format do I need for this? Can I do that?
On my fixed header, the hamburger icon is too far to the right when a scroll bar appears. fixed header with scrollbar I probably can’t responsively adjust this, can I?
The menu can also fly in from the right, I read that here. I’ll test that right away to see if it works for me too.
So many questions, I know. If it’s too much, please say.
Thank you again for all the hard work. Really great support here!!!

Hello,
many thanks for the quick replies. I am currently using a css class via Appearance > Customize > Additional CSS.

.fixed-header-small {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	z-index: 9999;
	
.always-hamburger {
     .guten-nav-menu.guten-element .gutenverse-menu-wrapper {
			width: 100%;
			max-width: 360px;
			border-radius: 0px 0px 0px 0px;
			background-color: #f7f7f7;
			width: 100%;
			position: fixed;
			top: 0;
			left: -110%;
			height: 100% !important;
			box-shadow: 0 10px 30px 0 rgba(255, 165, 0, 0);
			overflow-y: auto;
			overflow-x: hidden;
			display: flex;
			flex-direction: column-reverse;
			justify-content: flex-end;
			transition: left 0.6s cubic-bezier(0.6, 0.1, 0.68, 0.53);
		}

		.guten-nav-menu.guten-element .gutenverse-hamburger-menu {
			display: block;
		}

		.guten-nav-menu.guten-element .gutenverse-menu-wrapper .gutenverse-menu-container {
			overflow-y: hidden;
		}

		.guten-nav-menu.guten-element .gutenverse-menu-wrapper .gutenverse-menu, .guten-nav-menu.guten-element .gutenverse-menu-wrapper .gutenverse-menu > ul {
			display: block;
			overflow-y: auto;
		}

		.guten-nav-menu.guten-element .gutenverse-menu-wrapper .gutenverse-menu li, .guten-nav-menu.guten-element .gutenverse-menu-wrapper .gutenverse-menu > ul li {
			display: block;
			width: 100%;
			position: inherit;
		}

		.guten-nav-menu.guten-element .gutenverse-menu-wrapper .gutenverse-menu li a, .guten-nav-menu.guten-element .gutenverse-menu-wrapper .gutenverse-menu > ul li a {
			display: block;
		}

		.guten-nav-menu.guten-element .gutenverse-menu-wrapper.active {
			left: 0;
		}
}

and add this in the row in which the nav menu is located under > Additional CSS class (always-hamburger). On some pages the header is missing in the slide-out menu, so the close-button and the logo are missing.
I’m using a fixed header and I think there might be something wrong with the z-index.
Although it is correct on mobile devices, just not in the desktop view.
I got the padding under control via the row settings.
Everything is very messed up right now.
I think it would take too long to clarify all of this here. Thanks for the help so far, but I think I need to sort things out first and learn more about WordPress and Gutenberg. Thanks alot.

• This reply was modified 2 years ago by menschenschreck.

Hello Pradnya,
thank you very much for the code. I’m still trying to put everything in the right place and make the adjustments for my site.
I need more time for that, because I’m still having a hard time finding my way around.
I wrapped your first code into a custom css so I could apply it to the menu block. Hope this was correct.
.hamburger-always { [your code] }
Unfortunately I don’t know yet where I have to change something to make adjustments to the layout like padding right. No matter what I change in the code, nothing happens.
I added the other code to the functions.php and can now ONLY do hamburger menus. Is that what it does?
Thank you once again. I’ll try to understand the code so I can adapt it for myself. But this will take time.