How can I put the Image in the top-left corner, while still being responsive? - html

Question

I am new to Angular/Bootstrap and currently trying to put an image on top of the navigation bar in the top left corner. Using padding/margin could fix the problem with a normal resolution/static screen size, changing the size put the image elsewhere.
I have tried to use padding and margin, but as I said, it was not possible, to make it "sticky" in the top left corner, when changing the browser sice.
Also using the bootstrap classes, for example "pull-right" (just for test-cases) did not work.
My current code looks like:
<header>
<div class="cloud">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark $green static-top">
<div class="container">
<a class="navbar-brand" href="#">
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=a010291124bf" class="pull-right" alt="" width="431.27" height="55.35">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Impressum</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="first">
<h1>TestSite</h1>
</div>
</header>
I expected an image in the top left corner that is responsively staying there while changing browsersizes/devices

Answer 1

Please check this code to see, whether this is the desired result. Fully working demo is available here
Main Changes made on your code is.
added CSS class bg-dark and removed $green static-top on nav. <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
fixed the width of brand image to 50%, using css. This can be changed to some other value.
removed width and height attributes from img tag.
.navbar-brand img{
width: 50%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=a010291124bf">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Impressum</a>
</li>
</ul>
</div>
</div>
</nav>
</div>