CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
n0rd
n0rd

Reputation: 12610

Active non-link navbar item

I have a standard bootstrap navbar that looks like this:

<nav class="navbar navbar-default">
    <div class="container">
        <ul class="nav navbar-nav">
            <li class="active"><a href='#'>Item 1</a></li>
            <li><a href='#'>Item 2</a></li>
            <li><a href='#'>Item 3</a></li>
            <li><a href='#'>Item 4</a></li>
        </ul>
    </div>
</nav>

Current section of the web site is marked as active class and it works fine. Now I want the navbar item Item 1 not to be a link when current page is the one Item 1 links to (because a link that points to current page has no point), but I still want it to be highlighted as active page. Issue is, as soon as a remove a element from a li highlight drops.

I tried simply dropping the anchor tag:

            <li class="active">Item 1</li>

putting p.navbar-text around the item:

            <li class="active"><p class='navbar-text'>Item 1</p></li>

And few other things, none worked so far.

I understand that I could do something like:

            <li class="active"><p class='navbar-text' style='background-color: #e7e7e7; padding: 15px; margin: 0'>Item 1</p></li>

to get what I want. Also, this seem to work:

            <li class="active"><a>Item 1</a></li>

but it's semantically wrong.

Is it possible to achieve without adding my own CSS for this case?

Upvotes: 1

Views: 1614

Answers (1)

aredzko
aredzko

Reputation: 1730

From what I can see, the less files for the navbar only apply this styling to anchor elements. You could copy over this styling to apply to things like span or p for your use, but there's no way with the default bootstrap css to get this to apply otherwise.

Upvotes: 1

Related Questions