Problem changing menu colors with bootstrap-less 3.3.7

1

I'm doing a site with HTML5 and bootstrap-less everything works normally but I needed to change some colors in the navbar menu and I know I can do it through variables.less inside this file I navigate to the menu part where I copy all the code related to the menu that I want to edit and paste into my file .less but it does not work I do not want to have to use !important to change the menu being that I know I can do this only by moving the variables in the less that comes in bootsrap this is the code less of the menu LESS:

@navbar-default-color:             #fff;
@navbar-default-bg:                #f8f8f8;
@navbar-default-border:            darken(@navbar-default-bg, 6.5%);

//* Navbar links*/
@navbar-default-link-color:                #fff;
@navbar-default-link-hover-color:          #fff;
@navbar-default-link-hover-bg:             transparent;
@navbar-default-link-active-color:         #fff;
@navbar-default-link-active-bg:            darken(@navbar-default-bg, 6.5%);
@navbar-default-link-disabled-color:       #fff;
@navbar-default-link-disabled-bg:          transparent;

/* Navbar brand label*/
@navbar-default-brand-color:               @navbar-default-link-color;
@navbar-default-brand-hover-color:         darken(@navbar-default-brand-color, 10%);
@navbar-default-brand-hover-bg:            transparent;

/* Navbar toggle*/
@navbar-default-toggle-hover-bg:           #fff;
@navbar-default-toggle-icon-bar-bg:        #fff;
@navbar-default-toggle-border-color:       #fff;

Even though I change the values it does not change on my site notice that I left everything white to test and my site does not change:

Thisismymenu:

<navclass="navbar navbar-default">
        <div class="container text-center">
            <div class="row">
                <div class="box-menu">
                    <div class="col-md-3">
                        <img src="assets/images/logo-santa-clara-eco.png" class="img-responsive" alt="Santa Clara EcoResort" />
                    </div>

                    <div class="col-md-6 hidden-xs hidden-sm">
                        <ul class="list-unstyled list-inline contact-info">
                            <li class="list"><a href="#"><i class="fa fa-map-marker" aria-hidden="true"></i>Rod SP 215 Km 197 - Dourado - SP</a></li>
                            <li class="list"><a href="tel:551633454004"><i class="fa fa-phone" aria-hidden="true"></i>+55 (16) 3345 4004</a></li>
                            <li class="list"><a href="http://santaclaraecoresort.com.br/contato.php"><i class="fa fa-envelope" aria-hidden="true"></i>Contato</a></li>
                        </ul>
                    </div>

                    <div class="col-md-3 hidden-xs hidden-sm">
                        <img src="assets/images/logo_top.png" class="img-responsive logos-inline" alt="Tripadvisor L'OCITANE ABR" />
                    </div>
                </div>
            </div>
            <div class="row">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <!-- Collection of nav links and other content for toggling -->
                <div id="navbarCollapse" class="collapse navbar-collapse">
                    <ul class="nav navbar-nav list-nav-menu">
                        <li><a href="http://santaclaraecoresort.com.br/index.php"><i class="fa fa-home" aria-hidden="true"></i></a></li>
                        <li><a href="http://santaclaraecoresort.com.br/resort.php">resort</a></li>
                        <li><a href="http://santaclaraecoresort.com.br/acomodacoes.php" id="question" >acomodações</a></li>
                        <li><a href="http://santaclaraecoresort.com.br/gastronomia.php">gastronomia</a></li>
                        <li><a href="http://santaclaraecoresort.com.br/atividades.php">atividades</a></li>
                        <li><a href="http://santaclaraecoresort.com.br/spa.php">SPA</a> </li>
                        <li><a href="http://santaclaraecoresort.com.br/eventos/outdoor-training.php">eventos</a></li>
                        <li><a href="http://santaclaraecoresort.com.br/monitora/monitora-clubinho.php">monitoria</a></li>
                        <li><a href="http://santaclaraecoresort.com.br/pacotes/final-de-semana.php">pacotes</a></li>
                        <li><a href="http://santaclaraecoresort.com.br/programacao.php">programação</a></li>
                        <li class="dropdown">
                          <a href="http://santaclaraecoresort.com.br/contato.php" class="dropdown-toggle" data-toggle="dropdown">Contato <b class="caret"></b></a>
                          <ul class="dropdown-menu">
                            <li><a href="http://santaclaraecoresort.com.br/localizacao.php">Localização</a></li>
                          </ul>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right list-inline social-networks hidden-xs hidden-sm">
                        <li><a href="#" target="_BLANK"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
                        <li><a href="#" target="_BLANK"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
                        <li><a href="#" target="_BLANK"><i class="fa fa-youtube" aria-hidden="true"></i></a></li>
                        <li><a href="#" target="_BLANK"><i class="fa fa-tripadvisor" aria-hidden="true"></i></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>

I'm importing everything normal css from bootstrap and js together with jquery and I'm doing @import certinho

<link rel="stylesheet" href="assets/vendor/bootstrap/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><scriptsrc="assets/vendor/bootstrap/dist/js/bootstrap.min.js"></script>

my app.less file with import:

@import "../vendor/bootstrap/less/bootstrap.less";
@import "app.css";

imageofmyvariableswiththecolorsthatIneedtochange,Icopiedthevariablesfromthefilevariables.lessandaddedittomyapp.lessIchangedthecolorstheyappearontheconsole,buttheydonotoverwrite.

Myfilelesswithcolorchanges(rememberingthatthereisacopyofthevariables.lessfile)

    
asked by anonymous 21.12.2017 / 20:40

1 answer

1

@Kirito checks the indexing order of CSSs on <head> of the page that will solve your problem!

Your CSS that has the classes that you want to replace must be the last one!

If it is so, it will not work ...

<link rel="stylesheet" href="assets/css/SEUCSS.css" /> 
<link rel="stylesheet" href="assets/vendor/bootstrap/dist/css/bootstrap.min.css">

Reverse their order that will work. Look below:

<link rel="stylesheet" href="assets/vendor/bootstrap/dist/css/bootstrap.min.css"> 
<link rel="stylesheet" href="assets/css/SEUCSS.css" />

[]'s

    
22.12.2017 / 14:05