We Keep Coding

Collapse only on Mobile View Bootstrap 3

On the desktop view the "ul .item-description" should be visible, but on the mobile view it should be collapsed. I did it but it seems to me that this is a terrible decision. How can I improve this? Also, the arrow does not work the first time. How to fix it? I tried to fix this with js, but when I refresh the page I see how the arrow is twitching.
Sorry, my english is very bad.
jsfiddle - http://jsfiddle.net/p6t3brob/13/
html
<div class="collapsed-item">
<div class="collapse-element-title visible-xs" data-toggle="collapse" data-target="#items">collapse-title
</div>
<ul class="item-description hidden-xs" id="items">
<li class="title">title-text</li>
<li>item-item-item......</li>
<li>item-item-item......</li>
<li>item-item-item......</li>
<li>item-item-item......</li>
</ul>
</div>
css
.collapsed-item {
display: block;
outline: 1px solid red;
margin-top: 20px;
padding: 10px;
}
.collapse-element-title {
display: block;
outline: 1px solid orange;
position: relative;
padding-top: 10px;
padding-bottom: 10px;
}
.collapse-element-title:after {
display: block;
position: absolute;
top: 15px;
right: 10px;
width: 10px;
height: 10px;
border: 2px solid red;
border-top: none;
border-left: none;
transform: rotate(225deg);
content: "";
}
.collapse-element-title.collapsed:after {
top: 10px;
transform: rotate(45deg);
}
ul li {
margin-bottom: 10px;
}
.collapse-element-title {
cursor: pointer;
}
.collapse-element-title {
margin-bottom: 20px;
}
#media(max-width: 767px) {
#items.in,
#items.collapsing {
display: block!important;
}
}
#media(min-width: 768px) {
#crownDesc.collapse {
display: block !important;
height: auto !important;
}
}

Try to do like this http://jsfiddle.net/p6t3brob/15/
<div class="collapsed-item">
<div class="collapse-element-title visible-xs collapsed" data-toggle="collapse" data-target="#items">collapse-title
</div>
<ul class="item-description hidden-xs collapse" id="items">
<li class="title">title-text</li>
<li>item-item-item......</li>
<li>item-item-item......</li>
<li>item-item-item......</li>
<li>item-item-item......</li>
</ul>
</div>

Text always moving behind slider

I'm having an issue with some text that I want to put in a container below a slider always appearing behind the slider. I've tried different options in CSS but I can't seem to get the text moving.
Here is the example of the project: Example
Below you can find the html/css on jsfiddle
The text should appear in the div A3L_slogan. I've tried using margins, but that doesn't make it responsive am I right?
To say it in short. The text should appear below the carousel in the center of the page.
Hope anyone can point me in the right direction or help me out
body {
width: 100%;
margin: 0;
font-family: 'open sans', sans-serif;
zoom: 1;
}
header {
padding: 20px 0;
background-color: #ffffff;
box-shadow: 0 4px 6px rgba(0,0,0,.2);
}
.container {
padding: 0 20px;
margin: 0 auto;
}
.logo-box {
float: left;
margin-right: 20px;
}
.logo-box a {
outline: none;
display: block;
}
.logo-box img {display: block;}
nav {
overflow: hidden;
}
ul {
list-style: none;
margin: 0;
padding: 0px 10px 0px 0px;
float: right;
}
nav li {
display: inline-block;
margin-left: 25px;
height: 70px;
line-height: 70px;
transition: .5s linear;
}
nav a {
text-decoration: none;
display: block;
position: relative;
color: #868686;
text-transform: uppercase;
}
nav a:after {
content: "";
width: 0;
height: 2px;
position: absolute;
left: 0;
bottom: 15px;
background: #868686;
transition: width .5s linear;
}
nav a:hover:after {width: 100%;}
#media screen and (max-width: 660px) {
header {text-align: center;}
.logo-box {
float: none;
display: inline-block;
margin: 0 0 16px 0;
}
ul {float: none;}
nav li:first-of-type {margin-left: 0;}
}
#media screen and (max-width: 550px) {
nav {overflow: visible;}
nav li {
display: block;
margin: 0;
height: 40px;
line-height: 40px;
}
nav li:hover {background: rgba(0,0,0,.1);}
nav a:after {content: none;}
}
#slide {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position:fixed;
width:100%;
height:600px;
}
.slide1 {
background: url(http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-159465.jpg) no-repeat center center fixed;
}
.slide2 {
background: url(http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-160434.png) no-repeat center center fixed;
}
.slide3 {
background: url(http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-150988.jpg) no-repeat center center fixed;
}
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function () {
$('.fadein div:gt(0)').hide();
setInterval(function () {
$('.fadein :first-child').fadeOut().next('div').fadeIn().end().appendTo('.fadein');
}, 3500);
});
</script>
</head>
<body>
<header>
<div class="container">
<div class="logo-box">
<a href="/">
<img src="images/logo.png">
</a>
</div>
<nav>
<ul>
<li>Forums</li>
<li>Rules</li>
<li>Monetization</li>
<li>Sign-up</li>
<li>Staff</li>
</ul>
</nav>
</div>
</header>
<div class="fadein">
<div id="slide"class="slide1"></div>
<div id="slide"class="slide2"></div>
<div id="slide"class="slide3"></div>
</div>
<div class="A3L_Slogan">
<div class="slogan_title">
Hardcore Roleplay Community
</div>
</div>
</body>
</html>

#slide {
position: fixed;
}
to
#slide{
position: relative;
}
and the flow of the markup styling will be fixed. and you shouldn't use multiple ids slide with the same name in your markup it's very bad and will cause a hell of problems in the nearest future.
update:
As discussed in the comments, a better solution is to remove the duplicated divs and using img tags plus applying changes on js and css to avoid flickering and overflow-x. https://codepen.io/anon/pen/eeymgo

How to apply css rules for hidden submenu?

How to apply the css rules for hidden submenu? I've tried to add some JS, but there is a problem as it doesn't work.
Below there are the samle of the code I work about. Idea is that on the click to anchor text 'A' it should be shown a submenu. Thanks in advance for any advices.
var sub=document.querySelector("#subBox"),
subToggle=document.querySelector("#submenu");
if (subToggle){
subToggle.addEventListener("click",
function(e){
if(sub.className=="open"){
sub.className="";
}else{
sub.className="open";
}
e.preventDefault();
}, false );
}
body {
background: #fff;
font-family: 'Verdana', sans;
color: #fff;
text-align: center;
}
#media only screen and (max-width:768px){
body{font-size:16px;}
}
#media only screen and (min-width:769px){
body{font-size:32px;}
}
ul li{list-style-type: none;}
li{display:inline;}
a, li a{
text-decoration: none;
outline: none;
color:#fff;
}
#menu{
width:100vw;
height:100vh;
display:block;
position:absolute;
top:0;
left:0;
background:#eacebe;
overflow:hidden;
}
#subBox{
max-width:0;
max-height:0;
overflow:hidden;
}
#subBox .open{
width:200px;
height:200px;
display:block;
position:relative;
background:gray;
color:#fff;
}
.skip{
clip: rect(0 0 0 0);
margin: -1px;
overflow:hidden;
display: none;
position: absolute;
top: -1px;
left: -1px;
z-index: -1;
}
<body>
<h1 class='skip'>Exploration of css rules of the hidden submenu</h1>
<div id='nav'>
<nav nav ul>
<h2 class='skip'>Menu with one submenu</h2>
<div id='menu'>
<ul>
<li id='submenu'>
<a href='/a'>A <!--A-->
<div id="subBox">
<ul>
<li><a href='/aOne'>1</a><li> <!--A/1-->
<li><a href='/aTwo'>2</a></li> <!--A/2-->
<li><a href='/aThree'>3</a></li> <!--A/3-->
</ul>
</div>
</a>
</li>
<li><a href='/b'>B</a><li> <!--B-->
<li><a href='/c'>C</a></li> <!--C-->
</ul>
</div>
</nav>
</div>
</body>

You were close. You're applying the .open class to #subBox, so change your selector to #subBox.open.
var sub=document.querySelector("#subBox"),
subToggle=document.querySelector("#submenu");
if (subToggle){
subToggle.addEventListener("click",
function(e){
if(sub.className=="open"){
sub.className="";
}else{
sub.className="open";
}
e.preventDefault();
}, false );
}
body {
background: #fff;
font-family: 'Verdana', sans;
color: #fff;
text-align: center;
}
#media only screen and (max-width:768px) {
body {
font-size: 16px;
}
}
#media only screen and (min-width:769px) {
body {
font-size: 32px;
}
}
ul li {
list-style-type: none;
}
li {
display: inline;
}
a,
li a {
text-decoration: none;
outline: none;
color: #fff;
}
#menu {
width: 100vw;
height: 100vh;
display: block;
position: absolute;
top: 0;
left: 0;
background: #eacebe;
overflow: hidden;
}
#subBox {
max-width: 0;
max-height: 0;
overflow: hidden;
}
#subBox.open {
width: 200px;
height: 200px;
display: block;
position: relative;
background: gray;
color: #fff;
overflow: visible;
max-height: 100%;
min-height: 100%;
}
.skip {
clip: rect(0 0 0 0);
margin: -1px;
overflow: hidden;
display: none;
position: absolute;
top: -1px;
left: -1px;
z-index: -1;
}
<body>
<h1 class='skip'>Exploration of css rules of the hidden submenu</h1>
<div id='nav'>
<nav nav ul>
<h2 class='skip'>Menu with one submenu</h2>
<div id='menu'>
<ul>
<li id='submenu'>
<a href='/a'>A <!--A-->
<div id="subBox">
<ul>
<li><a href='/aOne'>1</a>
<li>
<!--A/1-->
<li><a href='/aTwo'>2</a></li>
<!--A/2-->
<li><a href='/aThree'>3</a></li>
<!--A/3-->
</ul>
</div>
</a>
</li>
<li><a href='/b'>B</a>
<li>
<!--B-->
<li><a href='/c'>C</a></li>
<!--C-->
</ul>
</div>
</nav>
</div>
</body>

HTML/CSS: display circular divs in horizontal scrolling lineup? Divs appear on top of each other?

I have succeeded in centering a div containing a three.js animation within another circular div by setting the outer div to display of table and placing this all within a ul. I
I am having problems however creating a horizontal lineup of these circular divs (with another div within each) using li - no matter the padding I use, all the divs appear on top of each other. I ultimately want these divs to scroll horizontally but haven't begun to tackle that issue.
Here is a screenshot of my problem:
CSS:
.circle1 {
background: #50a3a2;
background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
display: table;
border-radius: 50%;
position: absolute;
margin: 50px auto;
height: 100px;
width: 100px;
}
.circle2 {
background: #000;
display: table;
border-radius: 50%;
position: absolute;
margin: 50px auto;
height: 100px;
width: 100px;
}
#btn1 {
vertical-align: middle;
text-align:center;
left:0%;
position:relative; /*makes left effective*/
display:table-cell;
}
#btn2 {
vertical-align: middle;
text-align:center;
left:0%;
position:relative; /*makes left effective*/
display:table-cell;
}
ul {
}
li {
display: table;
list-style-type: none;
padding: 20px;
}
HTML:
<div class="wrapper" style="background-color:lightgrey;">
<div class="container">
<h1 id="titleHead">Projects</h1>
<a href="">
<ul>
<li>
<div class ="circle1">
<div id ="btn1"></div>
</div>
</li>
<li>
<div class ="circle2">
<div id ="btn2"></div>
</div>
</li>
</ul>
</a>
</div>
</div>
<script src="js/lowpolyPlanets.js"></script>
<script src="js/test2.js"></script>
What's going wrong here?
EDIT - li elements are skewed to the left:
CSS-
.circle1 {
background: #50a3a2;
background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
display: table;
border-radius: 50%;
position: relative;
margin: 50px auto;
height: 100px;
width: 100px;
}
.circle2 {
background: #000;
display: table;
border-radius: 50%;
position: relative;
margin: 50px auto;
height: 100px;
width: 100px;
}
#btn1 {
vertical-align: middle;
text-align:center;
left:0%;
position:relative; /*makes left effective*/
display:table-cell;
}
#btn2 {
vertical-align: middle;
text-align:center;
left:0%;
position:relative; /*makes left effective*/
display:table-cell;
}
.ulContainer {
text-align: center;
}
ul {
margin: 0;
padding: 0;
background-color: red;
}
li {
float: left;
list-style-type: none;
padding: 20px;
}
HTML:
<div class="wrapper" style="background-color:lightgrey;">
<div class="container">
<h1 id="titleHead">Projects</h1>
<div class = "ulContainer">
<ul>
<li>
<div class ="circle1">
<div id ="btn1"></div>
</div>
</li>
<li>
<div class ="circle2">
<div id ="btn2"></div>
</div>
</li>
</ul>
</div>
</div>
</div>

Are you trying to make it look like below?
If yes then, Give float:left to your li and try removing circle1's position or changing it to relative.

How To Make Entire 'li' Area and Text A Clickable Link

I'm trying to make the entire li tag area clickable as well as the text which I have made clickable already. I have tried giving it a href property but that doesn't work. I have already set the li background to change color when it's hovered over but as I said, how do I also make the entire area clickable? Thanks in advance.
HTML:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Lakeside Books</title>
<link rel="stylesheet" type="text/css" href="masterstyle.css">
<meta name="viewsize" content="width-device-width,initial-scale=1.0">
<!--[if IE]>
<script type="text/javascript" src="_http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="sidebar">
<nav id="nav">
<h3 id="welcometext">Welcome To<br>Lakeside Books</h3>
<div id="searchbar">
<form action="http://www.example.com/search.php">
<input type="text" name="search" placeholder=" ...Search Book Title" class="searchstyle"/>
</form>
</div>
<ul>
<li style="background-color: #333">
<a href="1Index.html" class="link">
Home
</a>
</li>
<li>
<a href="2Catgeories.html" class="link">
Categories
</a>
</li>
<li>
<a href="http://example.com" class="link">
Bestsellers
</a>
</li>
<li>
<a href="http://example.com" class="link">
Contact
</a>
</li>
</ul>
</nav>
</div>
<div id="sectionone">
<div id="containerone">
<div id="header">
<div id="logo">
<h1>LAKESIDE BOOKS</h1>
<p>KERRYS LOCAL BOOKSTORE</p>
</div>
</div>
</div>
</div>
<div id="sectiontwo">
<div id="containertwo">
<h2 id="sectwohead">Best Selling Books Right Now</h2>
<div id="bestsellerimages">
<figure>
<img src="Images/4.jpg" alt="book1" height="200" width="131" class="imgbot">
<figcaption>The Girl On The Train <br>
<span style="font-style: italic; font-size: 0.9em">Paula Hawkins</span></figcaption>
</figure>
<figure>
<img src="Images/3.jpg" alt="book2" height="200" width="131" class="imgbot">
<figcaption>Meet Me In Manhattan <br>
<span style="font-style: italic; font-size: 0.9em">Claudia Carroll</span></figcaption>
</figure>
<figure>
<img src="Images/5.jpg" alt="book1" height="200" width="131" class="imgbot">
<figcaption>The Pointless Book 2 <br>
<span style="font-style: italic; font-size: 0.9em">Alfie Deyes</span></figcaption>
</figure>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
html, body { /* ### */
margin:0;
padding:0;
height:100%;
width:100%;
}
body {
background-color: #fdfdfd;
font-family: Arial, "Open Sans", sans-serif-light, sans-serif, "Segoe UI";
}
#wrapper {
width: 100%;
height: 100%;
margin:0 0 0 20%; /* ### */
}
#sidebar {
background-color: #212528;
position: fixed;
width: 20%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
}
#nav {
color: #DADADA;
display: block;
max-width: 100%;
}
#nav ul {
padding-left: 0;
}
#nav li {
list-style-type: none;
margin: 0;
padding: 0.75em 0 0.75em 0;
text-align: center;
max-width: 100%;
}
#nav li:hover {
background:#333;
}
#nav li a {
display: block;
padding: 0.5em 0;
}
.link {
text-align: right;
margin-right: 25%;
letter-spacing: 1px;
}
a:link, a:visited, a:hover, a:active{
color: #DADADA;
text-decoration: none;
}
#welcometext {
text-align: center;
font-style: italic;
text-transform: uppercase;
font-size: 1em;
margin-top: 2em;
}
#searchbar {
width: 70%;
margin-left: auto;
margin-right: auto;
padding: 1em 1em 0.5em 1em;
text-align: right;
}
#searchbar .searchstyle{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#searchbar input {
max-width: 95%;
}
#sectionone {
/*position: fixed;*/
top: 0;
right: 0;
width: 80%;
}
#containerone {
margin-top: 0;
width: 80%;
height: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
border-bottom: 2px solid #DADADA;
box-shadow: inset 0 -6px 0 0 #fdfdfd, inset 0 -8px 0 0 #DADADA;
}
#header {
margin: 6em 0 6em 0;
}
#logo h1 {
color: #ed786a;
text-shadow: 0.1em 0.1em 0 rgba(0, 0, 0, 0.1);
letter-spacing: 13px;
}
#logo p {
margin-top: -0.6em;
color: #888888;
letter-spacing: 4px;
font-size: 0.85em;
}
#sectiontwo {
width: 80%;
top: 0;
right: 0;
}
#containertwo {
width: 80%;
height: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
color: #888888;
}
#sectwohead{
margin: 2em 0 2em 0;
color: #888888;
}
#bestsellerimages{
float: left;
display: inline-block;
width: 100%;
max-width: 100%;
margin: 0 0 2em 0;
}
#bestsellerimages img{
padding: 0;
}
#bestsellerimages figure{
display: inline-block;
width: 131px;
}
#bestsellerimages figcaption{
font-size: 1.2em;
}
#bestsellerimages figure .imgbot{
margin: 0 0 0.5em 0;
}
This should help see more clearly what I'm trying to do, as you can see in this image - http://i.imgur.com/OZIt9TM.png - The only clickable area is the blue part within chromes inspect that's easy to see. So what I'm trying to do is make the entire area of that specific 'Home Li' clickable.

Rule #1 of list-based menus: Style the links, not the wrappers. Only style the list for positioning (display/float etc.).
Use display:block on your A-tags and put all styling on that tag, not the list itself.
Home
Move background-color: #333 to the .link class in your css, and add display:block to that declaration.

If you are using jQuery (assuming the tags are right) you can do it like this without styling the anchor tags:
$('ul li').click(function() {
location.href = $(this).find('a').prop('href');
});
I would suggest a class name for the ul list like <ul class="navigation">
$('ul.navigation li').click(function() {
location.href = $(this).find('a').prop('href');
});

Ups sorry...Try this..
#nav li {
list-style-type: none;
/* margin: 0; */
/* padding: 0.75em 0 0.75em 0; */
/* text-align: center; */
/* max-width: 100%; */
/* display: block; */
}
#nav li a {
display: block;
padding: 0.5em 0;
margin: 0;
padding: 0.75em 0 0.75em 0;
text-align: center;
max-width: 100%;
}

Wrap your A tag around the LI tag. For example look at the google link. You're putting the A tag around the text only, not the entire element.
<ol>
<a href="http://google.com">
<li>google</li> <!-- DO THIS -->
</a>
<li>
yahoo <!-- YOUR CURRENTLY DOING THIS -->
</li>
</ol>