Header : two stacking elements?

[WaveLynx]

Hello- I have a tall logo and would like to place it lect to two rows of elements. See attached. How can I approach this?

[ruenel]

Hello Richard,

Thanks for writing in!

To accomplish what you have in mind, please create a bar with two containers in it. The first container will contain the image element and second one is where you will insert the search element, button element and the navigation inline element in that order.

Hope this helps. Please let us know how it goes.

[WaveLynx]

Hello - Thanks. I’ve tried this, but can’t figure out how to get the nav line to break and slide beneath the other elements. Thanks!

[ruenel]

Hi Richard,

Since the elements cannot be positioned using the flexbox option in the element settings, you can make use of the Global block element in the header instead. Go to Pro > Global Blocks and create a block that will display two rows for the buttons and the menu navigation. You can then use this block in the global block element that you will insert in the header.

Global Block:

 - Section
   - row
     - column
       - buttons
   - row
     - column
        - Navigation 

Header elements

- bar
    - container
      - image element
    - container
      - global block

Hope this helps.