Override a CSS !important style

Question

I am working on a website development on Wordpress while the below style is making my website to have a bug which my navbar cannot show and collapse properly. It is found in the theme bootstrap file. I wanna simply delete display:block!important (not inline or none). How should I write the code to override it?

.show {
    display: block!important;
}

navbar code:

<div class="navbar-collapse collapse" id="navbarSupportedContent" style="padding-right: 0px;">
            <ul class="navbar-nav ml-auto">
                <div class="hori-selector"><div class="left"></div><div class="right"></div></div>
                <li class="nav-item">
                    <a class="nav-link" href="https://gttutor.com/user-dashboard/"><i class="fas fa-tachometer-alt"></i>Dashboard</a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="javascript:void(0);"><i class="far fa-address-book"></i>Address Book</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="javascript:void(0);"><i class="far fa-clone"></i>Components</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="javascript:void(0);"><i class="far fa-calendar-alt"></i>Calendar</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="javascript:void(0);"><i class="far fa-chart-bar"></i>Charts</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="javascript:void(0);"><i class="far fa-copy"></i>Documents</a>
                </li>
            </ul>
        </div>

function test(){
          var tabsNewAnim = $('#navbarSupportedContent');
          var selectorNewAnim = $('#navbarSupportedContent').find('li').length;
          var activeItemNewAnim = tabsNewAnim.find('.active');
          var activeWidthNewAnimHeight = activeItemNewAnim.innerHeight();
          var activeWidthNewAnimWidth = activeItemNewAnim.innerWidth();
          var itemPosNewAnimTop = activeItemNewAnim.position();
          var itemPosNewAnimLeft = activeItemNewAnim.position();
          $(".hori-selector").css({
            "top":itemPosNewAnimTop.top + "px", 
            "left":itemPosNewAnimLeft.left + "px",
            "height": activeWidthNewAnimHeight + "px",
            "width": activeWidthNewAnimWidth + "px"
          });
          $("#navbarSupportedContent").on("click","li",function(e){
            $('#navbarSupportedContent ul li').removeClass("active");
            $(this).addClass('active');
            
            var activeWidthNewAnimHeight = $(this).innerHeight();
            var activeWidthNewAnimWidth = $(this).innerWidth();
            var itemPosNewAnimTop = $(this).position();
            var itemPosNewAnimLeft = $(this).position();
            $(".hori-selector").css({
              "top":itemPosNewAnimTop.top + "px", 
              "left":itemPosNewAnimLeft.left + "px",
              "height": activeWidthNewAnimHeight + "px",
              "width": activeWidthNewAnimWidth + "px"
            });
          });
        }
        $(document).ready(function(){
          setTimeout(function(){ test(); });
        });
        $(window).on('resize', function(){
          setTimeout(function(){ test(); }, 550);
        });
        $(".navbar-toggler").click(function(){
          setTimeout(function(){ test(); });
        });
        
        $(document).ready(function(){
          $("button").click(function(){
            $(".navbar-collapse").toggle();
        });

_"my website to have a bug which my navbar cannot show and collapse properly"_ - How about fixing your navbar instead of messing with the CSS from a theme? — Andreas, Dec 22 '20 at 15:42
Does this answer your question? [How to override !important?](https://stackoverflow.com/questions/11178673/how-to-override-important) — kravis, Dec 22 '20 at 15:43
Like @Andreas said you really should be looking at the html rather than fudging a css fix. Bootstrap is made to be flexible, you probably need to look at the classes on the
you can change the "navbar-expand-md" to other sizes e.g. sm, lg to make the nav display on other media sizes. — RustyBadRobot, Dec 22 '20 at 15:48
@kravis I think it is a little bit different. I want to remove the style or to make it .show{}. The rationale for this is that whenever I turn off .show in the inspect page, the navbar works perfectly. I'm not sure how to edit the code so I think making a temporary changes would be the best way and hence asking this question — GT Tutor, Dec 22 '20 at 15:49
@RustyBadrobot Thank you RustyBadRobot and now I understand it would be better to rewrite the code. I just have a question in mind as I am new to jQuery, could you review the code i just pasted in my post and give me some hints or direction on how to edit it? Thank you so much! :) — GT Tutor, Dec 22 '20 at 15:52
If so... I have an another question: Why does this error appear? Has it always been there? Perhaps some other changes you have applied have broken the bootstrap functionality? — kravis, Dec 22 '20 at 15:52
@kravis It is always like that when i was working on a collapsible QnA section and filter from the first day. Before I just modify the code a bit (it is easier for a dropdown menu) then it works so i ignore the problem. Unitil tdy when i starting making a new header then i found out that .show display:block is the key problem. :( — GT Tutor, Dec 22 '20 at 15:56
Hi, i'm jumping in the subject, can you be a bit more clear regarding what you're trying to do ? can upload a minimal version of the bug? and one of the expected end resukt ? — amarinediary, Dec 22 '20 at 16:02

Override a CSS !important style

0 Answers0