Put image in a bootstrap menu

Navigation
1

How do I place an image in the right-hand corner of a menu bar with bootstrap. Below the code for my Layout (Master) 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    @Styles.Render("~/bundles/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/Scripts/Util.js")

</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">

        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @*@Html.ActionLink("Pedidos", "Index", "Home", null, new { @class = "navbar-brand" })*@
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

I did this, but the image was left, not right. 

..........
<div class="container">
            <a class="brand"><img src="~/Images/ache.jpg" /></a>
                <div class="navbar-header">
.............
    
asked by anonymous 20.08.2014 / 20:15

2 answers

4
  

Move the image above the navbar-header and associate it with navbar-right classes.

     

This places your image on the right in the desktop view, and   left on mobile devices because the menu button should   be the rightmost element.

     

link 

<nav class="navbar navbar-default" role="navigation">
  <a class="navbar-brand navbar-right" href="#">CesaStack</a>
  <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <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="collapse navbar-collapse">
      <!-- snip -->
  </div>
</nav>

Source: This SOEn response

    
20.08.2014 / 20:30
1

So: 

<div class="container">
    <div class="navbar-header">
        <a class="navbar-brand pull-right"><img src="~/Images/ache.jpg" /></a>
...
    
20.08.2014 / 20:30
Add and remove class How to remove the WordPress title from the panel title?