html - 如何使图像栏与移动菜单保持在顶部？

Question

我已经从 http://html5up.net/prologue 下载了 HTML5 模板.该模板是响应式的，导航菜单在移动设备中保持在顶部，可以单击以显示菜单项。我想要实现的是在顶部包含图像，该图像将像移动 View 中的菜单一样保持固定。我尝试添加一个 div，如下所示:

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

但我无法实现我所需要的。图像保留在顶部但会阻止或隐藏菜单项。你能帮我实现这个目标吗？

下面的图片可以清楚地说明我要实现的目标:

当前网站:

我想要什么:

Answer 1

如果您希望它只在窄屏幕上运行，请执行以下操作:

在 /js/init.js 文件中找到 sidePanelToggle 对象并将带有按钮的 div 添加到其 html 属性

// ...
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>'
// ...