Grow your CSS skills. Land your dream job.

Forcing Bootstrap list to be vertical

  • # June 16, 2013 at 8:20 am

    Hey Guys!

    I’m using bootstrap and I’m having a problem with the nav bar with media queries. How can I put it to be a vertical list?
    This is the code:

    And the CSS:

    @media (max-width: 499px) {
    .nav li{
    display: list-item;
    float: left;
    height: 100%;
    width: 40px;
    position: relative;
    clear: left;
    list-style: none;
    }
    }

    I believe it’s simple, but I can’t find the solution =(

    Cheers.

    # June 16, 2013 at 4:48 pm

    Anybody out there?

    # June 16, 2013 at 4:53 pm

    Doesn’t the navbar do that automatically at mobile sizes…when the responsiveness is implemented?

    http://twitter.github.io/bootstrap/components.html#navbar

    >Responsive navbar

    >To implement a collapsing responsive navbar, wrap your navbar content in a containing div, .nav-collapse.collapse, and add the navbar toggle button, .btn-navbar.

    # June 17, 2013 at 5:07 am

    Yes, I know, but I want to use just a link list. Is it possible?

    # June 17, 2013 at 6:51 am

    >I want to use just a link list. Is it possible?

    I’m not sure what you mean.

    Do you mean instead of the navbar or a separate menu somewhere else.

    Obviously, you can have a second menu as Bootstrap have demonstrated on their component page. They have a navbar at the top and a second vertical menu in a sidebar.

    http://twitter.github.io/bootstrap/components.html

    # June 17, 2013 at 2:08 pm

    You can just use the nav-list component of bootstrap and style it differently.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".