Hamburger-Menu ALWAYS

  • Resolved menschenschreck

    (@menschenschreck)


    2 years, 4 months ago

    Hello everyone,
    I’m relatively new to WordPress and really like the Gutenverse blocks.
    The hamburger menu is so great that I would like to use it at any resolution. Unfortunately, this cannot be set via the options. There are only two breakpoints here (tablet + mobile). The core-block-navigation also has an “always” selection.
    Is there still a way to always use the hamburger menu? I can’t find any overlay settings in the customizer as described in some forums.

    Many Thanks ??

Viewing 15 replies - 1 through 15 (of 15 total)
  • Pradnya

    (@pradnyajegstudio)

    Hi @menschenschreck

    Unfortunately, we don’t have the option to set the hamburger menu always shown. We will consider it as a feature request. If many other users find this feature useful, maybe we can add it.

    For now, there is a way. But you need to change the code. If you haven’t familiar with code and WordPress yet, I suggest you ask for help from an expert to add the code to your site. This is an example code you can try:

    function gutenverse_get_custom_nav_hamburger() {
	return '
		.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;
		}
	';
}

add_action( 'enqueue_block_editor_assets', function() {
	wp_add_inline_style( 'gutenverse-editor-style', gutenverse_get_custom_nav_hamburger() );
}, 999 );

add_action( 'wp_enqueue_scripts', function() {
	wp_add_inline_style( 'gutenverse-frontend-style', gutenverse_get_custom_nav_hamburger() );
}, 999 );

    This will change the appearance on the frontend and the editor. Maybe you also need to adjust the code to match the appearance of your site.

    If you only want to change the frontend, you can just use the CSS code. Add it to Appearance > Customize > Additional CSS.

    .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;
		}
    Thread Starter menschenschreck

    (@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.

    Pradnya

    (@pradnyajegstudio)

    If you wrapped the block using a custom class, you can change the CSS selector on the code. From .guten-nav-menu.guten-element ... to .hamburger-always.guten-nav-menu.guten-element ... if you add the custom class to the nav menu block. But, I notice there was a bug in order to add custom classes to the nav menu. It will be fixed in the next update. For now, you can add it to the column. If you add custom classes to the column, the selector will be .hamburger-always .guten-nav-menu.guten-element ...

    For the padding, can you point me to which padding you want to adjust? You can send me a screenshot using sharing tool like this https://prnt.sc/

    I added the other code to the functions.php and can now ONLY do hamburger menus. Is that what it does?
    Yes, it is. Is there something wrong?

    Thread Starter menschenschreck

    (@menschenschreck)

    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.

    Pradnya

    (@pradnyajegstudio)

    Hi menschenschreck. Is your site live? If yes, can you send the URL? Maybe I can help you to sort out the problems. But I think I need to replicate it to my side.

    For the CSS, it is not work on my side. I need to adjust it to

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

    to make it work. But I am not sure where I need to add the fixed-header-small class

    Thread Starter menschenschreck

    (@menschenschreck)

    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!!!

    Pradnya

    (@pradnyajegstudio)

    Hi,

    I will try to answer your questions. If there’s still something you don’t understand, you can ask again.

    For the style.css, as long as it load on your site, the code will work as in the customizer.

    For the logo and the button that are missing, please try to add this CSS.

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

    To add the custom icon, you can use this css.

    .always-hamburger .guten-nav-menu.guten-element .gutenverse-hamburger-menu i::before {
	display: block;
    content: ' ';
    background-image: url("your icon url");
    background-size: 28px 28px;
    height: 28px;
    width: 28px;
}

    You can upload your icon file, then change “your icon url” with your icon. Also you can adjust the icon size by change the value of background-size, height, and width.

    For the rest, please send me your content code, so I can replicate it on my side. To get the code, go to code editor as shown below.
    https://prnt.sc/IVQw7Y-5zP-v

    If you use template part, also send the code. You can go to browse all template to see template part.
    https://prnt.sc/epTHgcjN1ox5

    Last, please provide all the css you are currently using.

    • This reply was modified 2 years, 4 months ago by Pradnya.
    Thread Starter menschenschreck

    (@menschenschreck)

    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!

    Pradnya

    (@pradnyajegstudio)

    Hi menschenschreck,

    Where do you want to load the style.css? wp_enqueue_style is a function to load the CSS. But you need a WordPress hooks and it depends where you want to load it.

    Please try to change your icon hover to this:

    .always-hamburger .guten-nav-menu.guten-element .gutenverse-hamburger-menu:hover i::before {
    background-image: url("https://192.168.2.35/wp-content/uploads/2022/11/Navi-Button5.svg");
}

    So the all code will be

    .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 i::before {
    background-image: url("https://192.168.2.35/wp-content/uploads/2022/11/Navi-Button5.svg");
}

    For the cropped logo please try to look at mobile menu logo setting. You can adjust the width and height logo. Use your logo dimension as values. Also you can remove the values and set the object fit to cover.
    https://prnt.sc/cWTpKqpT-ZUU
    https://prnt.sc/pYUX9j1lLLXA

    For the icon stick to right, you can adjust the row padding in dimension tab. You need to click the unlink sides to see all padding values.
    https://prnt.sc/dvJ6ksoPasxN
    https://prnt.sc/b-yDmL2UWkEr

    For your question about put custom icons in the Gutenverse Icon Library. Unfortunately there is no way at this time. There is no hook in there. Also we added it to the javascript script and the script is already built and minified. We will add this to feature request. It looks like this feature will be very useful. But we can’t confirm when the feature will be available.

    Thread Starter menschenschreck

    (@menschenschreck)

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

    Pradnya

    (@pradnyajegstudio)

    Hi menschenschreck,

    I assume you want to load the style on your frontend (the view that visitors can see) also for the editor. Please try to use this code and add it to functions.php. Change the_path_to/style.css to your css file path.

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

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

    For the text in the middle, do you want to align the text on the sidebar menu to the center?
    https://prnt.sc/3ewi6E8na5Eh

    Thread Starter menschenschreck

    (@menschenschreck)

    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.

    Pradnya

    (@pradnyajegstudio)

    Hi,

    You can try to update the code using this.

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

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

    For the menu text, please check your menu height. You can remove that value. The font size is bigger than the space. That’s why the text move down. If you want to set the text in the middle while use more height, you can set the item spacing top and bottom.
    https://prnt.sc/VwDGlKOUuIqH
    https://prnt.sc/cRfYaKUX_Pou

    This CSS is for the border. 2px for the width and #0000ff for the color.

    .always-hamburger .guten-nav-menu.guten-element .gutenverse-menu-wrapper .gutenverse-menu li:not(:last-child), .guten-nav-menu.guten-element .gutenverse-menu-wrapper .gutenverse-menu > ul li:not(:last-child) {
	border-bottom: 2px solid #0000ff;
}
    • This reply was modified 2 years, 4 months ago by Pradnya.
    Thread Starter menschenschreck

    (@menschenschreck)

    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.

    Pradnya

    (@pradnyajegstudio)

    Glad it all works out.
    Let us know if you have any other questions.

    Also if you have a moment, could you leave us a review and feedback of your experience using Gutenverse?

    It will help us a lot to grow and motivate us to release more exciting feature in the future.

    Thank you

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘Hamburger-Menu ALWAYS’ is closed to new replies.

Tags