CHANGE NUMBER OF COLUMNS IN HEADER ROW

I want to have three columns in the top bar of my mobile nav menu. How can I do this? I’ve read the documentation – it just says that it is possible, but doesn’t show how.

Hello,

Please navigate to Woodmart > Header builder http://prntscr.com/iyd2pe

Choose the proper header type (your current) http://prntscr.com/iyd333

Switch to the mobile view of your header http://prntscr.com/iyd3v3

And use this row http://prntscr.com/n6k531

Best Regards

I wanted two rows with multiple columns in the mobile view – is that not possible?

Hello,

No, there is no option, however, there is a way out: you can create HTML blocks with any number of columns and insert in the columns of the Header builder https://xtemos.com/docs/woodmart/html-blocks-2/#header_builder

Best Regards

@tomclayson

You can but is a custom work. If you want to proceed do it at your own risk.

First install this plugin

https://wordpress.org/plugins/code-snippets/

Add a new snippet give it a name and paste the code below.

function woodmart_header_sceleton_override() {
	$sceleton_structure = array (
  'id' => 'root',
  'type' => 'root',
  'title' => 'Header builder',
  'content' =>
  array (
    'top-bar' =>
    array (
      'id' => 'top-bar',
      'type' => 'row',
      'title' => 'Top bar',
      'content' =>
      array (
        'column5' =>
        array (
          'id' => 'column5',
          'type' => 'column',
          'title' => 'Mega column',
          'class' => 'whb-col-left',
          'desktop_only' => true
        ),
        'column6' =>
        array (
          'id' => 'column6',
          'type' => 'column',
          'title' => 'Mega column',
          'class' => 'whb-col-center',
          'desktop_only' => true,
        ),
        'column7' =>
        array (
          'id' => 'column7',
          'type' => 'column',
          'title' => 'Mega column',
          'class' => 'whb-col-right',
          'desktop_only' => true,
        ),
        'column_mobile21' =>
        array (
          'id' => 'column_mobile21',
          'type' => 'column',
          'title' => 'Mobile column',
          'class' => 'whb-mobile-left',
          'mobile_only' => true,
        ),
        'column_mobile31' =>
        array (
          'id' => 'column_mobile31',
          'type' => 'column',
          'title' => 'Mobile column',
          'class' => 'whb-mobile-center',
          'mobile_only' => true,
        ),
        'column_mobile41' =>
        array (
          'id' => 'column_mobile41',
          'type' => 'column',
          'title' => 'Mobile column',
          'class' => 'whb-mobile-right',
          'mobile_only' => true,
        ),
      ),
    ),
    'general-header' =>
    array (
      'id' => 'general-header',
      'type' => 'row',
      'title' => 'Main header',
      'content' =>
      array (
        'column8' =>
        array (
          'id' => 'column8',
          'type' => 'column',
          'title' => 'Mega column',
          'class' => 'whb-col-left',
          'desktop_only' => true,
        ),
        'column9' =>
        array (
          'id' => 'column9',
          'type' => 'column',
          'title' => 'Mega column',
          'class' => 'whb-col-center',
          'desktop_only' => true,
        ),
        'column10' =>
        array (
          'id' => 'column10',
          'type' => 'column',
          'title' => 'Mega column',
          'class' => 'whb-col-right',
          'desktop_only' => true,
        ),
        'column_mobile2' =>
        array (
          'id' => 'column_mobile2',
          'type' => 'column',
          'title' => 'Mobile column',
          'class' => 'whb-mobile-left',
          'mobile_only' => true,
        ),
        'column_mobile3' =>
        array (
          'id' => 'column_mobile3',
          'type' => 'column',
          'title' => 'Mobile column',
          'class' => 'whb-mobile-center',
          'mobile_only' => true,
        ),
        'column_mobile4' =>
        array (
          'id' => 'column_mobile4',
          'type' => 'column',
          'title' => 'Mobile column',
          'class' => 'whb-mobile-right',
          'mobile_only' => true,
        ),
      ),
    ),
    'header-bottom' =>
    array (
      'id' => 'header-bottom',
      'type' => 'row',
      'title' => 'Header bottom',
      'content' =>
      array (
        'column11' =>
        array (
          'id' => 'column11',
          'type' => 'column',
          'title' => 'Mega column',
          'class' => 'whb-col-left',
          'desktop_only' => true,
        ),
        'column12' =>
        array (
          'id' => 'column12',
          'type' => 'column',
          'title' => 'Mega column',
          'class' => 'whb-col-center',
          'desktop_only' => true,
        ),
        'column13' =>
        array (
          'id' => 'column13',
          'type' => 'column',
          'title' => 'Mega column',
          'class' => 'whb-col-right',
          'desktop_only' => true,
        ),
        'column_mobile5' =>
        array (
          'id' => 'column_mobile5',
          'type' => 'column',
          'title' => 'Mobile column',
          'class' => 'whb-col-mobile',
          'mobile_only' => true,
        ),
      ),
    ),
  ),
);
return $sceleton_structure;
}

add_filter( 'woodmart_header_sceleton', 'woodmart_header_sceleton_override', 99);

Click save and activate.

I repeat do it at your own risk, can’t guarantee that it will work flawlessly.

@tomclayson

Hello,

Please do any testing in the child theme and make site backups

Best Regards

[Author]

Posts