Adding items to Bootstrap navbar instead of simply toggling them

Question

Adding items to Bootstrap navbar instead of simply toggling them

I'm having some issues with my Bootstrap 3 navbar. Instead of toggling between the navbar items, it's appending the content data. For example, when I click on ALL and then Pending, the output shows as: abc
xyz

<div class="vendor category-tab shop-details-tab"><!--category-tab-->
            <div class="col-sm-12">
                <ul class="nav nav-tabs">
                    <li><a href="#allOrder" data-toggle="tab">ALL (10)</a></li>
                    <li class="active"><a href="#pending" data-toggle="tab">Pending (5)</a></li>
                    <li ><a href="#delivered" data-toggle="tab">Delivered (5)</a></li>
                    <li ><a href="#Cancelled" data-toggle="tab">Cancelled (5)</a></li>
                </ul>
            </div>
            <div class="tab-content">
                <div class="tab-pane" id="allOrder" >
                    alpha
                </div>

            </div>
            <div class="tab-content">
                <div class="tab-pane fade active in" id="pending" >
                    beta
                </div>

            </div>
        </div><!--/category-tab-->

html css navbar

Answer 1

Answer №1

To enhance the appearance of your list item, consider adding either a "Padding" or "Margin" property.

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: left;
}

li a {
  display:inline-block;
  padding: 18px;
  background-color:grey;
}
</style>
</head>
<body>
<div style="width:100%;background:grey">
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
</ul>
</div>
</body>
</html>

For the same visual effect, simply switch the padding to margin

Answer 2

To enhance the appearance of your list item, consider adding either a "Padding" or "Margin" property.

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: left;
}

li a {
  display:inline-block;
  padding: 18px;
  background-color:grey;
}
</style>
</head>
<body>
<div style="width:100%;background:grey">
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
</ul>
</div>
</body>
</html>

For the same visual effect, simply switch the padding to margin

Adding items to Bootstrap navbar instead of simply toggling them

Answer №1

Similar questions

Menu changes when hovering

There seems to be an issue with the HTML link not redirecting properly, as it is directing to www.oldpage.com/http://www

When I view the website on a tablet in landscape mode, the navigation bar vanishes

Eliminate redundant XML entries when using jQuery autocomplete

"Challenges Arising in Deciphering a Basic JSON Array

Expand Menu Options (jQuery)

Error message: Unable to locate the ID attribute of this element using jQuery - resulting in undefined value

Enhance the elastic layout to ensure full compatibility with Internet Explorer

Trouble with font sizing in a single line

Encoding and decoding HTML code in ASP.NET

What is the procedure for extracting data from a JSON file within an HTML document?

What could be the reason for the malfunction of my flexbox layout?

Connect to content on the current page

Visual transformation

What is the best way to align two spans vertically on either side of a div, in relation to the div itself?

Issue with showing error message to the user using AJAX

apply a border-radius to the top right corner only without affecting the other sides or background

How can I generate a checkbox in a database with a field that allows for enabling and disabling?

Visual button spacing

Problem with the visibility of the drop-down menu when hovering over it