Twitter Bootstrap Question posted in

HTML element not displaying what debugger says it should – Twitter bootstrap

I’m building site using Twitter bootstrap and want to apply a background image to an <li> element when it is active in the navbar. I couldn’t get the background image to display so as a test, I tried setting it a random background-color. What I found is that the debugger says that this background color (red) is applied to the element but on the actual page, it is clearly not red.
Notice that the attributes the debugger displays do not show on the actual page

Notice that the attributes the debugger displays do not show on the actual page. Why doesn’t the <li> element have a red background?

I included only the relevant HTML

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>...</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">
    <script src="http://connect.soundcloud.com/sdk/js"></script>
    <script src="./js/global.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="./styles/global.css">
  </head>

<nav class="navbar navbar-inverse">

<div class="navbar-header">
                <a class="navbar-brand" href="./index.html">SMTHN</a>
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>

<div id="navbar" class="navbar-collapse collapse" aria-expanded="false" style="height: 1px;">
        <ul class="nav navbar-nav">
            <li class="active">
                <a href="./index.html">Home</a>
            </li>
            <li>
                <a href="./index.html">Tracks</a>
            </li>
            <li>
                <a href="./index.html">Merchandise</a>
            </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li>
                <a href="./index.html">Forums</a>
            </li>
            <li>
                <a href="#" data-toggle="modal" data-target="#signInModal">Sign in</a>
            </li>
            <li>
                <a href="#" data-toggle="modal" data-target="#signUpModal">Sign Up</a>
            </li>
        </ul>
    </div>
</nav>

CSS

.navbar-inverse {
    background: rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 0 0 0.5px #9d9d9d;
    -webkit-box-shadow: 0 0 0 0.5px #9d9d9d;
    box-shadow: 0 0 0 0.5px #9d9d9d;
}

li.active {
    background-color: red !important;
    background-image: url('../Images/button_glow.png');
}

What am I missing?

Tags:

2

Answers


  1. 0

    it seems working fine. However I suggest you to use background for a instead of li since the hover is applied on a and if you use the active style for li, hover style will override it.

    li.active > a {
  background-color: red !important;
  background-image: url('../Images/button_glow.png');
}

    https://i.imgur.com/GJO6LSm.png notice this is the one taking style but you mentioned the active style only for li.active so bootstrap style override it.

    here is the JSFiddle

    Login or Signup to reply.
  2. 0

    If I’m reading your screenshot correctly, there’s also a background image applied to the li so that’s why you aren’t seeing red.

    The problem with your image not showing is likely a path issue, remember that the path is relative to your CSS file.

    Use web inspector, check for errors and you’ll probably be able to find the path that the browser is expecting to find the image and this should help you.

    Good luck

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search