Change dimension to activate Nav-toggle before

Asked

Viewed 1,048 times

0

I’m making a website and I’m using bootstrap in it. I tested it on my phone and when it shows the menu, the menu is still the same as on the PC only with the smaller source. I wanted to show that button to open the menu on the phone, I think I have to decrease the resolution to activate. Where I do this on 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;
}
css twitter-bootstrap

  • Post the code Voce made so that we can analyze, by default the navbar performs this http://getbootstrap.com/components/#navbar after the comment <!-- Brand and toggle get grouped for better mobile display --!>

  • @Highlander Code added

  • In my browser it is normal : https://jsfiddle.net/708qb1qL/2/

1 answer

0

I believe 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;
}

Browser other questions tagged css twitter-bootstrap

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