We Keep Coding

Change my sidebar menu into button for mobile view and smaller screen

So i'm new to bootstrap.and i was trying out to change my sidebar into a button when screen size is small.
This is a little what i need. I can tweak around a little bit to make it work for my needs except for one. There is a sidebar with links. That sidebar disapears when you make you screen smaller (as would have happened on mobile devices). I want to make sure that the sidebar disapears but have it back with a button.
Here is my code.
HTML and CSS i am using :
#side-bar {
height: 100%;
background-color: #333f4d;
padding: 0 !important;
font-weight: 600;
color: #d7d9db;
position: fixed;
float: left;
}
#top-bar {
background-color: #1f2730;
padding-top: 15px;
padding-bottom: 3px;
}
#top-bar:hover {
background-color: #aaa;
font-weight: 700;
}
.sidebarclr {
background-color: #fafafa !important;
margin-left: -14px;
}
#logo{
margin-left: 35px;
margin-bottom: 8px;
width:32px;
height:32px;
}
li img{
width:16px;
height:16px;
margin-right: 5px;
}
.list{
text-decoration:none!important;
padding-bottom: 15px;
padding: 10px;
}
#sidebl > li a{
color:#d7d9db !important;
}
#sidebl >li a:hover{
background-color:#aaa !important;
text-decoration:none !important;
}
#sidebl >li a:focus{
background-color:#aaa !important;
text-decoration:none !important;
}
#user{
margin-right: 10px;
margin-left: 10px;
float: left;
}
.userc{
border-radius: 3px;
height:32px;
margin-top:170px;
}
.light{
color: #8f98a3 !important;
font-weight: normal;
font-size:11px!important;
}
.username{
display:inline-block !important;
line-height: 16px;
float: left;
margin-left:5px;
}
.userc:hover{
background-color:#aaa;
text-decoration:none;
}
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<div class="col-sm-2" id="side-bar">
<div id="top-bar">
<a href="#" title="home page" target="_blank">
<img id="logo" src="images/logo.png" alt="">
<h2 class="title"> Maven Up</h2>
</a>
</div>
<div>
<ul class="nav" id="sidebl">
<li class="list">
<img src="images/icons/006-dashboard.png" alt=""> DashBoard
</li>
<li class="list">
<img src="images/icons/005-post-it.png" alt=""> Entries
</li>
<li class="list">
<img src="images/icons/004-worlwide.png" alt=""> Globals
</li>
<li class="list">
<img src="images/icons/003-picture.png" alt="">Assets
</li>
<li class="list">
<img src="images/icons/002-users.png" alt=""> Users
</li>
<li class="list">
<img src="images/icons/001-settings.png" alt=""> Setting
</li>
</ul>
</div>
<div class="userc">
<div id="user"><img src="images/user.png" alt=""></div>
<div class="username"> User
<div class="light">admin</div>
</div>
<!--- Navigation Bar User --->
<ul class="nav navbar-nav">
<li class="dropup">
<span class="gaparowup glyphicon glyphicon-chevron-up"></span>
<ul class="dropdown-menu">
<li>Account Settings</li>
<li>User stats </li>
</ul>
</li>
</ul>
<!--- Navigation Bar End --->
</div>
<!--- userc class div end --->
</div>
<!-- COL SM 2 END -->

bootsnipp has some great examples for that. Take a look at one of those. Most of them you can change to mobile versions so that they are only showing the button on mobile.
Maybe this guide helps as well. I really think there are great tutorials out there.

How can i slidetoggle to the left?

I have two glyphicon which i want to show the information to the left using slidetoggle. But, It opens downward. Please, help.
$(document).ready(function() {
$('#show_icon,.showhide_icon').hover(function() {
$(this).next().slideToggle("slow");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<header class="masthead">
<div class="container">
<div class="nav-header">
<div class="pull-right hidden-sm">
<ul>
<li class="listmenu">
<div id="show_icon"><span class="glyphicon glyphicon-shopping-cart"></span></div>
<div id="categories">
<div CLASS="showhide_icon">Login/Register</div>
</div>
</li>
<li class="listmenu">
<div id="show_icon"><span class="glyphicon glyphicon-shopping-cart"></span></div>
<div id="categories">
<div CLASS="showhide_icon">Shopping Bag</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</header>
The CSS Properties goes like this.
CSS Properties
.listmenu {
float: left;
width: auto;
margin-right: 0;
height: 30px;
padding: 0 10px;
overflow: hidden;
}
#categories {
display: none;
width: 200px;
}

slideToggle() animates on the height of the element which is why you're seeing it open downward.
If you want a animation like you've linked in the comments use animate() to handle the width of the element. The site linked is using overflow: hidden and changing the width of the container to show the icon only or icon and text.
Edit: After reviewing your question again, a better solution might be to handle this with css:
The html is edited to include only what is needed to make this work. You'll want to review this for your purposes as well:
.listmenu {
display: inline;
}
.umMenu {
height: 16px;
max-width: 14px;
display: inline-block;
overflow: hidden;
}
.listmenu:hover .umMenu {
max-width: 500px;
/*Can be any # of sufficient width to display all content*/
transition: 2s;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<header class="masthead">
<div class="container">
<div class="nav-header">
<div class="pull-right hidden-sm">
<ul>
<li class="listmenu">
Login/Register
</li>
<li class="listmenu">
Shopping bag
</li>
</ul>
</div>
</div>
</div>
</header>

How to make an image in a separate div change on hover of nav?

I have a site I'm working on where I have a nav bar in a div at the top of the page followed by a separate div which contains an image directly below it.
I'm trying to figure out the best way to change the image by hovering over each part of the nav bar.
Basically I want an image for home to show up when the home nav feature is hovered and so on with the rest of the menu.
UPDATE:
As I tried to explain before (not as clear as I could have) I want to make each nav bar element (Home, Downloads, etc.) show a different image in the div below it. Here is the section of code for the two elements.
<li class="active">Home</li>
<li >About</li>
<li >Mods</li>
<li>Forums</li>
<li >Downloads</li>
<li>Blog</li>
</ul>
</div>
</nav>
<div class="parallax-container">
<div class="container" style="background: rgb(55,71,79); width:960px; padding-top: 10px; padding-left: 50px; border: 2px; border-radius: 50px;">
<div class="row">
<div class="hover-image white-text col s12 l6">
<img src="homeimage.png" class="hover image" style="height:auto; width:auto; max-width: 860px; max-height: 860px;"/>
<h5 class="hover-header" style="padding-left: 20px;">Home</h2>
<p class="hover-paragraph" style="padding-left: 25px;">Welcome to the page!</p>
</div>
</div>
</div>
<div class="parallax"><img src="/img/image.png"></div>
</div>
<style>
.hover-image {
position: relative;
width: 100%;
margin: auto;
}
.hover-header {
position: absolute;
top: 350px;
left: 10;
width: 100%;
}
.hover-paragraph {
position: absolute;
top: 380px;
width: 100%;
}
</style>
Page Layout

Try CSS something like this;
.nav:hover .image{
background-image: url('path/to/image.ext');
}
If you can share your code, I can be more specific.

try this code -
CSS -
#navImage img{
display:block;
width:500px;
height:auto;
}
#myNav{
list-style-type: none;
}
#myNav li {
display: inline;
padding: 10px;
}
#myNav li a:hover {
color:#00ffff;
}
#navImage img{
display:none;
}
HTML
<ul id="myNav">
<li>Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<div id="navImage">
<img src="img_chania.jpg" alt="Chania">
<img src="img_chania2.jpg" alt="Chania">
<img src="img_flower.jpg" alt="Flower">
<img src="img_flower2.jpg" alt="Flower">
</div>
JS to initialize (with jQuery) -
$("#myNav li a").on('mouseover', function(){
$("#navImage img").hide().eq($(this).closest('li').index()).show();
});
Please note, if you are working on responsive design(using bootstrap navigation), you need to do changes accordingly.
jsfiddle - https://jsfiddle.net/guruling/k2zgot5r/

.myButtonLink {
display: block;
width: 100px;
height: 100px;
background: url('/path/to/myImage.png') bottom;
text-indent: -99999px;
}
.myButtonLink:hover {
background-position: 0 0;
}
<a class="myButtonLink" href="#LinkURL">Leaf</a>
Do you want something like this. Please check this link:-http://kyleschaeffer.com/development/pure-css-image-hover/

using css and javascript onclick, link color change when they are clicked and being activated untill I click other link [duplicate]

This question already has an answer here:
keeping a: active until another link is clicked
(1 answer)
Closed 7 years ago.
I'm trying to do this: user clicks link, then the clicked link turns yellow and stay yellow until I click a link that's next to the clicked link. so they need to toggle. (not :active) this should be done with onclick I think. I personally want to do with css tho.
<div id="Space">
<ul>
<li role="presentation" class="sort">
hot
</li>
<li role="presentation" class="date">
update
</li>
</ul>
</div>
currently in css, I have
#Space li {
display: inline;
margin-left: 10px;
padding-bottom: 11px;
}
#Space li:hover {
border-bottom: 5px solid #6495ED;
}
and nothing for js. Javascript goes in html with <script></script> right? Any help would be appreciated, thank you :)

You can use :active along with :hover:
#Space li:active,
#Space li:hover {
border-bottom: 5px solid #6495ED;
}
Now, this kinda stays till you click another link. But there are better methods using <input type="radio" /> that persists.
#Space li {
display: inline;
margin-left: 10px;
padding-bottom: 11px;
}
#Space li:focus,
#Space li:hover {
border-bottom: 5px solid #6495ED;
outline: 0;
}
<div id="Space">
<ul>
<li role="presentation" class="sort" tabindex="1">
hot
</li>
<li role="presentation" class="date" tabindex="1">
update
</li>
</ul>
</div>
I used :focus in the above example, because the :hover is tied to the <li> and not in <a>.
JavaScript version could be as simple as adding and removing an .active class.

Use color in hover: selecor
#Space li {
display: inline;
margin-left: 10px;
padding-bottom: 11px;
}
#Space li:hover {
border-bottom: 5px solid #6495ED;
color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="Space">
<ul>
<li role="presentation" class="sort">
hot
</li>
<li role="presentation" class="date">
update
</li>
</ul>
</div>

How can I incorporate a slideshow into HTML?

I would like to know if you could guide me on making a slideshow for my HTML document. I know that I will need JavaScript, and I already know how to MAKE the slideshow, but how would I make the slideshow able for view in my html document? Here is the code, and I am using Adobe Brackets as an editor:
//////HTML CODE ////////
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css" type="text/css">
<title>Quentrum</title>
</head>
<body>
<div id="wrapper">
<header>
<nav>
<ul>
<li>
<a href="index.html">
Quentrum
</a>
</li>
<li>
<a href="Store.html">
Store
</a>
</li>
<li>
<a href="Support.html">
Support
</a>
</li>
</ul>
</nav>
</header>
<section>
<h>----------Slideshow Goes HERE-----------</h>
</section>
<footer>
<p>Quentrum 2015</p>
</footer>
</div>
</body>
</html>
//////// CSS CODE /////////
body{
background-color:lightgray;
}
#wrapper{
width:inherit;
}
header{
background-color: white;
clear:both;
height: 50px;
border:solid 1px black;
border-radius: 5px;
width: inherit;
padding-right:195px;
padding-left:195px;
}
header ul {
list-style: none;
}
header ul li{
display: inline;
padding: 115px;
}
header a {
color: #777;
text-decoration: none;
font-family: Georgia;
font-size: 17px;
}
header a hover:{
color:black;
}
section{
clear: both;
height: 550px;
width: 100%;
border: solid 1px darkblue;
border-radius: 5px;
background: blue;
font-family: Georgia;
}
footer{
width: 100%;
border: solid 1px gray;
border-radius: 5px;
background: lightgray;
clear: both;
}
footer p {
font-family: Geogria;
margin-left: 30px;
}
Thank you in advance!!!
EDIT[I don't think I really need to paste any Javascript code, but please TELL me if you need it, and I'll get it up. For the sake of this when you answer, you can just pretend that the name of my javascript file is "example"
Many thanks.]

Hope this helps extremely simple simply add this code where you want it then there is no left and right links to next n prev if want images same size simply change image size read notes/ comments for further details
<!-- Add below This To HEAD -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- Add below this to your style sheet -->
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
<!-- Add Below this where you want it in your page -->
<div class="container">
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<!--
Add
<li data-target="#myCarousel" data-slide-to="next number"></li>
to how many images you want or if you dont want any links to change images atall delete this up to indicators
-->
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="firstimg.jpg" alt="Chania" width="460" height="345">
</div>
<div class="item">
<img src="secondimg.jpg" alt="Chania" width="460" height="345">
</div>
<div class="item">
<img src="thirdimage.jpg" alt="Flower" width="460" height="345">
</div>
<div class="item">
<img src="fourthimage.jpg" alt="Flower" width="460" height="345">
<!-- Add for more images
<div class="item">
<img src="nextimage.jpg" alt="..." width="460" height="345">
If want captions Add like so
<img src="filename.jpg" alt="alt">
<div class="carousel-caption">
<h3>Title</h3>
<p>Caption</p>
</div>
</div>
-->
</div>
</div>
</div>
</div>

This might not be the way you want to do it, however there is a built in Bootstrap slideshow option.
Its called a carousel, here is the link for a tutorial: http://www.w3schools.com/bootstrap/bootstrap_carousel.asp

You can do it via jQuery.
$(function () {
$("#slideshow > div:gt(0)").hide();
setInterval(function () {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
});
Example: JSFiddle

i have resolved the footer and navigation issue for you I believe simply download this new css file and replace it with current bootstrap.css
Link to Bootstrap CSS Click To Download
Check your css as I noticed it says lightgray not lightgrey
also add this to your current main.css
footer p {
font-family: Geogria;
margin-left:30px;
font-size:16px; /* Font Size You Want */
}
and regarding you background color change it to lightgrey and should work ok once done these steps

What kind of slideshow are you looking forI am currently create one using jquery and php
a preview of the slideshow can be found at http://rbgraphix.co.uk/gallery/display/New/slideshow.php
at the moment it is not automatic but I am in the process of making it this way and also has an upload page /upload.php and a delete page (currently in coding (for admin users)