Trouble scaling down responsive logo image on navbar with Bootstrap

Question

I am building a travel website with Bootstrap Studio -> http://stackoverflowquestion.bss.design/

It's going well so far, except for one issue: when reducing the screen size, while the logo does decrease in size, it takes up the whole navbar and pushes the burger menu down.

Now, my initial instinct is to remove img-responsive and manually enter @media queries in the CSS so that the image is the perfect size for every screen type. However I'm pretty sure that this is not the best or most efficient way of solving the issue.

Here is my nav HTML:

<nav class="navbar navbar-default navbar-fixed-top navbar-fixed-top transparent">
<div class="container-fluid">
    <div class="navbar-header">
        <a href="index.html" class="navbar-brand navbar-link" id="logo-link"><img src="Logo_SmallCompass.png" height="100px" class="img-responsive" id="logo" /></a>
        <button data-toggle="collapse" data-target="#navcol-1" class="navbar-toggle collapsed"><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" id="navcol-1">
        <ul class="nav navbar-nav navbar-right" id="right-links">
            <li role="presentation"><a href="safaris.html" class="text-lowercase">hello </a></li>
            <li role="presentation"><a href="#" class="text-lowercase">test </a></li>
            <li role="presentation"><a href="#" class="text-lowercase">bye </a></li>
            <li role="presentation"><a href="#" class="text-lowercase">about </a></li>
            <li role="presentation"><a href="#" class="text-lowercase">Contact </a></li>
        </ul>
    </div>
</div>

Any help or advice is greatly appreciated!

Many thanks in advance

Answer 1

Just add 1 media query like this:

@media (max-width: 600px) {
    a.navbar-brand.navbar-link {
        width: 80%;
    }
}

This will make sure that the hamburger will stay at the top right.