Mobile menu – first logo – then menu – all centered

Hey vonweiler,

I checked your site, the logo and menu looks perfectly centered.

Please let us knwo if you have more questions, we are happy to help :)

Best regards,
Vinay

Hi,

To make the logo center menu below in mobile version:

1. Hide the mobile menu and center the logo using the below CSS.

@media only screen and (max-width: 767px) {
#advanced_menu_toggle, #advanced_menu_hide  {
   display: none !important;
}
.logo a > img {
    left: 50%;
    transform: translateX(-50%);
}
}

/*Show only in mobile or desktop*/

@media only screen and (min-width: 769px) {
.only_mobile { display: none !important; }}

@media only screen and (max-width: 768px) {
.only_desktop { display: none !important; }}

2. Please enable the custom css class field: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

3. Create a header widget area by applying the code provided in this link to functions.php http://kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/

4. Please enable debug mode by adding the code provided in this link to your functions.php file which can be accessed from Appearance > Editor http://kriesi.at/documentation/enfold/enable-advanced-layout-builder-debug/

This let’s you view the shortcode for all the page elements.

5. Create a new page for testing purpose and add a fullwidth submenu element. We need to show the fullwidth submenu only in mobile to do so please add the class name “only_mobile” in custom css class name option.

7. Copy the shortcode which should look similar to the below code to Appearance > Header .

[av_submenu which_menu='center' menu='' position='center' color='main_color' sticky='true' mobile='disabled' mobile_submenu='']
[av_submenu_item title='Menu Item 1']
[av_submenu_item title='Menu Item 2']
[/av_submenu]

Best regards,
Vinay