Z-index [Bootstrap 3] - html

I have the code below for a sidenav, how do i make it display 5 list items at a time so the user has to scroll to see more?
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation" style="float:left">
<div class="well sidebar-nav">
<ul class="nav">
<li><strong>Select a subject</strong></li>
<li class="active">Maths</li>
<li>English</li>
<li>Art and Design</li>
<li>Drama</li>
<li>Music</li>
<li>Physics</li>
<li>Chemistry</li>
<li>Biology</li>
<li>Home economics</li>
<li>Physical Education</li>
<li>Computing Science</li>
<li>French</li>
<li>German</li>
<li>Mandarin</li>
<li>Religious Education</li>
<li>Modern Studies</li>
<li>Geography</li>
<li>History</li>
<li>Creative computing</li>
<li>Craft, Design and Technology</li>
</ul>
</div><!--/.well -->
</div><!--/span-->
</div><!--/row-->

Related

3 Different hover effects for 3 different items on 1 hover

I have this rather odd request, and its got me a little baffled.
Essentially I have something like this:
01
A Title
a item
another item
So when the number or the Title gets hovered on. 01 become's white A title becomes red and the list items become white.
Now I know you can do something like
.number:hover .title{
}
But not to sure how to go about this.
<div class="row we-below">
<div class="col-md-3">
<p class="below-num">01</p>
<h4 class="below-title">CONTENT</h4>
<ul>
<li>Research</li>
<li>Strategy</li>
<li>Copywriting</li>
<li>Custom content</li>
<li>Content planning</li>
<li>Campaign framework</li>
<li>Consulting</li>
</ul>
</div>
<div class="col-md-3">
<p class="below-num">02</p>
<h4 class="below-title">DESIGN</h4>
<ul>
<li>Art Direction</li>
<li>Digital Assets</li>
<li>Animation</li>
<li>Photography</li>
<li>Videography</li>
<li>Graphic Design</li>
<li>Packaging proposals</li>
<li>Studio Recording</li>
<li>Illustration</li>
<li>Branding</li>
<li>Iconography</li>
<li>Website Design</li>
<li>Social Media</li>
<li>Activations</li>
<li>Campaign Strategy</li>
<li>UI Design</li>
<li>UX Design</li>
</ul>
</div>
<div class="col-md-3">
<p class="below-num">03</p>
<h4 class="below-title">BUILD</h4>
<ul>
<li>App Creation</li>
<li>Packaging</li>
<li>Prototyping</li>
<li>Digital Production</li>
<li>Graphic Assets</li>
<li>Layout & Design</li>
<li>Google Adwords</li>
<li>Style Guides</li>
</ul>
</div>
<div class="col-md-3">
<p class="below-num">04</p>
<h4 class="below-title">EXECUTION</h4>
<ul>
<li>Media buying</li>
<li>Media planning</li>
<li>Scheduling</li>
<li>Community management</li>
<li>Website Maintenance</li>
<li>Public Relations</li>
<li>Project Management</li>
<li>Corporate Identity Document</li>
</ul>
</div>
</div>
The Desired effect for the on hover
Any Advice or tips would be appreciated. I'd like to learn how to achieve this properly thus the qeustion

you can use sibling css selector
.below-num:hover {
color: white;
}
.below-num:hover + .below-title {
color: red;
}

Try this way
.below-num:hover ~ .below-title {
color: red;
}
.below-num:hover ~ ul li {
color: white;
}
* {
background: black;
color: white;
}
li {
color: gray;
}
.below-num:hover ~ .below-title {
color: red;
}
.below-num:hover ~ ul li {
color: white;
}
<div class="row we-below">
<div class="col-md-3">
<p class="below-num">01</p>
<h4 class="below-title">CONTENT</h4>
<ul>
<li>Research</li>
<li>Strategy</li>
<li>Copywriting</li>
<li>Custom content</li>
<li>Content planning</li>
<li>Campaign framework</li>
<li>Consulting</li>
</ul>
</div>
<div class="col-md-3">
<p class="below-num">02</p>
<h4 class="below-title">DESIGN</h4>
<ul>
<li>Art Direction</li>
<li>Digital Assets</li>
<li>Animation</li>
<li>Photography</li>
<li>Videography</li>
<li>Graphic Design</li>
<li>Packaging proposals</li>
<li>Studio Recording</li>
<li>Illustration</li>
<li>Branding</li>
<li>Iconography</li>
<li>Website Design</li>
<li>Social Media</li>
<li>Activations</li>
<li>Campaign Strategy</li>
<li>UI Design</li>
<li>UX Design</li>
</ul>
</div>
<div class="col-md-3">
<p class="below-num">03</p>
<h4 class="below-title">BUILD</h4>
<ul>
<li>App Creation</li>
<li>Packaging</li>
<li>Prototyping</li>
<li>Digital Production</li>
<li>Graphic Assets</li>
<li>Layout & Design</li>
<li>Google Adwords</li>
<li>Style Guides</li>
</ul>
</div>
<div class="col-md-3">
<p class="below-num">04</p>
<h4 class="below-title">EXECUTION</h4>
<ul>
<li>Media buying</li>
<li>Media planning</li>
<li>Scheduling</li>
<li>Community management</li>
<li>Website Maintenance</li>
<li>Public Relations</li>
<li>Project Management</li>
<li>Corporate Identity Document</li>
</ul>
</div>
</div>

Ok i think i can help:
You will need this in your css:
The first is just what it always will be.
.number .title{
some style
}
The second is is for if you hover on it.
.number:hover .title{
}
If this isn't what you want please clarify i litle bit better.

Materialize- A Dropdown inside a tab

I need a dropdown like this inside a tab like this, I want the dropdown as tab using Materialize. How can I do this?

HTML:
<nav class="nav-extended">
<div class="nav-wrapper">
<div class="top-nav">
<i class="material-icons">menu</i>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>Sass</li>
<li>Components</li>
<li>JavaScript</li>
</ul>
</div>
<ul class="side-nav" id="mobile-demo">
<li>Sass</li>
<li>Components</li>
<li>JavaScript</li>
</ul>
<ul class="drop-tab">
<li>
<!--Disabled Tab-->
</li>
</ul>
<ul materialize="tabs" class="tabs tabs-transparent">
<li class="tab space-tab"><a class="active" href="#test2">Test 2</a></li>
<li class="tab">Disabled Tab</li>
<li class="tab">Test 4</li>
<li class="tab">Test 2</li>
<li class="tab">Disabled Tab</li>
<li class="tab"><a materialize="dropdown" href="#" class="dropdown-button" data-activates="dropdown1">Dropdown</a></li>
</ul>
</div>
</nav>
<div>something</div>
<ul id="dropdown1" class="dropdown-content black white-text">
<li>one</li>
<li>two</li>
<li class="divider"></li>
<li>three</li>
</ul>
CSS:
.tabs {
overflow-x: visible !important;
overflow-y: initial !important;
}
JS
$(document).ready(function() {
$('.dropdown-button').dropdown();
});

Dropdown in nav-extended what you want is an open issue for more information you can see the following link - github issues #3920

How to remove unwanted line breaks in html/css

Working on a Django templates with a theme bought on themeforest. The problem I'm having is that, whenever I use base template, the header automatically adds line breaks to the top but when using hardcoded template files, it seems fine.the white space at the top is an example of what im talking about I'd be glad if anyone could help me on how to remove this unwanted space.
Here's the code of the header base template:
{% load static %}
<div id="mainMenuBarAnchor"></div>
<header class="white_header">
<nav class="navbar navbar-default bootsnav">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="attr-nav">
<div class="upper-column info-box first">
<div class="icons"><i class="icon-telephone114"></i></div>
<ul>
<li><strong>Phone Number</strong></li>
<li>+1 900 234 567 - 68</li>
</ul>
</div>
</div>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="index6.html"><img src="{% static 'images/logo.png' %}" class="logo" alt=""></a>
</div>
<div class="collapse navbar-collapse" id="navbar-menu">
<ul class="nav navbar-nav navbar-right" data-in="fadeIn" data-out="fadeOut">
<li class="dropdown active">
Home
<ul class="dropdown-menu">
<li>Home Style 1</li>
<li>Home Style 2</li>
<li>Home Style 3</li>
<li>Home Style 4</li>
<li> Home Style 5</li>
<li> Home Style 6</li>
<li> Home Style 7</li>
<li> Home Style 8</li>
<li> Home Style 9</li>
<li> Home Fullscreen<span>new</span></li>
</ul>
</li>
<li class="dropdown megamenu-fw">
Listing
<ul class="dropdown-menu megamenu-content" role="menu">
<li>
<div class="row">
<div class="col-menu col-md-3">
<h5 class="title">PROPERTIES LIST</h5>
<div class="content">
<ul class="menu-col">
<li>Properties List</li>
<li>Single Property</li>
<li>Search by City</li>
<li>Search by Category</li>
<li>Search by Type</li>
</ul>
</div>
</div>
<div class="col-menu col-md-9">
<h5 class="title bottom20">PROPERTIES LIST</h5>
<div class="row">
<div id="nav_slider" class="owl-carousel">
<div class="item">
<div class="image bottom15">
<img src="{% static 'images/nav-slider1.jpg' %}" alt="Featured Property">
<span class="nav_tag yellow text-uppercase">for rent</span>
</div>
<h4>Park Avenue Apartment</h4>
<p>Towson London, MR 21501</p>
</div>
<div class="item">
<div class="image bottom15">
<img src="{% static 'images/nav-slider2.jpg' %}" alt="Featured Property">
<span class="nav_tag yellow text-uppercase">for rent</span>
</div>
<h4>Park Avenue Apartment</h4>
<p>Towson London, MR 21501</p>
</div>
<div class="item">
<div class="image bottom15">
<img src="{% static 'images/nav-slider3.jpg' %}" alt="Featured Property">
<span class="nav_tag yellow text-uppercase">for rent</span>
</div>
<h4>Park Avenue Apartment</h4>
<p>Towson London, MR 21501</p>
</div>
<div class="item">
<div class="image bottom15">
<img src="{% static 'images/nav-slider1.jpg' %}" alt="Featured Property">
<span class="nav_tag yellow text-uppercase">for rent</span>
</div>
<h4>Park Avenue Apartment</h4>
<p>Towson London, MR 21501</p>
</div>
<div class="item">
<div class="image bottom15">
<img src="{% static 'images/nav-slider2.jpg' %}" alt="Featured Property">
<span class="nav_tag yellow text-uppercase">for rent</span>
</div>
<h4>Park Avenue Apartment</h4>
<p>Towson London, MR 21501</p>
</div>
<div class="item">
<div class="image bottom15">
<img src="{% static 'images/nav-slider3.jpg' %}" alt="Featured Property">
<span class="nav_tag yellow text-uppercase">for rent</span>
</div>
<h4>Park Avenue Apartment</h4>
<p>Towson London, MR 21501</p>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
<li class="dropdown megamenu-fw">
Properties
<ul class="dropdown-menu megamenu-content bg" role="menu">
<li>
<div class="row">
<div class="col-menu col-md-3">
<h5 class="title">PROPERTY LISTINGS</h5>
<div class="content">
<ul class="menu-col">
<li>List Style 1</li>
<li>List Style 2</li>
<li>List Style 3</li>
<li>List Style 4</li>
<li>List Style 5</li>
</ul>
</div>
</div>
<div class="col-menu col-md-3">
<h5 class="title">PROPERTY LISTINGS</h5>
<div class="content">
<ul class="menu-col">
<li>List Style 5</li>
<li>List Style 6</li>
<li>Search by City</li>
<li>Search by Category</li>
<li>Search by Type</li>
</ul>
</div>
</div>
<div class="col-menu col-md-3">
<h5 class="title">PROPERTY DETAIL</h5>
<div class="content">
<ul class="menu-col">
<li>Property Detail 1</li>
<li>Property Detail 2</li>
<li>Property Detail 3</li>
<li>Single Property</li>
<li>Search by Type</li>
</ul>
</div>
</div>
<div class="col-menu col-md-3">
<h5 class="title">OTHER PAGES</h5>
<div class="content">
<ul class="menu-col">
<li>Favorite Properties</li>
<li>Agent Profile</li>
<li>404 Error</li>
<li>Contact Us</li>
<li>Testimonials</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</li>
<li class="dropdown">
Features
<ul class="dropdown-menu">
<li class="dropdown">
News
<ul class="dropdown-menu">
<li>news Style1</li>
<li>news Style2<span>new</span></li>
<li>news Style3<span>new</span></li>
</ul>
</li>
<li class="dropdown">
Property Agents
<ul class="dropdown-menu">
<li>Agent Style1</li>
<li>Agent Style2</li>
<li>Agent Style3<span>new</span></li>
<li>Agent Style4<span>new</span></li>
<li>Agent Style5<span>new</span></li>
</ul>
</li>
<li class="dropdown">
Agetn Profile Styles
<ul class="dropdown-menu">
<li>Agent Profile 1</li>
<li>Agent Profile 2</li>
</ul>
</li>
<li class="dropdown">
Testimonials
<ul class="dropdown-menu">
<li>Style 1</li>
<li>Style 2<span>new</span></li>
</ul>
</li>
<li class="dropdown">
FAQ's
<ul class="dropdown-menu">
<li>Style 1</li>
<li>Style 2<span>new</span></li>
</ul>
</li>
<li>Favorite Properties</li>
<li class="dropdown">
404 Error
<ul class="dropdown-menu">
<li>404 Error 1</li>
<li>404 Error 2<span>new</span></li>
</ul>
</li>
</ul>
</li>
<li>Contact Us</li>
<li>Buy Now</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
</header>

How to apply Bootstrap Sidebar & Sidebar collapse Menu

How to apply Bootstrap Sidebar & Sidebar collapse Menu
<ul class="nav nav-sidebar">
<li>
<a data-toggle="collapse" href="#collapseTwo" aria-expanded="true" data-parent="#accordion" >
<i class="glyphicon glyphicon-info-sign"></i>
About Us
</a>
</li>
<li>
<ul id="collapseTwo" class="collapse">
<li>
Quote
</li>
<br/>
<li>
About Us Page Content
</li>
</ul>
</li>
</ul>
so How to apply Bootstrap Sidebar & Sidebar only collapse Menu

try this code
html
<ul id="nav">
<li>Home</li>
<li>Products [+]
<ul>
<li>All Products</li>
<li>Product1 [+]
<ul>
<li>Product1</li>
</ul>
</li>
<li>Product2 [+]
<ul>
<li>Product2</li>
</ul>
</li>
</ul>
</li>
<li>Services [+]
<ul>
<li>Service 1</li>
<li>Service 2</li>
<li>Service 3</li>
</ul>
</li>
<li>Support</li>
<li>Contact</li>
</ul>
demo

Yahoo PureCss Vertical Nav

Hi Im new to PureCss of Yahoo. Im trying to make a vertical navigation with collapsible items
im wondering why ul in a li doesn't shows any display. No other css. PureCss of Yahoo only.
this is my code:
<div class="pure-u" id="nav">
Menu
<div class="nav-inner">
<div class="pure-menu pure-menu-open">
<ul>
<li>Dashboard</li>
<li>
Sales
<ul> <!-- this doesn't show :( -->
<li>Create Order</li>
<li>Orders</li>
<li>Sales Report</li>
</ul>
</li>
<li>Purchasing</li>
<li>Reports</li>
<li>Users</li>
<li>Help</li>
<li>Settings</li>
</ul>
</div>
</div>
</div>

As i Understood by the documentation you need add pure-menu-open to any menu that you want to show, and some other classes to make it look decent, this is anyways what i came up with.
<div class="pure-u" id="nav">
Menu
<div class="nav-inner">
<div class="pure-menu pure-menu-open">
<ul>
<li>Dashboard</li>
<li class="pure-menu pure-menu-open pure-menu-can-have-children pure-menu-has-children">
Sales
<ul> <!-- this doesn't show :( -->
<li>Create Order</li>
<li>Orders</li>
<li>Sales Report</li>
</ul>
</li>
<li>Purchasing</li>
<li>Reports</li>
<li>Users</li>
<li>Help</li>
<li>Settings</li>
</ul>
</div>
</div>
</div>
You can see a live version here http://jsfiddle.net/p4hus/