I have change logo image in a single navigation page. It means, for example, there are 2 tabs in the page like Home and Contact.
This is a single page navigation with vertical alignment tabs and above to that there will be logo. When I scroll to bottom it will move to the contact tab and background color of that page also changes. At this time I have change the image too.
Below is the CSS file
/* ----anchor---- */
a, a:link{
color:#6db0da;
text-decoration:none;
}
a:hover, a:active{
color:#6db0da;
text-decoration:underline;
}
.story { height: 1000px; padding: 0; margin: 0; width: 100%; max-width: 1920px; position: relative; margin: 0 auto; box-shadow: 0 0 50px rgba(0,0,0,0.8);}
#home { background: #00617b; }
#contact { background: #46AA27; }
#container {
width: 945px;
margin: 0 auto;
display: block;
overflow: hidden;
z-index: 55;
height: 100%;
}
nav{
width: 250px;
height: 100%;
float: left;
display: block;
overflow: hidden;
text-align: center;
position: fixed;
z-index:500;
}
nav #nav-logo{
font-family: "BebasNeueRegular", Arial, Helvetica, sans-serif;
font-size:43px;
text-transform:uppercase;
text-align:center;
color:#FFF;
text-decoration:none;
display:block;
font-weight:normal;
text-shadow: #2B0D09 0px 1px 0px;
background:url(../images/Home.png) no-repeat center;
height: 250px;
width: 250px;
}
below is the html page
<!DOCTYPE HTML>
<html class="no-js" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Single Page Navigation</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section id="top"></section>
<section id="home" class="story">
<div id="container">
<nav><div class="active" id="nav-logo"></div>
<ul id="nav">
<li class="active" id="nav-1">Home</li>
<li id="nav-2">Contact</li>
</ul>
<div class="bg_bottom"></div>
</nav>
<div id="content">
<div id="loader" class="loader"></div>
<div id="ps_container" class="ps_container"> <span class="ribbon"></span>
<div class="ps_image_wrapper">
<img src="images/1.jpg" alt=""/>
</div>
<div class="ps_next"></div>
<div class="ps_prev"></div>
<ul class="ps_nav">
<li class="selected">Image 1</li>
<li>Image 2</li>
<li>Image 3</li>
<li>Image 4</li>
<li>Image 5</li>
<li class="ps_preview">
<div class="ps_preview_wrapper">
</div>
<span></span>
</li>
</ul>
</div>
</div>
</div>
</section>
<section id="contact" class="story">
<div id="container">
<div id="content">
Test
</div>
</div>
</section>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="js/jquery.tweet.js" charset="utf-8"></script>
<script src="js/jquery.slideshow.js"></script>
<script src="js/jquery.nav.js"></script>
<script src="js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script src="js/form.js" type="text/javascript"></script>
</body>
</html>
I have to make that nav-logo CSS style to generic to change the image on moving from one table to another.
$("yourtablename").mouseenter(function ( ) {
$("#nav-logo").css({"background-image":"url(yourimageurl)"});
})
something like this
Related
I have managed to create a navigation menu that is responsive however on small screen it gets displayed as per the photo attached. I want to group the links into a drop down menu button that display for small screens.
This is how it's displayed on large screen
This is how it's displayed on small screen
<header>
<!-- Navigation Links -->
<div class="overlay"></div>
<div class="topnav">
<nav>
<ul>
<li><div class="image-icon"><img src="img/icons/face_icon.ico" alt="Face Icon"></div>Face</li>
<li><div class="image-icon"><img src="img/icons/forehead_icon.ico" alt="Forehead Icon"></div>Forehead</li>
<li><div class="image-icon"><img src="img/icons/eyebrow_icon.ico" alt="Eyebrow Icon"></div>Eyebrow</li>
<li><div class="image-icon"><img src="img/icons/nose_icon.ico" alt="Nose Icon"></div>Nose</li>
<li><div class="image-icon"><img src="img/icons/lip_icon.ico" alt="Lip Icon"></div>Lips</li>
<li><div class="image-icon"><img src="img/icons/ear_icon.ico" alt="Ear Icon"></div>Ears</li>
</ul>
</nav>
</div> <!-- .cd-slider-nav -->
</header>
.topnav {
text-align: center;
overflow: hidden;
position: relative;
}
.topnav ul {
padding: 0;
margin: 0;
}
.topnav ul li {
display: inline-block;
margin: 30px 30px;
}
.topnav ul li a {
font-size: 14px;
text-transform: uppercase;
text-align: center;
font-weight: 550;
color: #fff;
margin-top: 15px;
}
.topnav ul li a:hover {
color: #ffbb05;
text-decoration: none;
}
.topnav ul .active {
color: #ffbb05;
}
.topnav .image-icon img {
width: 50px;
}
.topnav .image-icon {
margin: 0 auto;
margin-bottom: 15px;
display: block;
width: 70px;
height: 70px;
line-height: 70px;
border-radius: 50%;
text-align: center;
background-color: #ffbb05;
}
.topnav .image-icon:hover {
background-color: #fff;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
}
/*
========================================
---------- RESPONSIVE STYLE ------------
========================================
*/
#media screen and (max-width: 750px) {
.topnav .image-icon img {
display: none;
}
.topnav .image-icon {
display: none;
}
}
jsfiddle - https://jsfiddle.net/Dexter01/vyn3j2d0/
Hide the menu when it is on a small screen.
Then you can toggle the visibility for the menu by toggling a class. Something like is-open.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content=" ">
<meta name="author" content=" ">
<!-- Mobile Specific Metas -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="mobileoptimized" content="0" />
<!-- FONT -->
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght#400;500;642;700&display=swap" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/style.css">
<!-- Scripts -->
<script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
</head>
<body>
<header>
<button class="show">
Show
</button>
<!-- Navigation Links -->
<div class="overlay"></div>
<div class="topnav">
<nav>
<ul>
<li><a href="#0" class="active">
<div class="image-icon"></div>Face
</a></li>
<li><a href="#0">
<div class="image-icon"></div>Forehead
</a></li>
<li><a href="#0">
<div class="image-icon"></div>Eyebrow
</a></li>
<li><a href="#0">
<div class="image-icon"></div>Nose
</a></li>
<li><a href="#0">
<div class="image-icon"></div>Lips
</a></li>
<li><a href="#0">
<div class="image-icon"></div>Ears
</a></li>
</ul>
</nav>
</div> <!-- .cd-slider-nav -->
</header>
<!-- Footer -->
<footer>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')
</script>
<!-- End Document -->
</body>
</html>
Just added a button with show class in the above code block.
#media screen and (max-width: 750px) {
.topnav .image-icon img {
display: none;
}
.topnav .image-icon {
display: none;
}
.topnav ul {
display: none;
}
.topnav ul.is-open {
display: flex;
flex-direction: column;
}
}
Added a media query only for handling the menu in small screen size.
$(".show").click(() => {
$(".topnav ul").toggleClass("is-open");
})
Jquery code for toggling the class.
I prefer this, to using normal show() and hide(), This way you can change all descendants of the is-open class.
Here is the modified jsfiddle
My navigation bar working perfectly but when i zoom it so it is disappear.
i want when certain zoom will be done so all the nav link should bind into one icon. how can i achieve it, please help
My html
<!DOCTYPE html>
<html>
<head>
<title>dasdasd</title>
<link rel="stylesheet" type="text/css" href="/css/header.css">
</head>
<header>
<body>
<nav>
<div class="box_one">
<a href="/index">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABaCAMAAACFWShxAAABC1BMVEX////oRDs6p1ZGiPH6uy17pvQ/hfFglvImevDoQjnu8/7nOjAso0znOC4doEPnNSozpVH+9uX4/Pnynpr6uST0rqr++evzp6NnuHr9uBi7zvn97eznPTz509HA4Mj4y8nU4vv82ZHqWlK43cHm8+ntd3Lwj4r+9/dTj/KLx5nmLSGt17ecz6gyf/DG2fmux/jb7t+XufEznXZRsGZ2voYipVmbsEP9y2fd6fzJtjmGrfVlqk/uui5Sp0/Wvk797MmStfY5h949pG9BnpI/lbFKk9JHlrtAoIg4qUTtbmj73+DpUEjveDTrXzj3ri71ni/1qnP2vbrR37z+xEr846y5tDzguTL80oHzkDLdnbSbAAADcklEQVRoge2WWVvaQBSGw4DBMRMyhlCCKGhkFzSWuNRq7V7RtpZql///SzoJESYLSYYkPr3Ie6UPgZdz5ptz4LiMjIyMjASp70wrHZNypXnbTdPUbXY0KEqiKBBE8gecVHfSMXZ3OneiCGGOAgqioJVvk3dNJ6SUnBcIJaG9k6xsOhEFH5UtFGE7wfrq7YFfWbRPqCR1ftOcGOiyfFK7noSr2wkpzEbMNROQTaQoLqu8SlxZXQvv4tw2jS1bHkW3bBC3k10GGYx9bG2fNkIyQCSCINDhid9GruwNCJkcWrtTrVSqnbY5yJKrrAnd0YcDbTGGu/VmJze7HVCKn34NuuvSmq6JUa9CIZHKuLLr0KBY9plOtxMpfhrJx7j6KGhLJn05gTZyP0SXbOkcTGD+b9buc9uRZEmwpxS+f5vr4F2qMrlg8nX7KSAJb2cX1zVLdz9LilROVcb9USzbrJvwLtWfchw3K83u5iD24grmemEr/E29tEfKVrivpiubH5tF7drz+sZaIBdstjPaVpC9tnU+kA0WmfxAuZQz7wMb6/kg+HMW2wu6stoeu22XxbbpOLZHZtvo8Dlt/FZmmxE7JWy2y3g3gC0l3APdygf22naZbI5Zomz62VzTw2ljut3m74SFTPnpteWLLnoOG9PkojeO8vtKjfCOY6o6vscko7ap8guDkh7+hiJtW2O0zQ/u9AQAHF7cLn1woyNG22ydKpeviQwA1Ah7/oK2MUaS3DjTprwCM/C4Ffz4uUNWZAsJZ7VSOT2xbQAZwU+vOWxvWWUklXYXbd0w6OGjkSP/bJPE4s0VJQvWHTplrPk3aSDgAPW9P09mbDkHCXMiLQzs0qm+104+ds3MHnNGTHRXcQDjobe8xvhlj49fGscN3TpQAkOdFrb21RJG4BN1bnxxNRknq9itAwir/X29JcstvTE0yL9mzejjYgcwrjb6qwOvjnx2yQbNX735kudXvmtz3LlcCnr/zuomn18pIk+6UkQdvvk8Yl9sK+sA+sDzI7ad7aNDPme3rJsrJ2SODiIeHsIRlm4oshFJh9SQrRSVAxzqwyWfObMiLcPv5lGuJTN0VRoGWlofKqn7iRVmo/eBXzwxwkYjaZeJ3CCDESFsOzHGpF71IKFw+An1g746tmTjsUHmcxpVeaSEZ9BkZGRk/Bf8AxJzWnduI/qHAAAAAElFTkSuQmCC" alt="logo" title="logo" width="90px">
</a>
</div>
<div class="box_two">
<ul>
<li>Home</li>
<li>About Us </li>
<li>City </li>
<li>How it works </li>
<li> Contact </li>
</ul>
</div>
<!-- <div class="box_three">
<ul>
<li><img src="img/login.png" width="30px" alt="login" title="login" align="left"> Login</li>
<li><img src="img/signup.png" width="30px" alt="signup" title="signup" align="left"> Sign Up</li>
</ul>
</div>
-->
</nav>
</header>
My CSS
body{margin:0px;}
nav{font-family: calibri;width: 100%; min-height: 80px; max-height: 140px; background: #3a3a3a; color: white;}
.box_one{width: 180px;float: left;height: 80px;margin-left: 30px;}
.box_two{font-size: 18px;width: 70%;float: left;height: 80px;margin-left: 8%;}
.box_three{font-size: 18px;width: 320px;float: right;height: 80px;margin-left: 10px;}
nav a{text-decoration:none;color: white;}
nav li
{
margin-top: 26px;
display:block;
float:left;
min-height:150px;
max-height:200px;
padding: 5px;
list-style: square outside none;
padding-left: 1em;
text-indent: -.7em;
}
.box_two li
{
min-width:60px;
max-width:120px;
}
.box_three li
{
width:93px;
}
nav ul {
list-style: none;
padding:0;
margin:0;
}
For example i have uploaded code on jsfiddle please check
When you will zoom out so it is showing on jsfiddle
You should you bootstrap for this, It will make your life easy. If you don't want to use bootstrap you have to use CSS media queries for all resolution which is not cool. I have created an example of menu bar using bootstrap for you here it is. for more info refer getBootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Navbar Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="https://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<!-- Static navbar -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://getbootstrap.com/dist/js/bootstrap.min.js"></script>
</body>
</html>
----- UPDATE -----
You have to modify media queries as per you requirement currently I have adjusted menu so it will be visible even if you zoom it.
<!DOCTYPE html>
<html>
<head>
<title>dasdasd</title>
<link rel="stylesheet" type="text/css" href="/css/header.css">
<style type="text/css">
body{margin:0px;}
nav{font-family: calibri;width: 100%; min-height: 80px; max-height: 140px; background: #3a3a3a; color: white;}
.box_one{width: 180px; float: left; height: 80px;margin-left: 30px;}
.box_two{font-size: 18px; float: left;height: 80px;}
.box_three{font-size: 18px;width: 320px;float: right;height: 80px;margin-left: 10px;}
nav a{text-decoration:none;color: white;}
nav li
{
margin-top: 26px;
display:block;
float:left;
padding: 5px;
padding-left: 1em;
}
.box_three li
{
width:93px;
}
nav ul {
list-style: none;
padding:0;
margin:0;
}
#media (max-width: 991px) {
header{ width:100% !important;}
}
#media (max-width: 767px) {
header{ width:100% !important;}
.box_one{width: 100px; margin-left: 5px;}
#media (max-width: 480px) {
.button05 {margin: 10px 0 0;width: 100%;}
.box_one{width: 100px; margin-left: 0px;}
.box_two {
font-size: 12px;
float: none;
height: auto;
}
}
#media (max-width: 375px) {
header{ width:100% !important;}
.box_one{width: 100px; margin-left: 0px;}
.box_two {
font-size: 12px;
float: none;
height: auto;
}
nav li {
padding: 5px;
padding-left: 5px;
font-size: 10px;
}
}
</style>
</head>
<body>
<header>
<nav>
<div class="box_one">
<a href="/index">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABaCAMAAACFWShxAAABC1BMVEX////oRDs6p1ZGiPH6uy17pvQ/hfFglvImevDoQjnu8/7nOjAso0znOC4doEPnNSozpVH+9uX4/Pnynpr6uST0rqr++evzp6NnuHr9uBi7zvn97eznPTz509HA4Mj4y8nU4vv82ZHqWlK43cHm8+ntd3Lwj4r+9/dTj/KLx5nmLSGt17ecz6gyf/DG2fmux/jb7t+XufEznXZRsGZ2voYipVmbsEP9y2fd6fzJtjmGrfVlqk/uui5Sp0/Wvk797MmStfY5h949pG9BnpI/lbFKk9JHlrtAoIg4qUTtbmj73+DpUEjveDTrXzj3ri71ni/1qnP2vbrR37z+xEr846y5tDzguTL80oHzkDLdnbSbAAADcklEQVRoge2WWVvaQBSGw4DBMRMyhlCCKGhkFzSWuNRq7V7RtpZql///SzoJESYLSYYkPr3Ie6UPgZdz5ptz4LiMjIyMjASp70wrHZNypXnbTdPUbXY0KEqiKBBE8gecVHfSMXZ3OneiCGGOAgqioJVvk3dNJ6SUnBcIJaG9k6xsOhEFH5UtFGE7wfrq7YFfWbRPqCR1ftOcGOiyfFK7noSr2wkpzEbMNROQTaQoLqu8SlxZXQvv4tw2jS1bHkW3bBC3k10GGYx9bG2fNkIyQCSCINDhid9GruwNCJkcWrtTrVSqnbY5yJKrrAnd0YcDbTGGu/VmJze7HVCKn34NuuvSmq6JUa9CIZHKuLLr0KBY9plOtxMpfhrJx7j6KGhLJn05gTZyP0SXbOkcTGD+b9buc9uRZEmwpxS+f5vr4F2qMrlg8nX7KSAJb2cX1zVLdz9LilROVcb9USzbrJvwLtWfchw3K83u5iD24grmemEr/E29tEfKVrivpiubH5tF7drz+sZaIBdstjPaVpC9tnU+kA0WmfxAuZQz7wMb6/kg+HMW2wu6stoeu22XxbbpOLZHZtvo8Dlt/FZmmxE7JWy2y3g3gC0l3APdygf22naZbI5Zomz62VzTw2ljut3m74SFTPnpteWLLnoOG9PkojeO8vtKjfCOY6o6vscko7ap8guDkh7+hiJtW2O0zQ/u9AQAHF7cLn1woyNG22ydKpeviQwA1Ah7/oK2MUaS3DjTprwCM/C4Ffz4uUNWZAsJZ7VSOT2xbQAZwU+vOWxvWWUklXYXbd0w6OGjkSP/bJPE4s0VJQvWHTplrPk3aSDgAPW9P09mbDkHCXMiLQzs0qm+104+ds3MHnNGTHRXcQDjobe8xvhlj49fGscN3TpQAkOdFrb21RJG4BN1bnxxNRknq9itAwir/X29JcstvTE0yL9mzejjYgcwrjb6qwOvjnx2yQbNX735kudXvmtz3LlcCnr/zuomn18pIk+6UkQdvvk8Yl9sK+sA+sDzI7ad7aNDPme3rJsrJ2SODiIeHsIRlm4oshFJh9SQrRSVAxzqwyWfObMiLcPv5lGuJTN0VRoGWlofKqn7iRVmo/eBXzwxwkYjaZeJ3CCDESFsOzHGpF71IKFw+An1g746tmTjsUHmcxpVeaSEZ9BkZGRk/Bf8AxJzWnduI/qHAAAAAElFTkSuQmCC" alt="logo" title="logo" width="90px">
</a>
</div>
<div class="box_two">
<ul>
<li>Home</li>
<li>About Us</li>
<li>City</li>
<li>How it works</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
Hey I am building a website using html, css, bootstrap, and javascript.
And for some reason my input won't completely center. I HAVE NO CLUE WHY!!! I think it might have to do with bootstrap.
<DOCTYPE html!>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">
body {
font-family: futura;
}
#inp {
margin:auto;
}
.jumbotron {
margin: auto;
text-align: center;
}
img {
width: 150px;
height: 150px;
border-radius: 50%;
}
</style>
</head>
<body>
<ul class="nav nav-tabs">
<li role="presentation">Home</li>
<li role="presentation" class="active">Profile</li>
<li role="presentation">Hangawts <span class="badge">0</span></li>
</ul>
<div class="jumbotron">
<h1>Welcome To Your Profile!</h1><br>
<h3>Your Current Profile Picture:</h3><br><br>
<img src="http://placehold.it/350x150"><br><br><br>
<input id="inp" type="file" accept="image/*">
</div>
</body>
</html>
Setting the width of input[type="file"] element to 83.5px, left to calc() with parameter 50vw - 41.75px, ::-webkit-file-upload-button padding and margin to 0 returns expected results at chrome, chromium and firefox.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">
body {
font-family: futura;
}
#inp {
width: 83.5px;
position: relative;
padding: 0;
margin: 0;
left: calc(50vw - 41.75px);
}
::-webkit-file-upload-button {
padding: 0;
margin: 0;
display: block;
}
.jumbotron {
margin: auto;
text-align: center;
}
img {
width: 150px;
height: 150px;
border-radius: 50%;
}
</style>
</head>
<body>
<ul class="nav nav-tabs">
<li role="presentation">Home
</li>
<li role="presentation" class="active">Profile
</li>
<li role="presentation">Hangawts <span class="badge">0</span>
</li>
</ul>
<div class="jumbotron">
<h1>Welcome To Your Profile!</h1>
<br>
<h3>Your Current Profile Picture:</h3>
<br>
<br>
<img src="http://placehold.it/350x150">
<br>
<br>
<br>
<input id="inp" type="file" accept="image/*">
</div>
</body>
</html>
I was just wondering can you put a image inside the check box to make it more colorful?
I have searched a lot about this, but didn't find anything that could help me
Edit: I have done so when the check box is "checked" a menu pops up.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel=stylesheet href="css.css" type="text/css" />
<link rel="icon" href="favicon.ico" type="image/icon"/>
<title></title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT4??4=" crossorigin="anonymous"></script>
<script>
$(function() {
$(".box a").on("click",function() {
$("#toggle-nav").prop('checked', false)
});
});
</script>
<body>
<!-- start header -->
<header id="head">
<div class="something">
<nav id="menu">
<input type="checkbox" id="toggle-nav"/>
<label id="toggle-nav-label" for="toggle-nav"><i class="icon-reorder"></i></label>
<div class="box">
<ul>
<li><i class="icon-home"></i> Play</li>
<li><i class="icon-file-alt"></i> about</li>
<li><i class="icon-copy"></i> XXXXXX</li>
<li><i class="icon-envelope"></i> contacts</li>
</ul>
</div>
</nav>
</div>
Thank you :)
You can use Background image css property.
Deom: http://jsfiddle.net/kEHGN/1/
input[type="checkbox"] + label{
background-image: url('img1.png');
height: 16px;
width: 17px;
display:inline-block;
padding: 0 0 0 0px;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
input[type="checkbox"]:checked + label{
background-image: url( background-image: url('img2.png');
height: 16px;
width: 17px;
display:inline-block;
padding: 0 0 0 0px;
}
Is there a way for me to use jquery mobile script without conflicting it on my bootstrap 3? My issue are my links is not working when I used Jquery mobile script but whenever I remove the script my links are working fine. I use Jquery mobile for my pop up feature. I'm a newbie on jquery and bootstrap web development, I apologize if my question seems too newbie.. Any help in my case is highly appreciated.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
</head>
<style>
body {
padding: 20px 50px 150px;
font-size: 20px;
text-align: center;
}
.jumbotron {
margin-bottom: 40px !important;
height: 350px !important;
background-repeat: no-repeat;
color: white;
text-shadow: black 0.3em 0.3em 0.3em;
}
#picbg
{
background: url('board.jpeg') no-repeat center center;
}
#container
{
margin: 0 auto;
width: 850px;
background: #fff;
}
</style>
<style>
.centered-pills { text-align:center; }
.centered-pills ul.nav-pills { display:inline-block; }
.centered-pills li { display:inline; }
.centered-pills a { float:left; }
* html .centered-pills ul.nav-pills { display:inline; }
*+html .centered-pills ul.nav-pills { display:inline; }
</style>
<body>
<div class="container">
<div class="jumbotron" id="picbg">
<h1><font face = "brush script mt" color="#fff">My Page</font><h1></div>
</div>
<div class="row">
<div class="span12 centered-pills">
<ul class="nav nav-pills" role="tablist">
<li class="active"><span class="glyphicon glyphicon-home"></span><h2><b>Home</b></h2></li>
<li><span class="glyphicon glyphicon-envelope"></span><h2><b>Contact Me</b></h2></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<span class="glyphicon glyphicon-user"></span><h2><b>Profile</b></h2> </a>
<ul class="dropdown-menu" role="menu">
<li><h2><b>Web</b></h2></li>
<li><h2><b>Author</b></h2></li>
<li>About</b></h2></a></li>
</ul>
</li>
</ul>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div data-role="popup" id="myPopup" class="ui-content" data-overlay-theme="a" data-theme="d" data-corners="false">
<img class="popphoto" src="image1.png" style="width:600px;height:756px;" alt="">
</div>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</body>
</html>