Change dimension to enable nav-toggle before

Navigation
0

I'm making a website and I'm using bootstrap in it. I tested it on the phone and when it shows the menu, the menu is still the same as on the PC with only the smaller font. I wanted to show that button to open the menu on the phone, I think I have to lower the resolution for it to activate. Where do I do this in bootstrap ?

HTML 

<div id="custom-bootstrap-menu" class="navbar navbar-default " role="navigation">
            <div class="container-fluid">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><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 navbar-menubuilder">
                    <ul class="nav navbar-nav navbar-left">
                        <li><a href="<?php echo site_url();?>">Home</a></li>
                        <li><a href="<?php echo base_url('construtora');?>">A Construtora</a></li>
                        <li><a href="<?php echo base_url('area');?>">Áreas de Atuação</a></li>
                        <li><a href="<?php echo base_url('clientes');?>">Clientes</a></li>
                        <li><a href="<?php echo base_url('contato');?>">Contato</a></li>
                    </ul>
                </div>
            </div>

CSS 

.navbar-nav{
    border-top:1px solid #1C6597;
    border-bottom:1px solid #1C6597;
}

#custom-bootstrap-menu.navbar-default {
    font-size: 20px;
    border-width: 0px;
    border-radius: 0px;
    font-family: 'Dosis';
}
.navbar-default{
    background: none !important;
    border:0px !important;
    margin-top:30px;
}


.navbar-default .navbar-nav > li{
    margin-left:40px;
}
.navbar-default .navbar-nav > li > a, .navbar-default .navbar-nav > li > a:hover{
    color: rgba(28, 101, 151, 1);
}

#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:focus {
    color: rgba(28, 101, 151, 1);
    background-color: rgba(56, 56, 181, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-toggle {
    border-color: #3838b5;
}

#custom-bootstrap-menu.navbar-default .navbar-toggle .icon-bar {
    background-color: #3838b5;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover .icon-bar,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus .icon-bar {
    background-color: #3838b5;
}
    
asked by anonymous 06.01.2016 / 22:44

1 answer

0

I think you need to reference in your css, try to put: 

.navbar-toggle {
    padding: 4px 6px;
    font-size: 20px;
    color: #;
}
.navbar-toggle:focus,
.navbar-toggle:active {
    outline: 0;
}
    
04.03.2018 / 15:11
How to solve the 405 error method not allowed on the server? [closed] Error 403 Forbidden You do not have permission to access this document asp.net