Lowtrux Lowtrux - 3 months ago 16
CSS Question

Bootstrap 3: center column content horizontally on a 3 column layout with not fixed width

I'm trying to center a navbar (actually im not using the bootstrap classes for a navbar) inside a three column layout with not fixed widths. I have tried almost all the approaches i found for this and none of them are working for me (pretty sure also that maybe i'm doing something wronng).

Here's the HTML:

<div class="submenu-categories">
<div class="container-fluid">
<div class="row">
<div class="col-lg-2 col-md-2"><span><a href="#">76 products</a></span></div>
<nav class="col-lg-8 col-md-8">
<ul>
<li><a href="#">standard</a></li>
<li><a href="#">premium</a></li>
<li><a href="#">super premium</a></li>
<li><a href="#">ultra premium</a></li>
<li><a href="#">corporate</a></li>
</ul>
</nav>
<div class="col-lg-2 col-md-2"><span><a href="#">show all wines</a></span></div>
</div>
</div>
</div>


Here's the SCSS:

ul {
list-style-type: none;
margin: 0!important;
padding: 0;
}

nav {
ul {
margin:0;
li {
@media only screen and (min-width:768px) {
float:left;
}

text-transform: uppercase;
a {
&:hover {
text-decoration: none;
}
}
}
}
}

.submenu-categories {
background-color: #1c1c1c;
display: none;
height:5.9375em;
line-height:5.9375em;
opacity: 0.9;
padding: 0;
text-align: center;

@media only screen and (min-width:768px) {
display: block;
}

.ctn {
@media only screen and (min-width:1285px) {
padding:0 15em 0 7em;
}
}

nav {
border: 1px solid red;
ul {

li {
&.with-border {
a {
border-right:1px solid white;
padding-right:2em;
}
}

a {
color: white;
font-size: .75em;
font-weight: 600;
margin: 0 .5em 0 .5em;
text-transform: uppercase;

@media only screen and (min-width:830px) {
margin: 0 1.875em 0 1.875em;
}

&:hover {
border-bottom: 3px solid red;
}
}
}
}
}

span {

display: inline-block;

a {
color: #979797;
font-size: .75em;
font-weight: 600;
text-transform: uppercase;

&:hover {
text-decoration: underline !important;
}
}
}
}


Here's the pencode:
http://codepen.io/anon/pen/wzvGmY

I need to center the menu in the middle column but i just can't do it without giving the UL on that nav a fixed width, is there any way to center that element without having to give a fixed with to the UL ?

Answer

Is this what you are after? http://codepen.io/panchroma/pen/ambkky

The changes I made were

nav {
 ul {
  text-align:center; /* new */
   li {
     @media only screen and (min-width:768px) {
      //float:left; /* new */
      display:inline-block; /* new */
    }
...
}
Comments