Problem when changing menu colors with bootstrap-Less 3.3.7

Asked

Viewed 409 times

1

Guys I’m making a website with HTML5 and bootstrap-lesseverything works normally but needed to change some colors in the menu navbar and I know that I can do this through variables.less inside that file I navigate to the part of the menus where I copy all the code related to the menu that I want to edit and paste into my file .less but the same doesn’t work I don’t want to have to use !important to change the menu when I know I can do this by only moving the variables in the less that comes in Bootsrap this is the code less 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 realize that I left everything white to make a test and on my site does not change:

inserir a descrição da imagem aqui

this is my menu:

<nav class="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 of bootstrap and the js together with the jquery and I’m doing the @import straight 

<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>
    <script src="assets/vendor/bootstrap/dist/js/bootstrap.min.js"></script>

my.Less app file with import:

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

inserir a descrição da imagem aqui

image of my variables with the colors I need to change, copied the variables from the file variables.less and added to my app.less I changed the colors they appear in the console but do not overwrite. inserir a descrição da imagem aqui

my file less with the color changes (remembering that this is a copy of the file variables.less) inserir a descrição da imagem aqui

bootstrap-3 less
  • 1

    In Chrome Developer Tools on the right where you usually have CSS click on the tab Computer and gives an Inspect where the wrong color is and checks where it is pulling this color. I think that has a CSS your Overwriting the other

  • @hugocsl I’ll check here for a moment

  • I saw here amifo and my color ta so rgb(51, 51, 51) ;

  • @hugocsl I created an app.css that is where my css is minified and has the app.Less that is where I create my style code for now just created the menu and already with this difficulty know what can be

  • @hugocsl posted the console print on the question there

  • 1

    rgb(51, 51, 51) equals #333333 which is the first color that appears in the Inspector, so its color is in the bootstrap.css line 4515. Only it seems that it affects other elements. Whenever it changes there to another color and tests if it works!

  • @hugocsl understood that if I’m going to have to rewrite the bootstrap code it’s bad not agree because since I already have the variables of his Less it wouldn’t be necessary for me to change directly in the css of the bootstrap type if I inspect the elemto my changes via Less will be I wouldn’t have to use the ! And I wish I didn’t have to wear this

  • @hugocsl downloaded the bootstrap from this site here https://getbootstrap.com/docs/3.3/getting-Started/ got the Less sera that is some problem in the files I know there never had this problem I will put a print of the folder of my bootstrap the variables.Less ta kind of strange the folder and I will put a print tbm of the console showing the colors that I set in the variables because they are there no more overwrite the bootstrap ones that would be right.

  • @hugocsl I added a few more screenshoots at the end of the session

  • 1

    it is super common to customize the BS, mainly overriding the classes that already come in the framework. You got the files on the right link yes, that’s no problem. Look if it is not the order you are indexing the links in the <head> page. Your CSS should be the last to be called.

  • @hugocsl next guy am Important my css style here <link rel="stylesheet" href="Assets/vendor/bootstrap/dist/css/bootstrap.min.css">

  • this is from bootstrap and this is my css <link rel="stylesheet" href="Assets/css/app.css" /> if I remove bootstrap style my changes work

  • Let’s go continue this discussion in chat.

Show 8 more comments

1 answer

1


@Kirito confers the Csss indexing order on <head> from the page you will solve your problem!

Your CSS that is with the classes you want to replace should be the last!

If he’s like this it won’t 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

Browser other questions tagged bootstrap-3 less

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