What is the best way to remove the white dots that are showing up next to my Navbar links on a bootstrap template?

I've been utilizing this template from ShareBootstrap and it has been running smoothly, except for one pesky issue: Mysterious white dots that are labeled as li.nav-tem::marker keep showing up about an inch to the left of each Navbar link.

Here is some additional information about my problem:

  • I have carefully examined the code for any mention of nav-item, marker, or similar terms.
  • There is no reference to a marker in the HTML code.
  • The issue persists in every HTML page with the navbar. I have not made any changes to the CSS.
  • This problem surfaced after adding a new navbar link, even though I did not modify any other related code during the update.
  • Aside from the new link, the structure of the HTML navbar code remains unchanged.
  • Removing the new link does not resolve the problem.

You can find my current code in this GitHub repository: https://github.com/dritchkid/portfolio

Please note that I am aware the repository is not configured with pages yet. Currently, I am just testing locally on my computer.

Click here for an image depicting the troubling white dots.

I'm stumped! Where could these dots be coming from? Any assistance would be greatly appreciated!

Answer №1

To eliminate the dots, simply adjust the list style within the navbar-nav class located on the ul.

.navbar-nav {
  list-style: none;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The background image on my screen seems to be malfunctioning and not displaying properly

I'm facing an issue with setting an image as the background of the banner section on my website. Despite trying various solutions and researching similar problems, I haven't been able to resolve it. Specifically, I am attempting to set the backgr ...

Retrieving table information using curl and regular expressions

Here is the code I have developed to extract data from a table on a specific website. However, I am looking to remove any links present in the data and also separate the title and price into an array. <?php $ch = curl_init("http://www.digionline.ir/ ...

Run JavaScript upon the webpage loading without the dependency of jQuery

Is there a way to ensure that JavaScript code is executed only after the entire page has loaded, without relying on jQuery? Take this example... <html> <head> <script type="text/javascript"> var box = document.ge ...

Stop text from breaking out of the flexbox container

I am trying to integrate an image with a text link into a flexbox container. However, I am encountering an issue where the container breaks and appears incorrectly on smaller screens: https://i.sstatic.net/4DvY1.png <el-container> <el-main& ...

Using Jquery to Highlight the Background Image in a Circle

I currently have 3 images named back_about_1.jpg, back_about_2.jpg, and back_about_3.jpg. There is a div with the ID "about" - <div id="about"></div> The default background image of the div is set to back_about_1.jpg using CSS - background: u ...

Remove vertical spacing from rows of thumbnail grid in bootstrap

I have been attempting to eliminate the vertical space between rows in a thumbnail grid, similar to how I did for horizontal spacing, but have not been successful. .gutter-0.row { margin-right: 0; margin-left: 0; /* not working */ margin-t ...

The use of localStorage causes issues when working alongside a JavaScript function

I am currently utilizing the localStorage feature to store values inputted in an HTML form and preserve them even after refreshing the browser. Here is the code snippet: <form id="localStorageTest" method="post" action=""> <label>N ...

Alter the color of H3 when clicked and then gently fade it back

Is it possible to create a button on the top of my webpage that scrolls to a specific DIV when clicked, and also have it change the color of an h3 element once it has scrolled to it? This effect is similar to how Facebook highlights notifications. This is ...

The words run out before the paper does. Keep reading for more details

While updating the CSS on my blog, I ran into an issue where the text in my posts is not extending all the way to the end. To see what I'm experiencing, check out this image- I really need the text to align properly and reach the full width of the p ...

Get an Array Using AJAX in PHP and JavaScript

Section 1 I want to retrieve an Array from PHP and use it in JavaScript. I have created a file using the fwrite function in PHP, then included that file in my next .load method inside a Div. The new PHP file contains an "include 'somefile.php';" ...

Variety of part ingredients

In my component, I have a button and include another component which also contains a button. How can I align these two buttons next to each other without using absolute positioning? When I try positioning them using absolute right and top values, the lay ...

There seems to be an issue with the display of the Bootstrap grid

I've been trying to create a responsive layout on my website using Bootstrap, but for some reason, it's not displaying correctly. Here is the code I have written: <div class="main-panel"> <div class="content-wrapper"> <b ...

Unexpected Firebug issue when interacting with radio button

Could someone help me understand a minor issue I've encountered? Here is an example of an HTML document: <html> <head> <title></title> <style> body {font-family: Arial;} </style> </head> ...

Tips for concealing the Google Chrome status bar from appearing on a webpage

I have been intrigued by the rise of Progressive Web Apps (PWAs) and I am eager to dive into understanding them better. One common feature I have noticed in PWAs is the ability to hide the browser chrome, including the URL bar, back button, search fields, ...

How can I determine whether a value is present in a data attribute using jQuery?

I'm working with a HTML div that looks like this: <div id="myDiv" data-numbers="1 4 5 3 9 88 57 "></div> Within the data-numbers attribute of the div, there are random numbers separated by white space. My goal is to determine whether ...

Experiencing the issue of receiving unexpected commas following a div

Here is the code written in TypeScript for creating an HTML table that displays items from nested objects. The code is functional, but there seems to be an issue with extra commas being printed which are not part of any specific line being executed. im ...

developing toggle switches using JSON

I am faced with a JSON containing two keys, "cars" and "others". How can I implement a toggling feature on my website using HTML/CSS/JavaScript such that: Clicking on "cars" displays the car items (small vehicle, large vehicle) in red text. Clicking on "o ...

Assign a unique class to every item in the selection list

Utilizing the Symfony2 FormBuilder, I have an entity field with a choice list that appears quite lengthy. To enhance user experience, I am looking to add CSS for indenting items based on their groups. While jQuery can assist in adding classes based on opti ...

Toggling dropdown menus with conditional Jquery statements

I am experiencing some discomfort. :) I've been working on a calorie calculator that includes a dropdown for various dietary preferences. Currently, when a user clicks the button, the dropdown appears and disappears when clicking outside the button. ...

The Outer Div Can't Contain Google Maps

I am currently working on integrating a map widget into a dashboard I created using gridstack.js. The sample widget layout that I am aiming for can be seen in the link below: https://i.sstatic.net/ZQP6G.png My goal is to embed the map within the inner (w ...