0

I have a simple bootstrap nav menu. It works great, but when it collapses, I want to be able to un-float the menu items, and have them become center aligned in the dropdown menu when they are in @media only screen and (min-width:768px) {} and below.

As of now the items are either staying floated, or when I un-float them and text align center, they are hard right aligned but worse, the collapse stays open no matter what size the browser.

HTML:

<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
    <div class="container">
     <div class="navbar-header">
        <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="/" class="navbar-brand white">Bab's Kitchen</a>
    </div>
    <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
      <ul class="nav navbar-nav">
        <?php html5blank_nav(); ?>
       </ul>
    </nav>
</header>

CSS:

.nav {
    float:right;
}
.nav ul li {
    text-decoration: none;
    list-style-type: none;
    margin-top:17px;
    margin-right:15px;
    font-size:14px;
    float: left;
    letter-spacing: 0.1em;
}
.nav ul li a:hover {
    text-decoration: none;
    color:purple;
    list-style-type: none;
}
.navbar-inverse .navbar-brand {
    font-family: 'cylburn';
    font-size:40px;
    color:#fff;
}
@media only screen and (min-width:480px) {
    .nav ul li {
        font-size:20px;
        text-align: center;
    }

}
@media only screen and (min-width:768px) {
    .nav ul li {
        font-size:12px;
        margin-right: 10px;
        margin-top:18px;
    }
lmgonzalves
  • 6,518
  • 3
  • 22
  • 41
user2684452
  • 701
  • 2
  • 14
  • 31

1 Answers1

1

If I am understanding this correctly, you want something like this:

@media (max-width: 768px) {
    .navbar .navbar-nav {
        display: inline-block;
        float: none;
        vertical-align: top;
    }

    .navbar .navbar-collapse {
        text-align: center;
    }
}

There are a few Stackoverflow articles that can point you further in the right direction and offer more explaination.

Align navigation to center

Center content in responsivebootstrap navbar

@Media min-width & max-width

Hope this helps.

Community
  • 1
  • 1
cfnerd
  • 3,658
  • 12
  • 32
  • 44
  • that is close. Exactly what you did EXCEPT I want them to not float, stack vertically and remain centered. A centered list in other words. – user2684452 May 27 '15 at 18:46
  • @user2684452 oh, maybe try display: block; instead of display: inline-block; – cfnerd May 27 '15 at 18:48