Logo is not positioned correctly on the mobile

Question

I am developing a site and I came across an error in which the logo is not displayed correctly when the site is opened on mobile, even in Responsive Design Mode Firefox it is displayed the way I wish, but when opening on the phone appears otherwise, instead of logo "drain" to the left of my navigation menu and stay at the top of the page, it gets below the navigation menu.

Follow the link so you can see the html: http://primerproducoes.com/primernew/site/

As it is on the cell phone: https://i.stack.Imgur.com/6twHm.jpg

The desired result would be this: https://i.stack.Imgur.com/fM7QN.png

I tried to change the width of the object that would be the most obvious to do but it does not change anything.

Thank you for your attention.

Answer 1

Your problem is that you did not follow the documentation of Bootstrap’s Navbar, now I believe that you will only manage it in the right way...

Behold

My tip is to remove the float when the screen is smaller than 992px using a media querie

@media screen and (max-width:992px) {
    .navbar-brand {
        float: inherit;
    }
}

Answer 2

Good afternoon,

I did a test setting max-width and it seems to have worked the way you’d like it to.

<a class="navbar-brand page-scroll;" href="#page-top" style="max-width: 260px;">
    <img src="images/logo2.png" alt="Primer Produções HD Logo" id="logo">
</a>

Since you only want to change the way it appears on mobile, you can add these lines to your CSS:

@media (max-width: 576px) {
    .navbar-header .navbar-brand {
        max-width:260px;
    }
}

I hope it helps.