在Bootstrap移动菜单按钮内添加文本

Question

How to add a text inside bootstrap mobile menu button?

    <div class="sidebar-nav">
        <div class="navbar navbar-default" role="navigation">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                            </div>
            <div class="navbar-collapse sidebar-navbar-collapse collapse" aria-expanded="false" style="height: 1px;">
                <ul class="nav navbar-nav">
                    <li class="nav_bar_title"></li>

   <li class="page_item"></li>
                  </ul>
            </div><!--/.nav-collapse -->
        </div>
    </div>

Example, what i want to achieve:

Answer 1

you can add a list item just for the text and the rest for menu items:

 <li class="page_item class-for-styling-the-text">your text here</li>

and use the a certain class to style that element or use css :first-child selector.

hope that helps.

Answer 2

Something like this :

Bootply : https://www.bootply.com/JH4FMuvYMe

HTML

<div class="sidebar-nav">
    <div class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
                <span class="text">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
                        </div>
        <div class="navbar-collapse sidebar-navbar-collapse collapse" aria-expanded="false" style="height: 1px;">
            <ul class="nav navbar-nav">
                <li class="nav_bar_title"></li>

Css

span.text {
    float: left;
    margin-right: 30px;
}

.navbar-toggle .icon-bar{
      margin-left: auto;
    }

Answer 3

you can try this:

<div class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
          <div class="navbar-header">          
            <button  type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
              <span style="display:inline-block; margin:2px;">menu text</span>
              <span style="display:inline-block;">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              </span>
            </button>
          </div>
          <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li><a href="../index.html">Home</a></li>
              <li><a href="../about.html">About</a></li>
              <li><a href="../glass-services.html">Services</a></li>
              <li><a href="../contact.html">Contact</a></li>
            </ul>

          </div>
        </div>
</div>