title: How to Move Bing Maps Menu to the Right side of Screen
body: <p>I'm using the Bing Maps API, which adds a menu bar to the top left of the screen: 
  <a href="https://i.stack.imgur.com/5QbbJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5QbbJ.png" alt="menu bar on left"></a></p>
  
  <p>I would like to mirror how it is now and have the bar on the right, with the compass furthest to the right, the zoom next, and the birds eye menu next.  The current HTML is: </p>
  
  <pre><code>&lt;div class="MicrosoftNav MapTypeId_be"&gt;
      &lt;div class="OverlaysTL"&gt;
          &lt;div class="NavBar_compassControlContainer"&gt;
              &lt;a class="NavBar_button NavBar_toolButton NavBar_rotateLeft" href="#" title="Rotate left" uici="NB.CS.RotateLeft" style="visibility: hidden;"&gt;
              &lt;/a&gt;
              &lt;a href="#" title="Click to pan in any direction" uici="NB.CS.PanControl" class="NavBar_compass NavBar_compassFlat"&gt;N&lt;/a&gt;
              &lt;a class="NavBar_button NavBar_toolButton NavBar_rotateRight" href="#" title="Rotate right" uici="NB.CS.RotateRight" style="visibility: hidden;"&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="NavBar_zoomControlContainer"&gt;
              &lt;div class="NavBar_zoomDrop" style="position: absolute; display: none;"&gt;
                 &lt;div class="NavBar_zoom"&gt;
                     &lt;div class="NavBar_zoomBar" style="position: absolute; overflow: hidden;"&gt;
                         &lt;div class="NavBar_zoomBarBg"&gt;&lt;/div&gt;
                         &lt;div class="NavBar_zoomSlider" title="Move slider to zoom in or out" style="top: 97px;"&gt;&lt;/div&gt;
                     &lt;/div&gt;
                 &lt;/div&gt;
             &lt;/div&gt;
             &lt;a class="NavBar_button NavBar_toolButton NavBar_zoomOut" href="#" title="Zoom out" uici="NB.ZC.ZoomOut"&gt;&lt;/a&gt;
             &lt;a class="NavBar_button NavBar_toolButton NavBar_zoomIn" href="#" title="Zoom in" uici="NB.ZC.ZoomIn"&gt;&lt;/a&gt;
         &lt;/div&gt;
         &lt;div class="NavBar_modeSelectorControlContainer"&gt;
             &lt;span class="NavBar_separator"&gt;&lt;/span&gt;
             &lt;span class="NavBar_button NavBar_typeButton"&gt;
                 &lt;a class="NavBar_typeButtonLabel NavBar_MapType_be" href="#"&gt;Bird's eye&lt;/a&gt;
                 &lt;span class="separator"&gt;&lt;/span&gt;
                 &lt;a class="NavBar_dropIconContainer" href="#"&gt;
                     &lt;span class="NavBar_dropIcon"&gt;&lt;/span&gt;
                 &lt;/a&gt;
             &lt;/span&gt;
         &lt;/div&gt;
         &lt;span style="display: block; height: 0px; width: 0px; line-height: 0; font-size: 0px; clear: both;"&gt;&lt;/span&gt;
     &lt;/div&gt;
     &lt;span style="display: block; height: 0px; width: 0px; line-height: 0; font-size: 0px; clear: both;"&gt;&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Because of this I tried the following CSS: </p>
  
  <pre><code>#map-canvas &gt; div &gt; div.MicrosoftNav.MapTypeId_be &gt; div{
      right: 0;
      position: absolute;
  }
  </code></pre>
  
  <p>This resulted in: 
  <a href="https://i.stack.imgur.com/pYKnp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pYKnp.png" alt="Menubar with attempted CSS"></a></p>
  
  <p>what would I have to do to get the mirror of the original?</p>