Place image in bootstrap menu

Asked

Viewed 9,397 times

1

As I put an image in the right corner of a menu bar with bootstrap. Below the code of 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 that, but the image was left and not right.

..........
<div class="container">
            <a class="brand"><img src="~/Images/ache.jpg" /></a>
                <div class="navbar-header">
.............
jquery css asp.net-mvc-5 twitter-bootstrap

2 answers

4


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

This puts your image on the right side of the view on desktops, and goes left on mobile devices as the menu button should be the rightmost element.

http://jsfiddle.net/KHtU4/embedded/result/

<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 response from Soen

1

Thus:

<div class="container">
    <div class="navbar-header">
        <a class="navbar-brand pull-right"><img src="~/Images/ache.jpg" /></a>
...

  • Both answers worked. I’ll mark one, but I consider both correct.

Browser other questions tagged jquery css asp.net-mvc-5 twitter-bootstrap

You are not signed in. Login or sign up in order to post.