title: How to change the position of Bootstrap Navigation Bar parent menu item icon at mobile view?
body: <p>I am looking for a way to change the position of the <em>bootstrap navigation menu bar parent menu icon,</em> when open in mobile view.</p>
  
  <p>Currently the menu header contains right-arrow-down icon at the end of header name like below.</p>
  
  <p><a href="https://i.stack.imgur.com/kv4T2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kv4T2.png" alt="enter image description here"></a></p>
  
  <p>My requirement is to convert the highlighted right-arrow-down icon to left-arrow icon and change the icon position to start of parent 
  header menu text and also to change the background color (gray) of parent menu item on mouse hover like below.</p>
  
  <p><a href="https://i.stack.imgur.com/6sWGt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6sWGt.png" alt="enter image description here"></a></p>
  
  <p>below is the navigation menu bar HTML code:</p>
  
  <pre><code>&lt;div class="collapse navbar-collapse" id="navbar"&gt;
  &lt;ul class="nav navbar-nav"&gt;
      &lt;li class="nav-item" style="background-color: #f5f5f5; height:33px; padding-top:8px;"&gt;
          &lt;label class="label d-md-block d-lg-none"&gt;Welcome, abc&lt;/label&gt;
      &lt;/li&gt;
      &lt;li class="nav-item dropdown"&gt;
          &lt;a href="#" class="nav-link dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;ACCOUNTS&lt;/a&gt;
          &lt;div class="dropdown-menu"&gt;
              &lt;a class="dropdown-item"&gt;&lt;span class="k-icon k-i-plus"&gt;&lt;/span&gt;New Prospect&lt;/a&gt;
              &lt;a class="dropdown-item"&gt;Accounts&lt;/a&gt;
              &lt;a class="dropdown-item"&gt;Prospects&lt;/a&gt;
              &lt;a class="dropdown-item"&gt;Account Reports&lt;/a&gt;
              &lt;a class="dropdown-item"&gt;My Account Reports&lt;/a&gt;
              &lt;a class="dropdown-item"&gt;&lt;span class="k-icon k-i-star"&gt;&lt;/span&gt; Favorites&lt;/a&gt;
          &lt;/div&gt;
      &lt;/li&gt;
      &lt;li class="nav-item dropdown"&gt;
          &lt;a href="#" class="nav-link dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;CONTACTS&lt;/a&gt;
          &lt;div class="dropdown-menu"&gt;
              &lt;a class="dropdown-item"&gt;Item 1&lt;/a&gt;
              &lt;a class="dropdown-item"&gt;&lt;span class="k-icon k-i-star"&gt;&lt;/span&gt; Favorites&lt;/a&gt;
          &lt;/div&gt;
      &lt;/li&gt;
      &lt;li class="nav-item dropdown"&gt;
          &lt;a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;LEADS&lt;/a&gt;
          &lt;div class="dropdown-menu"&gt;         
              &lt;a class="dropdown-item"&gt;&lt;span class="k-icon k-i-star"&gt;&lt;/span&gt; Favorites&lt;/a&gt;
          &lt;/div&gt;
      &lt;/li&gt;
      &lt;li class="nav-item dropdown"&gt;
          &lt;a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;OPPORTUNITIES&lt;/a&gt;
          &lt;div class="dropdown-menu"&gt;
              &lt;a class="dropdown-item"&gt;Item 1&lt;/a&gt;
          &lt;/div&gt;
      &lt;/li&gt;
      &lt;li class="nav-item dropdown"&gt;
          &lt;a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;ACTIVITIES&lt;/a&gt;
          &lt;div class="dropdown-menu"&gt;
              &lt;a class="dropdown-item"&gt;Item 1&lt;/a&gt;
          &lt;/div&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>It might required to override the existing bootstrap classes to acheive this but I am not sure which class will work for me.
  I have tried to look for the ways to acheive this using Bootstrap CSS online but not found any example similar to my requirement. Appreciate your help.</p>
  
  <p><strong>Update:</strong>
  here is the mockup drop down of the modules from pressing the hamburger button in mobile view -</p>
  
  <p><a href="https://i.stack.imgur.com/tMTj4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tMTj4.png" alt="enter image description here"></a></p>
  
  <p>this would be the layout once one of the modules is selected (Opportunities is the module in this example) - </p>
  
  <p><a href="https://i.stack.imgur.com/ns2EI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ns2EI.png" alt="enter image description here"></a></p>
  
  <p><strong>Desktop View:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/HB9VN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HB9VN.png" alt="enter image description here"></a></p>