0

I am using my own .css stylesheet to overwrite some Bootstrap CSS rules, in this particular case I want the navbar-brand image display as 'inline-block', not as 'block', like specifies bootstrap.css.

No problem with that, I have my navbar-brand image handled by my 'custom.css', with 'display: inline-block', until an event that changes the 'src' attribute is fired:

var logoChanged = false;

$(window).on("resize",function(){

var screen = $(window).width();

if(screen<390 && !logoChanged){
    $("navbar-brand img").attr("src","img/logo-aure2.png");
    logoChanged=true;
    });
}else if(screen>390 && logoChanged){
    $("navbar-brand img").attr("src","img/logo-aurestudio.png");
    logoChanged=false;
    });
}

});

The function works fine and the 'src' attribute changes correctly when resizing the screen, but after that, navbar-brand returns to be handled by bootstrap.css and not by my custom.css, displaying the image as a 'block' again.

Anyone know why this happens?

Thanks a lot

2
  • please add navbar-brand css codes in custom.css to your question... May 13, 2016 at 18:10
  • a lot of bootstrap css cannot be overridden and it eventually takes effect and if you inspect the element in chrome a lot of times u will find bootstrap overriding the styles so if you want to make permanent changes add them in bootstrap.css file which you will download if you're self hosting bootstrap.. May 13, 2016 at 18:21

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.