Widget left – Logo right – Menu below

Hey ZikomoWebdesign,

Thank you for the inquiry.

Did you add the css code provided in the documentation? The css code should allow you to move the position of the elements or change their order within the header.

// https://kriesi.at/documentation/enfold/example-of-widget-left-logo-right-menu-below/#toggle-id-2

Best regards,
Ismael

Hi,

Thank you for the update.

It is probably not working because the menu is positioned below the header. The Enfold > Header > Header Layout > Menu and Logo Position settings should be set to Logo left, Menu right.

Best regards,
Ismael

Hi,

Thank you for the info.

Are you sure that you have copied all of the css code from the documentation? Some of the styles are missing like the css that is supposed to be applied to the widget.

Try to remove the previous css code and replace it with this one.

// https://pastebin.com/vwtMD5zk

Please do not forget to purge the cache and temporarily disable the Performance > File Compression settings.

Or post the login details in the private field so that we could take a look in the dashboard.

Best regards,
Ismael

Hi,

Thank you for the info.

In the functions.php file, we just replaced the “ava_main_header” with the “ava_after_main_menu” hook to move the widget inside the proper container after the main menu. Please purge the cache or do a hard refresh before checking the page.

Best regards,
Ismael

Hi,

That should be possible with the following css code but you may need to also adjust the rest of the elements within the header container. Please look for the css using this selector..

.responsive #top #header #header_main .inner-container .main_menu

.. and add these properties..

	position: absolute;
	width: 110vw;
	bottom: -30px;
	left: -20vw;

Or just use this css code.

.responsive #top #header #header_main .inner-container .main_menu {
	order: 3;
	flex-basis: 100%;
	align-items: center;
	align-self: center;
	height: inherit !important;
	background: gold;
	justify-content: center;
	position: absolute;
	width: 110vw;
	bottom: -30px;
	left: -20vw;
}

Best regards,
Ismael

Hi,

Thank you for following up.

Try to replace the latest css code with this one to limit the width of main menu.

.responsive #top #header #header_main .inner-container .main_menu {
	order: 2;
	flex-basis: 100%;
	align-items: center;
	align-self: center;
	height: 42px;
	background: #00607b;
	justify-content: center;
	position: absolute;
	width: 100vw;
	bottom: -25px;
	left: 50%;
	transform: translate(-50%, 0);
}

Then use this css code adjust the maximum width of the inner container.

.responsive #top #header #header_main .inner-container .main_menu .avia-menu {
	max-width: 1600px;
}

Best regards,
Ismael