Boostrap nav/list styling question

HTML & CSS
1

how do i get the bullets back in the list?
I have them in my own code
.navbar .menu{
list-style-type: disc;
text-transform: uppercase;
}
but can’t make them show up. went to check the boostrap.css (easier to read than the boostrap.min.css and the same)i see a .navbar .nav > li > a: settings. but don’t see one for ul or styling the bullets back in.

has anyone run into this. how do I get around this settings please?
and of course here is the page
http://cdiwwwtest.cdicorp.com/engineering

2

The list items are set to {display:inline-block} which turns off the default list markers.

Float them to the left, instead, to keep the markers. You’ll probably need to tweak your margins and padding and don’t forget to contain the floats. The width of the menu will increase considerably and you will need to work on how it wraps.

3

thank you!
will go take a look. would rather keep em as is and avoid all of that. hope it won’t be too painful.

4

all right then! let the pain begin…darn you paddings & margins.

5

ronpat. could you give me some advice on the wrapping and how to move down the png about a pixel please?

6

Hi,

You could have just set the anchor to display:list-item and then applied the bullet image to that.:slight_smile:

However, list-image is still not usable because you do not have any control over its position unfortunately. Therefore its better to use a background image and you will have perfect pixel control over it. I would set your menu back to inline block with the following changes.


.navbar .menu{margin:0 0 0 15px}
.navbar .menu > li{
float:none;
display:inline-block;
padding:8px 15px;
line-height:normal;
background:url(http://cdiwwwtest.cdicorp.com/wp-content/themes/cdi/imgs/silverBullet.png) no-repeat 0 9px;
}
.navbar-inner {height:auto;padding:15px 0 0;}

The above code is all over-rides so either put it after the original code or modify the original code with the extra rules.

I removed the height from the navbar so it could wrap and the inline-block means you don;t need to worry about floats escaping. Height is just created with padding so that the menu can wrap to anew line with no problems.

7

Thank you followed up on this and like the results much better.