Home Ask Login Register

Developers Planet

Your answer is one click away!

vandi February 2016

yamm navbar bootstrap with flex

i use yamm in bootstrap, but i need to make it flex so each list will have same spaces to another, and if i want to add another li in the future it wont mess the space between them, but every time i use display:flex. it wont affect anything. so can you guys help?

heres my code

.yamm .nav,
.yamm .collapse,
.yamm .dropup,
.yamm .dropdown {
  position: static;
}
.yamm .dropdown-menu {
  left: auto;
  top: 110% ;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  border: 1px solid #f1f1f1;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
}
.yamm .dropdown-menu .yamm-content {
  padding: 20px 15px;
}
.yamm .dropdown-menu .yamm-content .links li a {
  padding: 8px 0px;
}
.yamm .dropdown-menu h2 {
  font-size: 15px;
  line-height: 27px;
  color: #555;
  text-transform: uppercase;
  font-family: 'FjallaOneRegular';
  margin-top: 0px;
}
.yamm .dropdown-menu li {
  line-height: 26px;
  padding: 2px 0px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.yamm .dropdown-menu li a {
  color: #3D3D3D;
  line-height: 26px ;
  text-transform: none ;
  display: block;
  padding: 8px 16px;
}
.yamm .dropdown-menu li a:hover,
.yamm .dropdown-menu li a:focus {
  background: rgba(0, 0, 0, 0);
  margin-left: 5px;
}
.yamm .dropdown-menu .text {
  font-size: 13px;
  line-height: 20px;
  position: relative;
  bottom: 0px;
  top: 73px;
}
.yamm .dropdown.yamm-fw .dropdown-menu {
  left: 0;
  right: 0;
}
 .header-nav .yamm .dropdown-menu {
    background: #fff;
  }
.yamm .dropdown-menu.pages {
    padding: 10px 37px;
  }
.yamm .dropdown-menu .title:hover,
.yamm .dropdown-menu .title:focus {
  color: #12cca7;
}
.yamm .dropdown-menu         

Answers


Trix February 2016

To use flex, you should add the display: flex to the parent element.

You may do it simply like this ( I have intentionally left CSS definition for .col-xs-12 col-sm-6 col-md-3 empty, to show you there is no special need to define a CSS rule for the flex child, until you have a specific style need ):

.col-md-12{
  display: flex;
  justify-content: space-between;
}
.col-xs-12 col-sm-6 col-md-3{

}
<div class='col-md-12'>
 <div class="col-xs-12 col-sm-6 col-md-3">
		<h2 class="title">Computer</h2>
		<ul class="links">
			<li><a href="#" >Lenovo</a></li><!-- LOOPING -->
			<li><a href="#" >Microsoft </a></li>
			<li><a href="#" >Fuhlen</a></li>
			<li><a href="#" >Longsleeves</a></li>
		</ul>
	</div>
	<div class="col-xs-12 col-sm-6 col-md-3">
		<h2 class="title">Camera</h2>
		<ul class="links">
			<li><a href="#" >Fuhlen</a></li><!-- LOOPING -->
			<li><a href="#" >Lenovo</a></li>
			<li><a href="#" >Microsoft </a></li>                   
			<li><a href="#" >Longsleeves</a></li>
		</ul>
	</div>
	<div class="col-xs-12 col-sm-6 col-md-3">
		<h2 class="title">Apple Store</h2>
		<ul class="links">
			<li><a href="#" >Longsleeves</a></li>
			<li><a href="#" >Fuhlen</a></li>
			<li><a href="#" >Lenovo</a></li>
			<li><a href="#" >Microsoft </a></li>                               

Post Status

Asked in February 2016
Viewed 2,970 times
Voted 13
Answered 1 times

Search




Leave an answer


Quote of the day: live life

Devs Planet ®

2014-2016 www.devsplanet.com

Devs Planet © all rights reserved

Search