Dropdown menu does not fit the screen

Navigation
0

I have a dropdown button that serves as the site menu, but it is in the right corner of the site and ends up leaving the screen, follow the problem:

Iwantittostayinsidethescreenwithoutcreatingahorizontalscrollbarbecauseofthemenu.Thesiteisresponsive,soincaseithastofitthescreen.

Followthecode:html:

<divclass="dropdown">
                        <button type="button" class="botao" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                            <div class="botao_dropdown">
                                <i class="fa fa-bars" style="font-size: 1.5em;"></i>
                            </div>
                        </button>
                        <ul class="dropdown-menu estilo_dropdown" aria-labelledby="dropdownMenu1">
                            <li class="opcoes">
                                <a href="<?php print base_url(); ?>social">A&ccedil;&otilde;es Sociais</a>
                            </li>
                            <li class="segundo_submenu">
                                <a href="<?php print base_url(); ?>blog">Blog</a>
                            </li>
                            <li class="segundo_submenu">
                                <a href="<?php print base_url(); ?>contato">Contato</a>
                            </li>
                            <li class="segundo_submenu">
                                <a href="<?php print base_url(); ?>educacional">Espa&ccedil;o Educacional</a>
                            </li>
                            <li class="segundo_submenu">
                                <a href="<?php print base_url(); ?>eventos">Eventos Sociais</a>
                            </li>
                            <li class="segundo_submenu">
                                <a href="<?php print base_url(); ?>galeria_fotos">Galeria de Fotos</a>
                            </li>
                            <li class="segundo_submenu">
                                <a href="<?php print base_url(); ?>institucional">Institucional</a>
                            </li>
                        </ul>
                    </div>

CSS: 

.dropdown-menu>li>a {

  color: $branco;

  font-size: 15px;

  padding: 0.7em;

  padding-left: 1em;

}

.dropdown-menu>li>a:hover {

  color: $laranjado;

  font-size: 15px;

  padding: 0.7em;

  padding-left: 1em;

}

.open>.dropdown-menu {

  width: 20em;

}

.estilo_dropdown {

  @extend .gradiente;

  li {

    color: $laranjado;

  }

}

.estilo_dropdown:hover {

  background-color: $branco!important;

  li {

    color: $laranjado;

  }

}
    
asked by anonymous 30.12.2015 / 11:57

1 answer

1

Some points that may be making your layout not work as expected. Probably only this will not solve your problem completely, but it will help you solve.

Position element dropdown-menu relative to element dropdown 

.dropdown{
    position:relative;
}
.dropdown-menu{
    position:absolute;
    top:0px; /* distancia dos botoes */
    right:0;
    width: 90vw; /* vw = viewport width - 90% do tamanho da tela*/
}

Warning: vw = viewport width and works in IE9 or higher.

    
29.03.2016 / 03:40
getView () method is not called in the Array Adapter Add product value for purchase