Javascript 导航栏下的“从画布引导”菜单

如果你觉得我问的问题有点傻，请原谅我

我试图用引导NavBar和Off Canvas创建HTML页面，找到了与我想要的完全相同的页面。在现有的基础上，我需要一个额外的功能

若您查看此链接，您将看到页面顶部的导航栏和右侧的列表。当我们缩小页面尺寸时，导航栏将变成菜单图标，列表将消失。还将添加新按钮以显示隐藏列表。（请参见下面的大屏幕图像）

我需要的是移动在小屏幕上可见的链接/按钮，并将其添加到导航栏的左侧。Simmiler类图标，我们在小屏幕上为菜单设置的图标。（参见下面的小屏幕图像）

大屏幕

小屏幕

---

尝试使用按钮上的

向左拉

类，而不是默认的

向右拉

类

例如：

---

这种设计的缺陷是，用户单击按钮访问菜单后，由于菜单扩展，按钮不再可见。

您可以将切换按钮像这样放入导航栏

<div class="navbar-header">
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
       </button>
       <button type="button" class="navbar-toggle visible-xs pull-left" data-toggle="offcanvas">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
       </button>
       <a class="navbar-brand" href="#">Project name</a>
</div>

切换导航

---

非常感谢@Skelly。如何向左侧菜单图标添加填充？