Change logo image when from navbar-inverse CSS class

Asked

Viewed 295 times

0

Inside my HTML on page I have a div of header that changes the css when scrolling the page to a given pixel. I can change the colors of the bar and the text but cannot change the logo image

How do I change the image so the navbar mute to navbar-inverse?

What is the javascript for this?

.menu-right {float: right;}
.navbar-inverse { margin-bottom: 0; -webkit-border-radius: 0; -moz-border-radius: 0;border-radius: 0; -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out; -moz-transition: background .5s ease-in-out,padding .5s ease-in-out; transition: background .5s ease-in-out,padding .5s ease-in-out; border: none; background-color: rgba(0,0,0,0.4); padding: 15px 0; }
.navbar-inverse .navbar-nav > li > a { color: #fff; display: block; -webkit-transition: all 100ms ease-in-out; -moz-transition: all 100ms ease-in-out; -o-transition: all 100ms ease-in-out; -ms-transition: all 100ms ease-in-out; transition: all 100ms ease-in-out; }

.navbar-inverse .navbar-nav > li > a, .navbar-inverse .navbar-nav > li {-webkit-transition: all 400ms linear; -moz-transition: all 400ms linear; -o-transition: all 400ms linear; -ms-transition: all 400ms linear; transition: all 400ms linear;}

.navbar-toggle { padding: 4px 6px; font-size: 16px; color: #fff;}
.navbar-toggle:focus,
.navbar-toggle:active { outline: 0;}

.navbar-inverse .navbar-toggle { background: #08b4da; border: none;}
.navbar-nav {margin: 0;}
.scroll-fixed-navbar {padding-bottom:0;}

.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {background-color: transparent;}
.navbar > .container .navbar-brand {margin-left: 0;}
.navbar-brand { height:auto;}

.scroll-fixed-navbar { padding: 10px 0; background-color: #FFF; -webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 7px rgba(0, 0, 0, 0.1); box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);}
.scroll-fixed-navbar .navbar-nav > li > a {color: #333;}
.scroll-fixed-navbar .navbar-nav > li > a:hover, 
.scroll-fixed-navbar .navbar-nav > li.active > a,
.scroll-fixed-navbar .navbar-nav > li.active > a:hover {color: #00a8d6; }

.navbar-toggle { position: relative; float: right; background-color: transparent; padding: 10px; margin: 13px 30px 13px 0; border: none; color: #fff; border: 2px solid #fff;}
.navbar-toggle .icon-bar { background-color: #fff;}

.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {border-color: rgba(0,0,0,0.1);}

.navbar-inverse .navbar-brand  {color: #FFF; font-size: 30px; font-weight: 700; padding: 0;}
.scroll-fixed-navbar.navbar-inverse .navbar-brand  {color: #1a1a1a; font-size: 30px; font-weight: 700; padding: 0;}
.text-logo {margin-top: 5px}
.text-logo i {margin-right: 10px;}

@media only screen and (max-width: 767px) {
    .navbar-inverse {background-color: #FFF; padding:0;}
    .navbar > .container .navbar-brand {margin-left: 15px; color: #1a1a1a; margin-top: 15px;}
    .menu-right {float: none;}
    .navbar-inverse .navbar-nav > li > a {color: #1a1a1a;}
    .navbar-inverse .navbar-nav > .active > a, 
    .navbar-inverse .navbar-nav > .active > a:hover, 
    .navbar-inverse .navbar-nav > .active > a:focus,
    .navbar-inverse .navbar-nav > li > a:hover { color: #00A8D6;}
    img {display: block; margin: 20px auto;}
    .section {padding: 70px 0;}
    .main-point {margin-bottom: 40px;}
    .video-container {margin-bottom: 40px;}
    .img-thumbnail {margin: 0;}
}
<div id="header">
  <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
          <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
              </button>
              <!-- Start Logo / Text -->
              <img src="img/logo-cecom.png" height="50px" align="left" alt="logo da central dos Compradores"></img>

              <!-- End Logo / Text -->
          </div>
          <!-- Start Navigation -->
          <div class="navigation navbar-collapse collapse">
              <ul class="nav navbar-nav menu-right">
                  <li class="active"><a href="#banner">Início</a></li>
                  <li><a href="#intro">Benefícios</a></li>
                  <li><a href="#testimonials">Depoimentos</a></li>
                  <li><a href="#faq">Dúvidas</a></li>
              </ul>
          </div>

javascript jquery css

  • Amigo edits his answer and puts all his CSS and JS that he’s using only with html does not answer you precisely. But one thing that I do is that only with CSS classes you can’t change an IMG tag, the most you can do is to have two Imgs and hide one and show the other in scroll, or else use IMG as background IMG and change that background in scroll

  • I get it. It could be any solution. I just need to change the logo when the header goes down. I think leaving an image as background and then changing already serves. I tried this but it didn’t work. I don’t know if I did right either.

  • You don’t do the script? You want to change the image when the user scrolls down, or you want to change the image when the screen is wider or less wide?

  • Which version of Boostrap you are using??

  • Bootstrap v3.2.0. I want the image to change when the guy scrolls the page.

1 answer

0

From what I understand you already have a script that changes the color when scrolling the page, so is add in your logic the code:

document.getElementById("minhaDiv").src="suaImagem.jpg";

Browser other questions tagged javascript jquery css

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