Bootstrap: navbar showing a line


Tags: html,css,twitter-bootstrap,navbar

Problem :

I'm new in Bootstrap, I wanted to create a vertical menu and I do it, but at bottom of "navbar" there is a black line that I can't find how to delete it, here the code I used:

HTML

<div id="navbar" class="navbar navbar-inverse navbar-fixed-top">
<nav>
    <ul class="nav nav-stacked" id="menu-bar">
        <li><img src="#"></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav></div>

CSS

    #menu-bar .panel {
    margin-bottom: 0;
    border: none;
    border-radius: 0;
    -webkit-box-shadow: none;
    -box-shadow: none;
}

#navbar {
    margin-left: 10%;
    float: left;
    width: 150px;
    background-image: url(../images/backnav.png);
    background-repeat: repeat-y;
    background-color: transparent;
    }

Did you have any suggestion to fix this?

Thank you :)



Solution :

You need to get rid of the "navbar-inverse" class. Here is a fiddle: http://www.bootply.com/124086

<div id="navbar" class="navbar navbar-fixed-top">
<nav>
    <ul class="nav nav-stacked" id="menu-bar">
        <li><img src="#"></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>
</div>

    CSS Howto..

    How can I make the ul contain li in its content box?

    How to layer a
    element ontop of a other elements

    How to center list of links in a straight line. CSS

    CSS styling of a line: how to get the line to move with the header above it

    How can I format outer table but not inner table

    How to put a table inside an inline-block element where cells have a percentage width

    How to draw a circle css

    overlay showing in background instead of on top

    How to make a transition in height without knowing the height before?

    A text shows up smoothly when hovering thumbnails. Is this a jQuery plugin or just CSS?

    How to check “IF any one or all buttons are clicked” in jquery

    How to get cross browser compatibility in Print on page from all browsers?

    Sitefinity 5.3: How do I order my CSS?

    How to design “overflowing” border lines of css
    ?

    How to Remove CSS line-through

    How to set up css hierarchies

    How to hide and retrieve a URL in CSS with Javascript

    Fixed sidebar, content under it, how to fix?

    how to set a fixed width to textbox which wont be affected by varying value of padding-left?

    How is text thickness calculated according to css property “font-weight”?

    several questions about how to work with divs

    How to style form elements unobtrusively with JavaScript and CSS?

    How to target certain text to make bold using css

    My div box isn't showing up, what am I doing wrong? [closed]

    CSS: how to cascade class-specific style to children [closed]

    How to place divs three in a row with css and html

    How do I achieve this particular hover effect?

    How to convert columns to rows using CSS

    How to change css style by using Unicode Hexadecimal

    how to create a fullscreen website design?