css - Positioning Logo in header using bootstrap -


this question exact duplicate of:

i trying position logo @ top left, inside navbar.

  1. my logo not respond when try position far-left of navbar using 'margin-right'.

    1. when position logo left, pushing menu out right middle of navbar.

could give me advice?

picture

thank you.

<!doctype html>  <html lang="en">    <head>      <meta charset="utf-8">      <meta http-equiv="x-ua-compatible" content="ie=edge">      <meta name="viewport" content="width=device-width, initial-scale=1">      <!-- above 3 meta tags *must* come first in head; other head content must come *after* these tags -->      <title>arabella hill</title>        <!-- bootstrap -->      <link href="css/bootstrap.min.css" rel="stylesheet">          <!-- html5 shim , respond.js ie8 support of html5 elements , media queries -->      <!-- warning: respond.js doesn't work if view page via file:// -->      <!--[if lt ie 9]>        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>      <![endif]-->    </head>    <body>    <div class="navbar navbar-default navbar-fixed-top" role="navigation">      <div class="container-fluid">      <div class="navbar-header">          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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>          <a class="navbar-brand" href='#'><img src="img/arabella.png" class="img-responsive" img style="max-width:300px; margin-top:-80px; margin-right: 100px;"></a>      </div>      <div class="navbar-collapse collapse" id="navbar-collapse">        <ul class="nav navbar-nav navbar-right">          <li><a href='#'>home</a></li>          <li><a href='#'>about</a></li>          <li class="dropdown">              <a href='#' class="dropdown-toggle" data-toggle="dropdown">themes<b class="caret"></b></a>          <ul class="dropdown-menu">            <li class="dropdown-header">admin & dashboard</li>            <li><a href="#">admin 1</a></li>            <li><a href="#">admin 2</a></li>          </ul>          </li>        </ul>      </div>    </div>   </div>        <!-- jquery (necessary bootstrap's javascript plugins) -->      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>      <!-- include compiled plugins (below), or include individual files needed -->      <script src="js/bootstrap.min.js"></script>    </body>  </html>

have tried using "margin-left" negative value?

... margin-top:-80px; margin-left:-20px; ...

you may need alter value suit image dimensions.


Comments

Popular posts from this blog

php - Permission denied. Laravel linux server -

google bigquery - Delta between query execution time and Java query call to finish -

python - Pandas two dataframes multiplication? -