I'm trying to float a ul inside a div and nothing seems to be working. Am I missing something?
Is there a problem with me using flexbox? I've tried different selectors like .menu ul{} and have given the ul a class but nothing seems to be working.
I have also tried to get rid of the div elements nested inside the ul, but that didn't fix the problem.
Tried assigning a display: block to the menu div as well as a height and width but that didn't do anything.
I'm sure there is something obvioues that I'm missing but I can't figure it out.
Thanks a lot!
$primaryColor: #75beff;
$secondaryColor: #7c3702;
*{
box-sizing: border-box;
}
body {
margin: 0;
height:100%;
font-family: 'Roboto', sans-serif;
}
ul {
list-style: none;
}
.header {
background: $primaryColor;
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
width: 100%;
overflow: hidden;
}
.menu-list {
float: left;
}
.drop-down{
visibility: hidden;
overflow: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/main.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<title>Ecommerce website</title>
</head>
<body>
<div class="header">
<div class="logo"><span class="logo-text">My Fabulous store</span>
</div>
<div class="menu">
<ul class="menu-list">
<li class="main-categ">Femei</li>
<div class="drop-down">
<ul>
<li class="list-item">Item 1</li>
<li class="list-item">Item 2</li>
<li class="list-item">Item 3</li>
</ul>
</div>
<li class="main-categ">Barbati</li>
<div class="drop-down">
<ul>
<li class="list-item">Item 1</li>
<li class="list-item">Item 2</li>
<li class="list-item">Item 3</li>
</ul>
</div>
<li class="main-categ">Copii</li>
<div class="drop-down">
<ul>
<li class="list-item">Item 1</li>
<li class="list-item">Item 2</li>
<li class="list-item">Item 3</li>
</ul>
</div>
<li class="main-categ">Altele</li>
<div class="drop-down">
<ul>
<li class="list-item">Item 1</li>
<li class="list-item">Item 2</li>
<li class="list-item">Item 3</li>
</ul>
</div>
</ul>
</div>
<div class="icons">
<a href="#!">
<i class="fab fa-twitter fa-2x"></i>
</a>
<a href="#!">
<i class="fab fa-facebook fa-2x"></i>
</a>
<a href="#!">
<i class="fab fa-linkedin fa-2x"></i>
</a>
</div>
</div>
<div class="main">
</div>
<div class="footer">
</div>
</body>
</html>
#K.C. and #MarsAndBlack have given the right solutions:
If you just want the list inside, then ignore the last comment and try .menu-list { display: flex; align-self: flex-start;}
The problem was mixing floats and flex.
Thank you all for your help
Related
Here in my css I have given style padding(1.5rem,3rem,4.5rem,6rem) to its LI's by each nesting, but this is something hard coded, my nesting can go to N numbers, so this approach i can not use, Is there was better approach i can handle this with CSS ?
.parent ul { list-style: none; padding: 0; margin:0 }
li { margin:0; padding: 0; cursor:pointer}
li a {display: block;}
.container ul a {padding-left:1.5rem}
.container ul ul a {padding-left:3rem}
.container ul ul ul a {padding-left:4.5rem}
.container ul ul ul ul a {padding-left:6rem}
li a:hover {
background:green;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="container">
<ul class="parent" id="Head">
<li class="items"><a><span>AAA</span></a></li>
<li class="items">
<div class="group"><a><span>BBBB</span></a> </div>
<ul class="group-item">
<li class="items"><a><span>bbbbb</span></a></li>
<li class="items"><a><span>bbbbb</span></a></li>
</ul>
</li>
<li class="items">
<div class="group"><a><span>CCCC</span></a></div>
<ul class="group-item">
<li class="items"><a><span>cccc</span></a></li>
<li class="items"><a><span>cccc</span></a></li>
<li class="items">
<div class="group"> <a><span>cccc</span></a> </div>
<ul class="group-item">
<li class="items"><a><span>cccc1</span></a></li>
<li class="items"><a><span>cccc1</span></a></li>
<li class="items">
<div class="group"> <a><span>cccc1</span></a> </div>
<ul class="group-item">
<li class="items"><a><span>cccc2</span></a></li>
<li class="items"><a><span>cccc2</span></a></li>
<li class="items"><a><span>cccc2</span></a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</div>
</body>
</html>
Looks Only solution left is using javascript
var parents = document.getElementsByClassName('parent');
var allUls= parents[0].querySelectorAll('ul');
allUls.forEach(function(x,i){
var i = i+1;
var y = x.querySelectorAll('.sid');
y.forEach(function(x1){
x1.style.paddingLeft = 1.5 * i+'rem';
})
})
ul { list-style: none; padding: 0; margin:0 }
li { margin:0; padding: 0; cursor:pointer}
li a {display: block;}
li a:hover {
background:red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="container">
<ul class="parent" id="Head">
<li class="items"><a class="sid"><span>A</span></a></li>
<li class="items">
<div class="group"><a class="sid"><span>B</span></a> </div>
<ul class="group-item">
<li class="items"><a class="sid"><span>b</span></a></li>
<li class="items"><a class="sid"><span>b</span></a></li>
</ul>
</li>
<li class="items">
<div class="group"><a class="sid"><span>C</span></a></div>
<ul class="group-item">
<li class="items"><a class="sid"><span>c</span></a></li>
<li class="items"><a class="sid"><span>c</span></a></li>
<li class="items">
<div class="group"> <a class="sid"><span>c</span></a> </div>
<ul class="group-item">
<li class="items"><a class="sid"><span>c1</span></a></li>
<li class="items"><a class="sid"><span>c1</span></a></li>
<li class="items">
<div class="group"> <a class="sid"><span>c1</span></a> </div>
<ul class="group-item">
<li class="items"><a class="sid"><span>c2</span></a></li>
<li class="items"><a class="sid"><span>c2</span></a></li>
<li class="items"><a class="sid"><span>c2</span></a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</div>
</body>
</html>
I want add all nested li's content(anchor tag) to some dynamic padding-left,
Right now with Css I can add something like this to achieve but this looks like hard coded,
.container ul li a {padding-left:1rem}
.container ul ul li a {padding-left:2rem}
.container ul ul ul li a {padding-left:3rem}
.container ul ul ul ul li a {padding-left:4rem}
each nested li's .sid class should have 1rem * its nested depth,
I want to add this to N number of nested li's
Can this be done by CSS ? I was thinking only JS is the final solution here ?
ul { list-style: none; padding: 0; margin:0 }
li { margin:0; padding: 0; cursor:pointer}
li a {display: block;}
li a:hover {
background:green;
}
.container ul li a {padding-left:1rem}
.container ul ul li a {padding-left:2rem}
.container ul ul ul li a {padding-left:3rem}
.container ul ul ul ul li a {padding-left:4rem}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="container">
<ul class="parent" id="Head">
<li class="items"><a class="sid"><span>A</span></a></li>
<li class="item">
<div class="group"><a class="sid"><span>B</span></a> </div>
<ul class="group-item">
<li class="items"><a class="sid"><span>b</span></a></li>
<li class="items"><a class="sid"><span>b</span></a></li>
</ul>
</li>
<li class="item">
<div class="group"><a class="sid"><span>C</span></a></div>
<ul class="group-item">
<li class="items"><a class="sid"><span>c</span></a></li>
<li class="items"><a class="sid"><span>c</span></a></li>
<li class="item">
<div class="group"> <a class="sid"><span>c</span></a> </div>
<ul class="group-item">
<li class="items"><a class="sid"><span>c1</span></a></li>
<li class="items"><a class="sid"><span>c1</span></a></li>
<li class="item">
<div class="group"> <a class="sid"><span>c1</span></a> </div>
<ul class="group-item">
<li class="items"><a class="sid"><span>c2</span></a></li>
<li class="items"><a class="sid"><span>c2</span></a></li>
<li class="items"><a class="sid"><span>c2</span></a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</div>
</body>
</html>
This should be your solution.
I think I understood your question now.
"sid" classes are not related to each other that's why they don't add up. You need to create sub-classes. I hope this is possible in your case otherwise I'd recommend using jQuery.
ul { list-style: none; padding: 0; margin:0 }
li { margin:0; padding: 0; cursor:pointer}
li a {display: block;}
li a:hover {
background:green;
}
.group-item .sid {
padding-left: 1rem;
}
.sub-group-item .sid {
padding-left: 2rem;
}
.sub2-group-item .sid {
padding-left: 3rem;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="container">
<ul class="parent" id="Head">
<li class="item"><a class="sid"><span>A</span></a></li>
<li class="item">
<div class="group"><a class="sid"><span>B</span></a> </div>
<ul class="group-item">
<li class="items"><a class="sid"><span>b</span></a></li>
<li class="items"><a class="sid"><span>b</span></a></li>
</ul>
</li>
<li class="item">
<div class="group"><a class="sid"><span>C</span></a></div>
<ul class="group-item">
<li class="items"><a class="sid"><span>c</span></a></li>
<li class="items"><a class="sid"><span>c</span></a></li>
<li class="item">
<div class="group"> <a class="sid"><span>c</span></a> </div>
<ul class="sub-group-item">
<li class="items"><a class="sid"><span>c1</span></a></li>
<li class="items"><a class="sid"><span>c1</span></a></li>
<li class="item">
<div class="group"> <a class="sid"><span>c1</span></a> </div>
<ul class="sub2-group-item">
<li class="items"><a class="sid"><span>c2</span></a></li>
<li class="items"><a class="sid"><span>c2</span></a></li>
<li class="items"><a class="sid"><span>c2</span></a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</div>
</body>
</html>
I have two columns (col-md-8 and col-md-4). The second column contains a fixed side bar. I want the side bar to be 100% width of the col-md-4 column. The black box as seen in the image below is the second column.
I have tried width 100% but it does not work.
Here's my HTML.
.col-md-4 {
border-style: solid;
}
.sidebar-nav-fixed {
height: 100%;
width: 15%;
text-align: center;
}
.well {
height: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="">
<h1>Hello, world!</h1>
</div>
</div>
<div class="col-md-4">
<div class="sidebar-nav-fixed affix">
<div class="well" id="world">
<ul class="nav ">
<li class="nav-header">Sidebar</li>
<li class="active">Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li class="nav-header">Sidebar</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li class="nav-header">Sidebar</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
</ul>
</div>
<!--/.well -->
</div>
</div>
</div>
<!--/row-->
</div>
position:fixed element is supposed to define everything (including width) in relation to the viewport.
The only way in css to set width according to it's parent div is width:inherit
or if jquery is allowed you can use following code.
$(document).ready(function() {
var new_width = $('.col-md-4').width();
$('.sidebar-nav-fixed').width(new_width);
})
$(window).resize(function(){
var new_width = $('.col-md-4').width();
$('.sidebar-nav-fixed').width(new_width);
})
.col-md-4 {
border-style: solid;
}
.sidebar-nav-fixed {
height: 100%;
width: 15%;
text-align: center;
}
.well {
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="">
<h1>Hello, world!</h1>
</div>
</div>
<div class="col-md-4">
<div class="sidebar-nav-fixed affix">
<div class="well" id="world">
<ul class="nav ">
<li class="nav-header">Sidebar</li>
<li class="active">Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li class="nav-header">Sidebar</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li class="nav-header">Sidebar</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
</ul>
</div>
<!--/.well -->
</div>
</div>
</div>
<!--/row-->
</div>
I'm trying to center text vertically within a div bootstrap container. This is my sample HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.vcenter {
display: inline-block;
vertical-align: middle;
float:none;
}
</style>
</head>
<body>
<div class="container">
<nav class="navbar navbar-default vcenter ">
<ul class="list-inline vcenter" >
<li class="menuFont">Menu 1</li>
<li class="menuFont ">Menu 2</li>
<li class="menuFont ">Menu 3</li>
<li class="menuFont ">Menu 4</li>
<li class="menuFont ">Menu 5</li>
<li class="menuFont ">Menu 6</li>
<li class="menuFont ">Menu 7</li>
</ul>
</nav>
</div>
</body>
</html>
I would like the menu text centered vertically within the container, but they are hugging the top. How would I do this?
I worked on this last night and this is what I came up with:
My goal using Bootstrap, was to have a series of menu links running horizontally across the page. For some reason, doubtless due to my ignorance, this proved rather difficult. I did come up with a solution. At least this seems to work, OK. HOWEVER, in order to make the horizontal menu items appear vertically centered within the container, I had to add margin-top: 3px to the class view. This feels kind of fake to me, but whatever works works, I guess. Any comments are appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TEST</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script>
<style>
.view {
margin-left: auto;
margin-right: auto;
overflow: hidden;
margin-top: 3px;
}
</style>
</head>
<body>
<div class="container">
<div class="Jumbotron">
<h1 class="text-primary text-center">Using Bookstreap.js</h1>
<hr>
</div>
<nav class="navbar navbar-default view ">
<div class="container-fluid view">
<div class="row">
<div class="col-lg-10 col-lg-offset-10 view" >
<ul class="list-inline view" >
<li class="view">Menu 1</li>
<li class="view">Menu 1</li>
<li class="view">Menu 2</li></li>
<li class="view">Menu 3</li>
<li class="view">Menu 4</li>
<li class="view">Menu 5</li>
<li class="view">Menu 6</li>
</ul>
</div>
</div>
</div>
</nav>
<div>
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
{
display: inline-block;
vertical-align: middle;
float:none;
}
</style>
</head>
<body>
<div class="container">
<nav class="navbar navbar-default vcenter " >
<div class="container-fluid vcenter">
<div class="col-lg-5 col-lg-offset-5" >
<ul class="list-inline vcenter" >
<div>
<li class="menuFont">Menu 1</li>
<li class="menuFont ">Menu 2</li>
<li class="menuFont ">Menu 3</li>
<li class="menuFont ">Menu 4</li>
<li class="menuFont ">Menu 5</li>
<li class="menuFont ">Menu 6</li>
<li class="menuFont ">Menu 7</li>
<div>
</ul>
</div>
</div>
</nav>
</div>
</body>
</html>
What do I have to change to my Bootstrap navbar so that the dropdown on the right works on the smaller screen as on the larger screens:
FULL CODE:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SHOWCASE: Bootstrap Navbar</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
.pagecontent {
margin: 0 18px;
}
/* bootstrap override */
.container {
width: 100%;
padding: 0;
}
.navbar {
border-radius: 0px;
}
.container a {
color: yellow;
}
.navbar-text {
float: left !important;
margin-right: 10px;
}
.navbar-right {
float: right!important;
}
</style>
</head>
<body>
<div class="container">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header pull-left">
<a class="navbar-brand" href="#">Company Name</a>
</div>
<ul class="nav navbar-nav visible-sm-block visible-md-block visible-lg-block">
<li class="active">Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown pull-right">
<span class="glyphicon glyphicon-menu-hamburger"></span>
<ul class="dropdown-menu">
<li>Menu 1</li>
<li>Menu 2</li>
<li class="divider"></li>
<li>Menu A</li>
<li>Menu B</li>
<li>Menu C</li>
</ul>
</li>
<li class="dropdown pull-right">
<span class="glyphicon glyphicon-cog"></span>
<ul class="dropdown-menu">
<li>Settings 1</li>
<li>Settings 2</li>
<li>Settings 3</li>
<li class="divider"></li>
<li>Settings A</li>
<li>Settings B</li>
</ul>
</li>
</ul>
</div>
</nav>
<div class="pagecontent">
<p class="visible-xs-block">seen on xs screens.</p>
<p class="visible-sm-block">seen on sm screens.</p>
<p class="visible-md-block">seen on md screens.</p>
<p class="visible-lg-block">seen on lg screens.</p>
</div>
</div>
</body>
</html>
Issue with Dasith's solution:
The fix for this is to simply add a background color:
.navbar-nav .open .dropdown-menu {
background-color: #fff;
Issue #2 with Dasith's solution:
Quick inspection through chrome dev tools got me to make this fix :
#media (max-width: 767px){
.navbar-nav .open .dropdown-menu {
border: 1px solid rgba(0,0,0,.15);
position:absolute;
box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:focus, .navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover {
color: #000;
}
}
Here's a adjusted version with the above edits for a better understanding how it plays out
here..