How to move this Container to the top of the page

Question

All I've just finished reading http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/xml-manage.html#layout_markup_rearrange. Trying my best to answer this question before I come back here but nothing it tells me to do on there is working. I'm trying to move topbar.wrapper to the top of the page above everything. My current code is

<referenceContainer name="topbar.wrapper">  
    <container name="topbar.container" as="topbar_container" label="Page topbar Container"  htmlTag="topbar" htmlClass="page-topbar" before="-"/>
 </referenceContainer>
<referenceContainer name="page.wrapper">  
     <container name="page.top" as="page_top" label="After Page Header" after="header.container"/>
    <container name="footer-container" as="footer" before="before.body.end" label="Page Footer Container" htmlTag="footer" htmlClass="page-footer" />
</referenceContainer>

I dont know if i am missing something but i just cant get this to play ball.

Many Thanks

Answer 1

Many thanks to Ronak who helped me with the answer but I thought I would expand it in case anyone gets an error like me.

First of all, make sure the first line of your Reference container in default.xml looks like this

<container name="topbar.container" label="topbar" as="topbar" htmlTag="div" htmlClass="topbar">

Now got to your home.xml or whatever you call your main page layout and make sure the container you are trying to move to the top has a layout something like this

<container name="topbar.container" as="topbar_container" label="Page topbar Container" htmlTag="topbar" htmlClass="page-topbar" before="-"/>

now go back to your default.xml and input this anywhere inside of the body tags but outside of anything else.

<move element="topbar.container" destination="header.container" before="-"/>

Make sure your container name is the same on both pages or you will get a error or it just won't work, trust me it took me hours to work that out.

Answer 2

Use this to move your any element :

<move element="<element_name>" destination="<destination_element_name>"  before="-"/>

Answer 3

You can just use move, like @Ronak, explained.

Make sure you flush your cache after it to see the effect.

If it still does not work, then probably because your container does not contain any blocks. In this case it is not getting rendered.