Error in menu positioning ( viewed on mobile ) using Bootstrap

Asked

Viewed 253 times

0

I’m developing a website http://www.hobbyanimal.com.br/ is all correct when it comes to the display by PC. When I am viewing by mobile the menu does not appear the same as it appears on PC. It all comes together in a "box". This box is positioned on the left, when you can guess that the menu is there and click the sublinks open behind the logo.

This has happened to someone?

Thank you!

menu

  • Note that the error is in the positioning of your Logo and not in the menu, so I saw it works correctly. Put your code so that we can test and help you better, I saw on your site that the image "images/partners/partner_bg.png" is missing too....

  • It would be good for you to bring more content to your question, because once you fix your page it will no longer be possible to understand what error was happening and your question will be of no use to anyone but yourself.

1 answer

1


Your website is like this:

<div class="navbar-header" style="position:absolute; z-index:2;">
                    <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="index.html"><img    src="images/logo.png" alt="logo"></a>
                </div>

Exchange the position: absolute for position: relative It will fit according to the Layout, the way this you force the image to stay there regardless of what happens to the page.

Had stayed like this:

<div class="navbar-header" style="position:relative; z-index:2;">
                    <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="index.html"><img src="images/logo.png" alt="logo"></a>
                </div>

  • Thank you very much!

  • Is there any way to display the menu in a different way?

  • @Viniciusgonçalves if the answer solves the problem start then mark it as the answer, so the question will be closed. As for the menu, read the documentation that you will see that you can customize almost everything in the bootstrap, just handling the classes Nav-bar http://getbootstrap.com/components/

Browser other questions tagged menu

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