how to hide <li> bullets in navigation menu and footer links BUT show them for listing items

S

7

59

I have a navigation menu, footer, and a slideshow which use listed style to list links and images. I have the css list-style:none; set to hide the bullets next to the links and images in the nav and footer but I want to show the bullets for list normal text.

How can I do this?

Sevenfold answered 7/5, 2012 at 19:28 Comment(2)

Use a specific selector for the navigation's <li> items, which contains a valid list-style-type property (none to hide). – Sheley 7/5, 2012 at 19:30

could you give me an example? – Sevenfold 7/5, 2012 at 19:33

C

39

The example bellow explains how to remove bullets using a css style class. You can use , similar to css class, by identifier (#id), by parent tag, etc. The same way you can use to define a css to remove bullets from the page footer.

I've used this site as a starting point.

<html>
<head>
<style type="text/css">
div.ui-menu li {
    list-style:none;
    background-image:none;
    background-repeat:none;
    background-position:0; 
}
ul
{
    list-style-type:none;
    padding:0px;
    margin:0px;
}
li
{
    background-image:url(sqpurple.gif);
    background-repeat:no-repeat;
    background-position:0px 5px; 
    padding-left:14px;
}
</style>
</head>

<body>

<div class="ui-menu">
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</div>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>

</html>

Contessacontest answered 7/5, 2012 at 19:45 Comment(1)

This worked for me in my latest effort to style a WordPress child theme. But in this case there was also a ::before specified, which made a bullet out of a 3px border out of a point. That also had some padding. So when employing something like this, just give a glance if there are other competing CSS styles. – Jerz 12/3, 2017 at 21:39

B

47

You need to define a class for the bullets you want to hide. For examples

.no-bullets {
    list-style-type: none;
}

Then apply it to the list you want hidden bullets:

<ul class="no-bullets">

All other lists (without a specific class) will show the bulltets as usual.

Baliol answered 7/5, 2012 at 19:33 Comment(0)

C

39

The example bellow explains how to remove bullets using a css style class. You can use , similar to css class, by identifier (#id), by parent tag, etc. The same way you can use to define a css to remove bullets from the page footer.

I've used this site as a starting point.

<html>
<head>
<style type="text/css">
div.ui-menu li {
    list-style:none;
    background-image:none;
    background-repeat:none;
    background-position:0; 
}
ul
{
    list-style-type:none;
    padding:0px;
    margin:0px;
}
li
{
    background-image:url(sqpurple.gif);
    background-repeat:no-repeat;
    background-position:0px 5px; 
    padding-left:14px;
}
</style>
</head>

<body>

<div class="ui-menu">
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</div>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>

</html>

Contessacontest answered 7/5, 2012 at 19:45 Comment(1)

This worked for me in my latest effort to style a WordPress child theme. But in this case there was also a ::before specified, which made a bullet out of a 3px border out of a point. That also had some padding. So when employing something like this, just give a glance if there are other competing CSS styles. – Jerz 12/3, 2017 at 21:39

S

7

You can style li elements differently based on their class, their id or their ancestor elements:

li { /* styles all li elements*/
    list-style-type: none;
}

#ParentListID li { /* styles the li elements that have an ancestor element
                      of id="ParentListID" */
    list-style-type: bullet;
}

li.className { /* styles li elements of class="className" */
    list-style-type: bullet;
}

Or, to use the ancestor elements:

#navigationContainerID li { /* specifically styles the li elements with an ancestor of
                               id="navigationContainerID" */
    list-style-type: none;
}

li { /* then styles all other li elements that don't have that ancestor element */
    list-style-type: bullet;
}

Sanguinolent answered 7/5, 2012 at 19:32 Comment(0)

L

6

when bullet have to hide then use:

li { list-style: none;}

when bullet have to list show, then use:

li { list-style: initial;}

Layoff answered 1/7, 2020 at 11:11 Comment(1)

Appreciate your reply. In case you want to add some formatting to your replies, can use this guide Markdown help. – Broke 1/7, 2020 at 11:30

L

1

Let's say you're using this HTML5 layout:

<html>
    <body>
        <header>
            <nav><ul>...</ul></nav>
        </header>
        <article>
            <ul>...</ul>
        </article>
        <footer>
            <ul>...</ul>
        </footer>
    </body>
</html>

You could say in your CSS:

header ul, footer ul, nav ul { list-style-type: none; }

If you're using HTML 4, assign IDs to your DIVs (instead of using the new fancy-pants elements) and change this to:

#header ul, #footer ul, #nav ul { list-style-type: none; }

If you're using a CSS reset stylesheet (like Eric Meyer's), you would actually have to give the list style back, since the reset removes the list style from all lists.

#content ul { list-style-type: disc; margin-left: 1.5em; }

Lieutenant answered 7/5, 2012 at 19:53 Comment(0)

L

1

I combined some of Flavio's answer to this small solution.

.hidden-ul-bullets li {
    list-style: none;
}
.hidden-ul-bullets ul {
    margin-left: 0.25em; // for my purpose, a little indentation is wished
}

The decision about bullets is made at an enclosing element, typically a div. The drawback (or todo) of my solution is that the liststyle removal also applies to ordered lists.

Latchkey answered 13/11, 2013 at 9:7 Comment(0)

C

0

You can also define a class for the bullets you want to show, so in the CSS:

ul {list-style:none; list-style-type:none; list-style-image:none;}

And in the HTML you just define which lists to show:

<ul style="list-style:disc;">

Or you alternatively define a CSS class:

.show-list {list-style:disc;}

Then apply it to the list you want to show:

<ul class="show-list">

All other lists won't show the bullets...

Cribbage answered 30/11, 2013 at 12:42 Comment(0)

Recommended topics

Hot tags