如何使图像栏保持在手机菜单的最上方？

Question

I have downloaded the HTML5 template from http://html5up.net/prologue . The template is responsive, and the navigation menu stays on top in mobile to be clicked to show the menu items. What I am trying to achieve is to include the image at top that would stay fixed like the menu in the mobile view. I have tried adding a div as below:

<div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index:99;">
<img src="nameofimagefile"/>
</div>

But I am not able to achieve what I need. The image stays on top but blocks or hides the menu items. Could you help me in achieving this?

The following images may make it clear on what I am trying to achieve:

Present Website:

What I Would Like:

Answer 1

If you want it works only on a narrow screen do this:

In /js/init.js file find sidePanelToggle object and add to its html property your div with buttons

// ...
sidePanelToggle: {
                    breakpoints: 'narrower',
                    position: 'top-left',
                    side: 'top',
                    height: '4em',
                    width: '5em',
                    html: '<div data-action="toggleLayer" data-args="sidePanel" class="toggle"></div>' + '<div style="position: fixed; display: inline; top: 0; right: 5px; color: white">Your buttons here</div>'
// ...

Answer 2

change the

#main section.cover {
    padding: 0;   /*for all the @media css*/
}

and then add image tag before the h2 tag within header tag

It will work !