Dropdown Menu Bootstrap bug when clicked

Asked

Viewed 44 times

-3

I have implemented a basic dropdown (bootstrap) menu on my website. It works normally when clicked at the beginning of the page, however, if I scroll down a little and go back to the top of the page, and click again on it, it, for some reason I have no idea why, increases the width of the entire site, and the menu is played to the right corner.. Follow print to facilitate understanding:
inserir a descrição da imagem aqui

This print is the menu when clicked without ever scrolling through the page.
inserir a descrição da imagem aqui

And this print is the menu clicked right after taking a slight tumble down on the site.
If anyone could help, I’d be much obliged!!

the menu code is this:

    <div class="dropdown" style="padding-top: 2%; width:100%; min-width:250px; padding-right:7%; ">
    
        <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="border:none; background-color: transparent;">



        <div class="btn btn-default btn-lg" style=" margin-right: 0%; border:solid; color:#C4C4C4;  border-radius:50%;">
        
        <span class="glyphicon glyphicon-nav" aria-hidden="true"></span</button>

        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton" style="width:100%; margin-right:10%; ">
            <a class="dropdown-item" href="{{ 'novo'|page }}" style="background-image: linear-gradient(to bottom right, #FFFFFF, #EDEDED);"><h2>Home</h2></a>
            <a class="dropdown-item" href="{{ 'ofertasnovo'|page }}" style="background-image: linear-gradient(to bottom right, #FFFFFF, #EDEDED);"><h2>Ofertas</h2></a>
            <a class="dropdown-item" href="{{ 'credenciadasnovo'|page }}" style="background-image: linear-gradient(to bottom right, #FFFFFF, #EDEDED);"><h2>Credenciadas</h2></a>
        </div>
    </div>

Dit: I did not understand why they gave 3 downvotes on the question, if they told me why I would fix..

html css menu
  • 2

    Can you tell us what the bootstrap version is? By the classes I assume it is 3.x, can you confirm? Is there anywhere you can upload your website so we can view it?

  • is version 4.0.0, the website is uploaded here: http://fasttire.com.br/new

  • 1

    Check out the dropdown styles. It seemed to me that some of the defined inline styles seem to be affecting the dropdown, possibly the button showing the dropdown is the culprit, because when I switched its markup to the bootstrap documentation standard the problem did not occur again.

  • Mmm got it, I’m going to press the button!!! THANK YOU very much for the reply!!!!!!!

1 answer

0

Bootstrap prioritizes your default style. This error may be due to some style change you made in your CSS, or conflicting with some other framework you are using (if you are).

Browser other questions tagged html css menu

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