meteoros free asked 1 year ago


When the navbar is collpase (at 1200px) and when i press the hamburger links should appear in uppercase and white color.

Actual behavior But when i press the hamburger link appear in blue color and lowercase first

Resources (screenshots, code snippets etc.) https://www.4shared.com/photo/oKKUvKoEea/2021-03-19_09-08-53.html


Marcin Luczak staff commented 1 year ago

Hi,

I cannot reproduce your issue nor see anything on your pasted gif. Could you please create a snippet or paste a video showing your problem?

Regards, Marcin


meteoros free commented 1 year ago

Hi i'm sory that is a video in gif....check this link i think it's better https://youtu.be/Y6aPXsh2YE0...I've check that i was giving a proprety to nav.navbar div.container-fluid div.collapse ul.navbar-nav li.nav-item a.nav-link { text-transform: uppercase; } and when the navbar breaks at 1200px the link first appear in lowercase and blue color instead of uppercase and white color.....i changed the text to uppercase in html but the color is still there...


Marcin Luczak staff answered 1 year ago


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


meteoros free answered 1 year ago


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


meteoros free commented 1 year ago

it's not i'm sory i just comment and stil comes blue link first...


meteoros free answered 1 year ago


<!-- 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%; }



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: Desktop
  • Browser: firefox
  • OS: win 10
  • Provided sample code: No
  • Provided link: Yes