SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    634
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    boostrap nav/list styling question

    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. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,222
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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. #3
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    634
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    634
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    all right then! let the pain begin...darn you paddings & margins.

  5. #5
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    634
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    ronpat. could you give me some advice on the wrapping and how to move down the png about a pixel please?

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

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

    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.

    Code:
    .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. #7
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    634
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thank you followed up on this and like the results much better.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •