Navigation Bar have a small Dot

IVAN88 · February 3

Hi,

I try to create a navigation bar using App Parameter and custom CSS/HTML, but the result always showed small dot obove the Text.

Anyone knows the problem ? See attachment

Here is the html script

<!DOCTYPE html>
<html>
<head>
<style>
ul {
margin:0;
padding: 0;
list-style-type: none;
overflow: hidden;
background-color: #63F28E;
}
li {
float: left;
}
ul li {
font: 120% "Arial", Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}

li a {
background: #63F28E;              /*BOX COLOR IJO*/
#border-bottom: 1px solid #000000;
color: #FA0616;                   /*TEXT COLOR MERAH*/
display: block;
#margin: 0;
padding: 15px 12px;               /*HEIGHT BOX*/
text-decoration: none;
}

ul a:hover {
background: #68E4E4;              /*Hovered BOX Color BIRU*/
color: #fff;                      /*Hovered TEXT Color PUTIH*/
text-shadow:#ffffff 0px 0px 5px; /*Text Glow*/
padding-bottom: 15px;             /*HEIGHT HOVER BOX*/
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>

CoopperBackpack · February 5

Hello @IVAN88,

These dots are a part of the unordered list. It is rendered with these dots by default.

For example:

To get rid of them, this property should be added: list-style-type: none;

You have this property in your styles, but it is applied to the <ul> tag. This CSS selector is not rather specific so it is overridden and the property is not applied.

You may either add the !important property to it or add the CSS class to the <ul> tag. The second option is better.

Also, you don`t need the <html> and <body> tags.

Please test this code:

<style>
ul.menu-list{
  margin:0;
  padding: 0;
  list-style-type: none;
  overflow: hidden;
  background-color: #63F28E;
}
li {
  float: left;
}
ul li {
  font: 120% "Arial", Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
}

li a {
  background: #63F28E;              /*BOX COLOR IJO*/
  #border-bottom: 1px solid #000000;
  color: #FA0616;                   /*TEXT COLOR MERAH*/
  display: block;
  #margin: 0;
  padding: 15px 12px;               /*HEIGHT BOX*/
  text-decoration: none;
}

ul a:hover {
  background: #68E4E4;              /*Hovered BOX Color BIRU*/
  color: #fff;                      /*Hovered TEXT Color PUTIH*/
  text-shadow:#ffffff 0px 0px 5px;  /*Text Glow*/
  padding-bottom: 15px;             /*HEIGHT HOVER BOX*/
}
</style>

<ul class="menu-list">
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

I added the CSS class here: <ul class="menu-list">

and changed the CSS selector

ul.menu-list{
margin:0;
padding: 0;
list-style-type: none;
overflow: hidden;
background-color: #63F28E;
}

IVAN88 · February 15

Thanks @CoopperBackpack it works

IVAN88 · February 15

Hi @CoopperBackpack I've another script, where should I put the list-style-type: none; command on this script below ?

<style>

/* Style the buttons */

.btn {

border: none;

outline: none;

padding: 10px 16px;

background-color: #FF0303;

cursor: pointer;

font-size: 18px;

color: white;

}

/* Style the active class, and buttons on mouse-over */

.active, .btn:hover {

background-color: #000000;

color: white;

}

.btn:hover {

background-color: #AEACAC;

color: white;

}

a {

color: White;

text-decoration: none;

}

a:hover {

color: white;

text-decoration: none;

}

</style>

</head>

<body>

<button class="btn"><a href="#sadf">Activity </a></button>

<button class="btn active"><href="#asd">Project</button>

<button class="btn"><href="#asd">Ms.Customer</button>

<button class="btn"><href="#asd">Ms.Product</button>

<button class="btn"><href="#asd">Calendar</button>

<button class="btn"><href="#asd">Logout</button>

</div>

// Add active class to the current button (highlight it)

var header = document.getElementById("myDIV");

var btns = header.getElementsByClassName("btn");

for (var i = 0; i < btns.length; i++) {

btns[i].addEventListener("click", function() {

var current = document.getElementsByClassName("active");

current[0].className = current[0].className.replace(" active", "");

this.className += " active";

});

}

</script>

</body>

</html>

CoopperBackpack · February 15

Hello @IVAN88,

the list-style-type: none; is needed when there are <ul> tags in the code. I don`t see any of them in the provided code.

I updated the code. You can skip using the <button> tags and just use the links that are styled as buttons.

<style>

.div-container{
  margin-bottom: 20px;
}

/* Style the links to imitate buttons*/

.btn {
  border: none;
  outline: none;
  padding: 10px 20px;
  background-color: #FF0303;
  cursor: pointer;
}

/* Style the active class, and links on mouse-over */

.active{
  background-color: #000000;
  color: white;
}

.btn:hover {
  background-color: #AEACAC;
  color: white;
}

.div-container a {
 color: white;
 text-decoration: none;
 font-size: 18px;

}

.div-container a:hover {
 color: white;
 text-decoration: none;
 font-size: 18px;
}

</style>

<div class ="div-container">
  <a href="#" class="btn">Activity</a>
  <a href="#" class="btn">Project</a>
  <a href="#" class="btn">Ms.Customer</a>
  <a href="#" class="btn">Ms.Product</a>
  <a href="#" class="btn">Calendar</a>
  <a href="#" class="btn">Logout</a>
</div>

<script>
if (document.DataPageReadyHandler == undefined) {
const DataPageReadyHandler = (e) => {
 if (e.detail.appKey != '[@cbAppKey]') { return }

  const btns = document.querySelectorAll(".btn");

  btns.forEach( btn => {
           btn.addEventListener('click', function(e) {
         
            let activeElement = document.querySelector(".active");
             if(activeElement) {
                 activeElement.classList.remove("active");
                }
                e.target.classList.add("active");
             });
          });
}

document.addEventListener('DataPageReady', DataPageReadyHandler)
document.DataPageReadyHandler = 'Enabled'
}

</script>

IVAN88 · February 16

Thanks a lot @CoopperBackpack it works nicely

Rgds,

Login

Navigation Bar have a small Dot

Question

IVAN88

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

CoopperBackpack

Link to comment

Share on other sites

IVAN88

Link to comment

Share on other sites

IVAN88

Link to comment

Share on other sites

CoopperBackpack

Link to comment

Share on other sites

IVAN88

Link to comment

Share on other sites

Join the conversation

Browse