To remove the blue color on navbar collapse please add .navbar-dark class to your navbar. This will overwrite the default color for links to white. Please see my snippet: https://mdbootstrap.com/snippets/jquery/marcin-luczak/2948018

Regards, Marcin

the blue color come from here

div.sec1 nav.navbar div.container-fluid button.navbar-toggler:hover .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(66, 133, 244, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"); }

i just need to find how to give color to the hamburger with affetcing the .navbar-toggler-icon class

<!-- Navigation -->
    <nav class="navbar navbar-trans navbar-expand-lg fixed-top py-3">
        <div class="container-fluid">

            <a href="#inicio" class="navbar-brand mx-2"><img src="img/logo.png" alt=""></a>

            <button type="button" data-toggle="collapse" data-target="#navbarResponsive" class="navbar-toggler">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item mx-3"><a href="#inicio" class="nav-link btnfos btnfos-2 text-uppercase">inicio</a></li>
                    <li class="nav-item mx-3"><a href="#sobre" class="nav-link btnfos btnfos-2 text-uppercase">sobre</a></li>
                    <li class="nav-item mx-3"><a href="#servicos" class="nav-link btnfos btnfos-2 text-uppercase">serviços</a></li>
                    <li class="nav-item mx-3"><a href="#portefolio" class="nav-link btnfos btnfos-2 text-uppercase">portefolio</a></li>
                    <li class="nav-item mx-3"><a href="#contactos" class="nav-link btnfos btnfos-2 text-uppercase">contactos</a></li>                   
                </ul>
            </div>

        </div>
    </nav>
    <!-- End Navigation -->


/* navbar */

div.sec1 nav.navbar { z-index: 100; } div.sec1 nav.navbar div.container-fluid a.navbar-brand img { width: 12vw;height: auto; } div.sec1 nav.navbar div.container-fluid a.navbar-brand img:hover { opacity: 0.9; }

/* navbar collapse propriedades do hamburger */ div.sec1 nav.navbar div.container-fluid button.navbar-toggler .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"); } div.sec1 nav.navbar div.container-fluid button.navbar-toggler:hover .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(66, 133, 244, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"); }

/* propriedades dos links */ div.sec1 nav.navbar div.container-fluid div.collapse ul.navbar-nav li.nav-item a.nav-link { font-family: 'Nunito', sans-serif;font-size: 1rem; font-weight: 600;letter-spacing: 1px;color: #ffffff;-webkit-transition: all 280ms ease-in-out; }

div.sec1 nav.navbar div.container-fluid div.collapse ul.navbar-nav li.nav-item a.btnfos { display: block;position: relative; } div.sec1 nav.navbar div.container-fluid div.collapse ul.navbar-nav li.nav-item a.btnfos:hover { color: #4285f4; } .btnfos-2:after, .btnfos-2:before { -webkit-backface-visibility: hidden;backface-visibility: hidden;border: 1px solid rgba(255, 255, 255, 0);bottom: 0px; content: " ";display: block;margin: 0 auto;position: relative;-webkit-transition: all 280ms ease-in-out;transition: all 280ms ease-in-out;width: 0; } .btnfos-2:hover:after, .btnfos-2:hover:before { -webkit-backface-visibility: hidden;backface-visibility: hidden;border-color: #ffffff; -webkit-transition: width 350ms ease-in-out;transition: width 350ms ease-in-out;width: 100%; } .btnfos-2:hover:before { bottom: auto;top: 0;width: 100%; }