How do I create something like this in bootstrap ?
I was thinking of making 4 columns each one of the nodes using the grid layout. But the center node is taking more space than it should take.
Here is the bootply http://www.bootply.com/5ni6EJeTWM
As of now it looks like this
Here is what I came up with. It is not perfect but it should help you get on the track.
UPDATED the code - FULLY RESPONSIVE NOW !!!
.node-list {
margin-bottom: 10px;
overflow: hidden;
width: 100%;
padding: 0px;
margin: 0px;
}
.node-list li {
list-style-type: none;
color: white;
text-transform: uppercase;
font-size: 14px;
width: 25%;
float: left;
position: relative;
text-align: center;
}
.node-list li p {
color: #000;
font-weight: bold;
}
.node-list li:after {
content: '';
width: 20px;
height: 20px;
line-height: 20px;
display: block;
font-size: 18px;
color: #000;
background: #fff;
border: 10px solid #000;
margin: 0 auto 5px auto;
}
.node-list li:before {
content: '';
width: 100%;
height: 6px;
background: #000;
position: absolute;
left: -50%;
bottom: 20px;
z-index: -1
}
.node-list li:first-child:before {
content: none;
}
<ul class="node-list">
<li class="active">
<p>ABC</p>
</li>
<li class="">
<p>ABC</p>
</li>
<li class="">
<p>ABC</p>
</li>
<li class="">
<p>ABC</p>
</li>
</ul>
Related
I need some help with a dropdown menu that's hiding behind a div. I tried setting the z-index to higher value, set the li to position:relative, checked for overflow in css (none). I see these as common causes for this issue, but nothing works for me.
Please note that z-index, positive and negative, were added whilst trying to find a solution. It makes no difference.
NOTE: dropdown is hiding behind "text-on-banner", yet showing in front of "main-banner".
Thanks for looking at this.
HTML:
<div class="wrapper">
<div class="header">
<ul class="PrimaryNav with-indicator">
<li class="Nav-item">
A
<li class="Nav-item">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">B</a>
<ul class="dropdown-menu">
<li class="Nav-subitem">B.1</li>
<li class="Nav-subitem">B.2</li>
<li class="Nav-subitem">B.3</li>
</ul>
<li class="Nav-item">
C
</ul>
</div>
</div>
<div class="section-wrapper">
<div class="main-banner">
<div class="text-on-banner">
<h2><strong>SOME TEXT HERE</strong></h2>
</div>
</div>
</div>
CSS:
.wrapper {
width: 100%;
}
.header {
width: 100%;
background: #26282c;
color: #f5f5f5;
text-align: center;
}
.PrimaryNav {
list-style: none;
margin: 7px auto;
max-width: 1220px;
padding: 0;
width: 100%;
font-family: 'Open Sans', sans-serif;
font-size: 130%;
font-weight: 600;
}
.with-indicator {
position: relative;
z-index: 0;
}
.Nav-item {
background: #26282c;
display: block;
float: left;
margin: 0;
padding: 0;
width: 14.28%;
text-align: center;
}
.Nav-item a {
color: #c2c5ca;
display: block;
padding-top: 20px;
padding-bottom: 20px;
text-decoration: none;
}
.Nav-subitem {
background: #26282c;
display: inline-block;
width: 100%;
text-align: center;
position: relative;
z-index: 999999;
}
.section-wrapper {
max-width: 1250px;
margin: auto;
padding: 20px 0 0 0;
}
.main-banner {
text-align: center;
font-weight: 700;
font-family: 'Titillium Web', sans-serif;
font-size: 36px;
line-height: 40px;
padding: 10px 2px 1px 2px;
color: #26282c;
box-shadow:
inset 0 0 0 1px rgba(232, 45, 0, 0.1),
inset 0 0 5px rgba(232, 45, 0, 0.2),
inset -285px 0 35px white;
border-radius: 10px;
background: #fff url(banner00.jpg) no-repeat center left;
z-index: -1;
}
.text-on-banner {
font-weight: 1000;
width: 95%;
max-width: 95%;
background-color:white;
opacity:0.6;
border-radius: 10px;
z-index: -1;
}
.text-highlight {
color: #e82d00;
font-weight: 800;
}
After spending 2-3 hours on this, I just realize that it was the .with-indicator ul which had to have z-index > 0. All working as expected now.
Hope this helps somebody else though. Thanks for looking.
I am trying to make a dropdown box with submenus appearing horizontally, which can also scroll vertically.
I have gotten everything working except for the scroll.
.dropdown-container {
background: white;
border: 1px solid #666;
cursor: pointer;
line-height: 24px;
height: 24px;
position: relative;
width: 150px;
}
.dropdown-container a {
color: black;
padding: 0 10px;
text-decoration: none;
}
.dropdown-container:after {
color: #666;
content: '\f107';
font-family: FontAwesome;
position: absolute;
right: 2px;
top: 0px;
}
.dropdown-container:before {
content: attr(data-content);
padding: 0 10px;
}
.dropdown-container li > a:not(:only-child):after {
content: '\f105';
font-family: FontAwesome;
position: absolute;
right: 4px;
top: 0px;
}
.dropdown-container ul {
background: white;
border: 1px solid #666;
display: none;
right: 1px; /*Why is it being nudged 1px right relative to parent?*/
list-style: none;
margin: 0;
max-height: 80px;
overflow-x: visible;
overflow-y: auto; /*This is the problematic line, remove this and the rest works*/
padding: 0;
position: relative;
width: 100%;
}
.dropdown-container:hover > ul {
display: block;
}
.dropdown-container ul li {
background: white;
position: relative;
}
.dropdown-container ul li:hover {
background: rgba(173, 216, 230, 0.6);
}
.dropdown-container ul li:hover > ul {
display: block;
}
.dropdown-container ul ul {
display: none;
position: absolute;
left: 150px;
width: 150px;
top: -1px; /*Another 1px adjustment required, why aren't they already aligned?*/
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="dropdown-container" role="nav" data-content="Title">
<ul class="dropdown">
<li>
Select 1
</li>
<li>
Select 2
<ul>
<li>
Select 2.1
<ul>
<li>
Select 2.1.1
</li>
</ul>
</li>
<li>
Select 2.2
</li>
</ul>
</li>
<li>
Select 3
</li>
<li>
Select 4
</li>
</ul>
</div>
See JSfiddle here.
But if I set overflow-y on the <ul> to auto to enable scrolling then my submenus get hidden as in the snippet above.
I believe the problem is the same as in this question: when overflow-y: auto and overflow-x: visible, overflow-x is treated as auto too.
Unfortunately the solution suggested (wrapping the <ul> in a position: relative element) has not worked for me.
Does anyone know of another way around this?
My nav bar (which is at the top of the page) and header (below nav, which has a large image and a text on top of it), have a very small gap between them that I want to remove. I've visited a number of posts on similar problems, and tried their solutions, but can't seem to work for me, including: display: block; margin: 0; e.t.c.
I guess it has something to do with a style I have applied on either the header's content or the nav's content.
body {
margin: 0px;
padding: 0px;
background-color: #f2f2f2;
}
html {
margin: 0px;
padding: 0px;
}
#logo {
height: 50px;
width: auto;
float: left;
}
nav ul {
list-style-type: none;
overflow: hidden;
margin: 0;
padding: 0;
background-color: #1a1a1a;
text-align: center;
border: 1px solid #e7e7e7;
display: inline-block;
width: 100%;
}
nav li {
display: inline-block;
}
nav a {
display: inline-block;
padding: 16px 15px;
text-decoration: none;
font-family: arial;
font-weight: bold;
color: white;
}
nav a:hover {
background-color: orange;
color: white;
}
nav {
margin-bottom: 0;
}
header {
margin-top: 0;
margin-bottom: 10px;
width: 100%;
font-family: arial;
font-size: 18px;
color: orange;
}
h1 {
position: absolute;
top: 150px;
width: 100%;
z-index: 1;
text-align: center;
}
#bannerImage {
width: 100%;
height: auto;
position: relative;
z-index: 0;
}
<nav>
<ul>
<img id="logo" src="https://67.media.tumblr.com/f607af5bc60d1b2837add83c70a2aa45/tumblr_inline_mrwv19q8fE1qz4rgp.gif"/>
<li>Game 2</li><li>Game 3</li>
</ul>
</nav>
<header>
<img id="bannerImage" src="http://static2.hypable.com/wp-content/uploads/2014/09/Hogwarts-lake.png"/>
<h1>Games</h1>
</header>
Just define the height of nav
body {
margin: 0px;
padding: 0px;
background-color: #f2f2f2;
}
html {
margin: 0px;
padding: 0px;
}
#logo {
height: 50px;
width: auto;
float: left;
}
nav ul {
list-style-type: none;
overflow: hidden!important;
margin: 0;
padding: 0;
background-color: #1a1a1a;
text-align: center;
border: 1px solid #e7e7e7;
display: inline-block;
width: 100%;
}
nav li {
display: inline-block;
}
nav a {
display: inline-block;
padding: 16px 15px;
text-decoration: none;
font-family: arial;
font-weight: bold;
color: white;
}
nav a:hover {
background-color: orange;
color: white;
}
nav {
margin-bottom: 0;
height: 51px;
}
header {
margin-top: 0;
margin-bottom: 10px;
width: 100%;
font-family: arial;
font-size: 18px;
color: orange;
}
h1 {
position: absolute;
top: 150px;
width: 100%;
z-index: 1;
text-align: center;
}
#bannerImage {
width: 100%;
height: auto;
position: relative;
z-index: 0;
}
<nav>
<ul>
<img id="logo" src="https://67.media.tumblr.com/f607af5bc60d1b2837add83c70a2aa45/tumblr_inline_mrwv19q8fE1qz4rgp.gif"/>
<li>Game 2</li><li>Game 3</li>
</ul>
</nav>
<header>
<img id="bannerImage" src="http://static2.hypable.com/wp-content/uploads/2014/09/Hogwarts-lake.png"/>
<h1>Games</h1>
</header>
The problem is caused by your ul having overflow:hidden so just remove it.
Added box-sizing:border-box to avoid horizontal scrollbar
UPDATE
I noticed that you have an img as child of ul which makes that invalid HTML.
So I tweaked your code to make it valid.
*,
*::before,
*::after {
box-sizing: border-box
}
body,
html {
margin: 0;
padding: 0;
background-color: #f2f2f2;
}
#logo {
height: 50px;
width: auto;
display: inline-block;
vertical-align:top
}
nav {
margin-bottom: 0;
background-color: #1a1a1a;
border: 1px solid #e7e7e7;
}
nav ul {
list-style-type: none;
width: calc(100% - 60px);
margin:0;
padding: 0;
text-align: center;
display: inline-block;
vertical-align: top;
}
nav li {
display: inline-block;
}
nav a {
display: inline-block;
padding: 16px 15px;
text-decoration: none;
font-family: arial;
font-weight: bold;
color: white;
}
nav a:hover {
background-color: orange;
color: white;
}
header {
margin-top: 0;
margin-bottom: 10px;
width: 100%;
font-family: arial;
font-size: 18px;
color: orange;
}
h1 {
position: absolute;
top: 150px;
width: 100%;
z-index: 1;
text-align: center;
}
#bannerImage {
width: 100%;
height: auto;
position: relative;
z-index: 0;
}
<nav>
<img id="logo" src="https://67.media.tumblr.com/f607af5bc60d1b2837add83c70a2aa45/tumblr_inline_mrwv19q8fE1qz4rgp.gif" />
<ul>
<li>Game 1
</li>
<li>Game 2
</li>
<li>Game 3
</li>
</ul>
</nav>
<header>
<img id="bannerImage" src="http://static2.hypable.com/wp-content/uploads/2014/09/Hogwarts-lake.png" />
<h1>Games</h1>
</header>
Try setting the height of the nav:
nav {
height: 50px;
}
Tried it out and works even without the margin set to 0.
I'm trying to create a very basic page of weblinks, arranged into 7 columns. Some of the links have sub-links. What I want to happen is when the mouse is held over a link that has sub-links, the sub-links are to appear just below it and just to the right (as shown in menu 2.2)
I've cobbled the code together from various websites (I'm not a coder!), and I'm almost there I think, but if you take a look at the jsfiddle you will see there is a problem with the 3rd column (I've cut the menu down in the example).
HTML
<div id="container">
<ul id="menu">
<li><h3>Menu 1</h3></li>
<li>1.1</li>
<li>1.2</li>
</ul>
<ul id="menu">
<li><h3>Menu 2</h3></li>
<li>2.1</li>
<li>2.2
<ul id="sub1">
<li>2.2.1</li>
<li>2.2.2</li>
<li>2.2.3</li>
</ul>
</li>
</ul>
<ul id="menu">
<li><h3>Menu 3</h3></li>
<li>3.1
<ul id="sub2">
<li>3.1.1</li>
<li>3.1.2</li>
<li>3.1.3</li>
</ul>
</li>
<li>3.2</li>
<li>3.3</li>
</ul>
CSS
a {
font-family: arial, helvetica, sans-serif;
font-size: 12px;
font-weight: 700;
text-decoration:none;
color:black;
display:block;
padding-top: 17px;
padding-bottom: 17px;
outline: 0;
}
a:visited {
color:black;
background-color:#fff;
}
a:hover {
color:#fff;
background-color:#302403;
display:block;
}
ul {
padding: 10px 0px 0px 0px;
margin: 1px;
display: inline-block;
text-align: center;
position:relative;
list-style-type:none;
float: left;
width: 160px;
background-color: #fff;
height: 400px;
}
ul#sub1 {
position: relative;
left: 30px;
top: -15px;
visibility: hidden;
height: auto;
padding: 0;
}
ul#sub2 {
position: relative;
left: 30px;
top: -15px;
visibility: hidden;
height: auto;
padding: 0;
}
ul#menu li:hover #sub1 {
visibility: visible;
height: auto;
z-index: 1;
border: 2px solid;
padding: 0;
}
ul#menu li:hover #sub2 {
visibility: visible;
height: auto;
z-index: 1;
border: 2px solid;
padding: 0;
}
http://jsfiddle.net/87u27aw0/
I can get it to work if I give each sub-menu it's own absolute position, but I'm sure there is a better way than how I'm doing it - using relative maybe? Oh, and it has to work in IE8 onwards.
Thanks in advance.
Graybags
Ok so below is a representation and description of what I am trying to achieve.
I am trying to add a navigation on the same line but after an hr tag so that the outcome is something like this...
----------------------------------------------------------------------------- Home Services Facilities About Contact
The best I can do shows one of the nav links but the others are not rendered
HTML
<ul>
<li class="active">HOME</li>
<li>SERVICES</li>
<li>FACILITIES</li>
<li>WITH US</li>
<li>CONTACT</li>
</ul>
</div>
css
body {
font-family: 'Source Sans Pro', sans-serif;
font-size: 12px;
color: #FFF;
}
.divider {
margin-top: 100px;
text-align: right;
position: relative;
}
.divider hr {
position: absolute;
z-index: 1;
width: 100%;
}
.divider ul {
float: right;
}
.divider li {
float: left;
}
.divider a {
position: absolute;
right: 0px;
top: 0px;
text-decoration: none;
color: #68C5DE;
background: #fff;
z-index: 10;
padding: 2px 20px;
}
jsfiddle
I think I may have over or under complicated things but this has left me scratching my head for 4 hours now.
Is this possible to achieve this in a way that still enables percentiles on the hr?
Any help would be much appreciated.
You have placed all links on top of each other with
.divider a {
position: absolute;
}
If the background isn't an issue then you can use a pseudo element :before to create the line then have the list items overlap it with a white background color to hide it.
HTML
<div class="nav-wrapper">
<ul class="navigation">
<li class="active">HOME</li>
<li>SERVICES</li>
<li>FACILITIES</li>
<li>WITH US</li>
<li>CONTACT</li>
</ul>
</div>
CSS
body {
font-family: 'Source Sans Pro', sans-serif;
font-size: 12px;
color: #FFF;
}
.nav-wrapper { margin-top: 50px; overflow: hidden; position: relative; }
.navigation {
float: right;
margin: 0;
padding: 0;
}
.navigation:before {
border: solid 1px #000;
content: '';
height: 0;
left: 0;
position: absolute;
top: 0.5em;
width: 100%;
}
.navigation li {
background-color: #fff;
float: left;
height: 1em;
line-height: 1em;
list-style-type: none;
margin: 0;
padding: 0 5px;
position: relative;
}
jsfiddle