I'm doing a project. At a certain point i want to have two buttons, one for changing to a lighter theme and another to change to a darker theme and apply the changes to the whole website and not just the page in question
This is the page where i have the functionality:
ConfLayout.cshtml:
<!DOCTYPE HTML>
<html>
<head>
<title>TekSell</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="~/Content/styles.css" rel="stylesheet" />
<link href="~/Content/styles-admin.css" rel="stylesheet" />
</head>
<body id="top">
<section id="banner">
<div class="inner">
Learn More
</div>
</section>
<!-- Main1 -->
<div id="main">
<p style="text-align:center">Serviços</p>
<div class="inner">
<!-- Services -->
<div class="thumbnails">
<div class="box">
<img src="~/Content/Images/gallery.jpg" />
<div class="inner">
<h7>Galeria</h7>
</div>
</div>
<div class="box">
<img src="~/Content/Images/location.jpg" />
<div class="inner">
<h7>Localização</h7>
</div>
</div>
</div>
</div>
</div>
<!-- Main2 -->
<div class="page">
<div class="container">
<div class="row">
<div class="col-md-4">
<h3 class="section-title">Sobre Nós</h3>
<figure><img src="~/Content/Images/logo.jpg" /></figure>
<h4>Acerca de nós</h4>
<p>Somos uma empresa fictícia de venda de software informático</p>
</div>
<div class="col-md-4">
<h3 class="section-title">Âmbito</h3>
<h4>Projeto desenvolvido no âmbito da unidade curricular de Laboratório de Desenvolvimento de Software</h4>
</div>
<div class="col-md-4">
<h3 class="section-title">Configurar página</h3>
<h4>Administrador, altere aqui o layout da página</h4>
<div class="dropdown">
<button class="dropbtn">Layout Configuration</button>
<div class="dropdown-content">
Change to lighter theme
Change to darker theme
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer id="footer">
<div class="inner">
<h7>TekSell</h7>
<p>Email: teksell#lds.pt</p>
</div>
</footer>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/jquery.poptrox.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
<script src="~/Scripts/changeLayout.js"></script>
</body>
</html>
As you can see i've two css files created. The 'styles.css' is the lighter theme, and 'styles-admin.css' is the darker theme. The functionality is implemented at "div class="dropdown-content"
What happens is, as i have both css files linked, when i run it, by default, the view assumes the darker theme(styles-admin.css).
This is the javascript file i use to try the changes:
function changeCSS(cssFile, cssLinkIndex) {
var oldlink = document.getElementsByTagName("link").item(cssLinkIndex);
var newlink = document.createElement("link");
newlink.setAttribute("rel", "stylesheet");
newlink.setAttribute("href", cssFile);
document.getElementsByTagName("head").item(cssLinkIndex).replaceChild(newlink, oldlink);
}
What is missing? Am i doing it the wrong way?
If you include two CSS files with the same selectors inside, the second file will always override the first.
Just use one <link> and change its href.
Also, why load jQuery and not use it?
<link href="~/Content/styles.css" rel="stylesheet" />
$("link").attr("href","~/Content/styles-admin.css");
Job done!
Use similar way. Preset the theme colours and change the root attribute like this
const colors =['#317EEB', '#6427BA'];
let index = 0;
function changeBackground(){
index = (index+1)%2;
document.documentElement.style.setProperty('--main-color', colors[index]);
}
:root {
--main-color: #317EEB;
}
.set-background{
background: var(--main-color);
width: 10em;
height: 10em;
}
button{
margin-top: 5px;
}
<div class="set-background">
</div>
<button onClick="changeBackground()">Change color</button>
I'm a relative beginner so apologies if this is a dumb question. I have no idea if I'm using the wrong path while trying to link my JS to HTML. I've tried absolute paths, adding the files to a JS folder in the root folder. I can't even get jQuery to link. Here's a snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Guessing Game</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<link rel="stylesheet" type="text/css" href="bootstrap-theme.css">
<!-- Bootstrap and CSS here-->
</head>
<body>
<div id='app' class='center' class='container'>
<div id='headers'>
<!-- Title and subtitles! -->
<h1 id='title'> Rav's Cheesy Guessing Game! </h1>
<h2 id='subtitle'> Guess A Number Between 1-100, You Won't </h2>
</div>
<div id='main'>
<div id='input-parent'>
<!-- Player's guess input, and submit button -->
<input id='player-input' class='center' placeholder="#" autofocus maxlength=2></input>
<button id='submit-button' type=submit>Go!</button>
</div>
<div id='guesses'>
<ul id='guess-list'>
<li class='guess'>_</li>
<li class='guess'>_</li>
<li class='guess'>_</li>
<li class='guess'>_</li>
<li class='guess'>_</li>
</ul>
<!-- unordered list of guesses -->
</div>
<div id="menu-btns">
<!-- reset and hint buttons -->
<button id='reset' class='btn btn-warning btn-sm'>Reset</button>
<button id='hint' class='btn btn-primary btn-sm'>Hint</button>
</div>
</div>
</div>
<div id='footer' class='center' class="container">
<div class="row">
<div class='col-md-4 col-sm-4'>
<img src='fa-logo#2x.png'>
</div>
<div class='col-md-4 col-sm-4'>
<h4>Project by Ravish Rawal</h4>
</div>
<div class='col-md-4 col-sm-4'>
<img src='grace_hopper_academy.png'>
</div>
</div>
</div>
<script type='text/javascript' src='js/jquery.min.js'></script>
<script type='text/javascript' src='js/GuessingGame.js'></script>
</body>
</html>
Here is all you need to know about relative file paths:
Starting with "/" returns to the root directory and starts there
Starting with "../" moves one directory backwards and starts there
Starting with "../../" moves two directories backwards and starts there (and so on...)
To move forward, just start with the first subdirectory and keep moving forward
Here is the reference
If your using IIS (a localhost), there could be any number of things wrong. For now, just check the paths. You can use literally copy the path of it in file explorer (if on windows).
For root you need to
Type this "/"
this will returns to the root directory and starts there
How would i do that in JavaScript or j Query? I have been trying to do this for ages but couldn't so it would really be appreciated if you could help! :) Also if you have any tips or tricks or anything that i may have done wrong then it would be nice if you could also mention that!
<html>
<head>
<title>Redirected</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<font face="verdana" />
</head>
<body>
<div class = "title">
<h1>Redirected.</h1>
</div>
<div class = "title-mobile">
<h1>☰ Redirected.</h1>
</div>
<div class="title-solgan">
<p>THE HOME OF GAMING</p>
</div>
<div class="nav-bar">
<ul>
<li>HOME</li>
<li>NEWS</li>
<li>REVIEWS</li>
<li>PLAYSTATION</li>
<li>XBOX</li>
<li>PC</li>
</ul>
</div>
<div class = "main-story">
<h1>14 Things Every Steam User Should Know </h1>
</div>
<div class = "trending-games">
<h1> Games Trending </h1>
<li>Destiny</li>
<li>Fallout 4</li>
<li>Mad Max </li>
<li>Metal Gear Solid </li>
</div>
<div class="latest-game-news">
<h1>Latest Game News </h1>
<li>Minecraft Will Support Oculus VR Next Year</li>
<li>Fallout 4 Meets Grand Theft Auto 5 in Latest PC Mod</li>
<li>Halo 6: 343 Says Sequel is in the 'Planning' Stage</li>
<li>The Sims Boss Leaves EA</li>
</div>
<div class="more-game-news">
<h1>More Game News</h1>
<li>Xbox Free Games With Gold October 2015</li>
<li>EA Working on Netflix for Games</li>
<li>Assassin's Creed Syndicate's New Story Trailer</li>
<li>Uncharted 4 Delayed</li>
</div>
<footer>This is a sticky footer</footer>
</body>
</html>
function del_cookie(name) {
document.cookie = name + '=; expires=Thu, 01-Jan-70 00:00:01 GMT;';
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="Spanish Chat, Child Abuse Chat, Child Abuse Support, Child Abuse Discussion, Suvivor, chat, discussion, support, domestic violence, violencia domestica, abuso infantil, abuso de niño">
<meta name="description" content="Moderated chat rooms for victims and survivors of child abuse and domestic violence.">
<title>Yes ICAN: International Child Advocacy Network</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- <script type="text/javascript">
alert("SAFETY ALERT: If you are in danger, please use a safer computer, or call 911, your local hotline, or the U.S. National Domestic Violence Hotline at 1-800-799-7233 and TTY 1-800-787-3224. See more technology safety tips online.")
</script>-->
</head>
<body onLoad="initialize();">
<div id="wrapper">
<!--Main Navigation Bar-->
<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="index.html"><img alt="site logo" id="navlogo" src="img/logo_short_sm.png"/></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a data-toggle="tooltip" title="Home page" target="_blank" href="index.html">Home</a></li>
<li><a data-toggle="tooltip" title="Group Facilitated Chat Room" href="gethelp.html">Get Help</a></li>
<li><a data-toggle="tooltip" title="Message Board Community" href="community-rules.html">Community Forums</a></li>
<li><a data-toggle="tooltip" title="Learn More About Abuse" href="aboutabuse.html">About Abuse</a></li>
<li><a data-toggle="tooltip" title="Learn More About YesICAN" href="about-us.html">About Us</a></li>
<li><a data-toggle="tooltip" title="Opportunities to volunteer, donate, and get involved!" href="get-involved.html">Get Involved</a></li>
</ul>
<!--Right side of navigation bar-->
<ul class="nav navbar-nav navbar-right">
<li>
<div class="btn btn-lg btn-danger donate-nav"><a target="_blank" href="https://donatenow.networkforgood.org/yesican?code=Homepage">Donate <span class="glyphicon glyphicon-heart" aria-hidden="true"></span></a></div>
</li>
</ul>
</div>
</div>
</nav><!--END NAVIGATION-->
<img id="banner" alt="home page banner" src="img/banner.jpg"/>
<div id="content">
<section class="col-md-8"><!--Left column content goes here-->
<h2>Our Mission<small><br>Working World Wide to Stop the Silence and Cycle of Abuse</small></h2>
<p>The International Child Advocacy Network, Inc. (YesICAN) is a leading global provider of online information for those who have issues around child abuse. It is our mission to work worldwide to break the silence and cycle of abuse. <strong><em>We</em> believe</strong> that child abuse could cease to exist if everyone had the capability to receive accurate, up-to-date information about abuse and then had the capacity to receive assistance and support to change.</p>
<h2>How We Make a Difference</h2>
<p>Our website provides information, statistics, and definitions of abuse. We also have the <em>Yes</em>ICAN Community where individuals who have questions regarding child abuse and domestic violence can join with others to discuss various concerns and ideas around these topics.</p>
<p>The premier service of our organization is our facilitated chat groups. <strong>In these groups we offer an opportunity for abused children and adults to speak with others and to get council and support from trained facilitators.</strong> These facilitators have gone through a 60-hour training lead by a Licensed Therapist. To date, we have had over 44,000 participants in our chat rooms. We run specialized chat groups for teens, adult-survivors, victims of domestic violence, individuals who are in close relationship with abuse survivors and parents.</p>
<h2>Our Current Focus</h2>
<p>Our focus for now, is the development of an on-line parenting program. In this 6-8 week program, individuals will receive training in non-violent parenting. This training will include dynamics of both physical and emotional development, and appropriate discipline. In addition, each member of the program will have access to support groups where the topic of each weeks' training session will be discussed. During this time specific issues and concerns that come up for each participant will be shared in a safe and supportive environment.</p>
<p>It is our hope that in the future, we will provide an international support forum, specifically targeting military personnel and their dependents that are based outside of the United States.</p>
</section>
<section class="col-md-4" style="border-left:1px solid #cfd1d4;"><!--Right column content goes here-->
<div class="well">
<h2>April Kickstarter</h2>
<img src="img/unbrokenkickstarterbutton.png"/>
<p>Please support and learn more about our kickstarter running through this April!</p>
</div>
<h2>In Memorial</h2>
<img alt="Memorial List" src="img/memorial_list.jpg"/>
<p>We keep this list in honor of the children who have died from the injuries infliected upon them as a result of child abuse.</p>
<h2>Missing Children<br><small>Alert Cases</small></h2>
<section style="border: #cfd1d4 solid 1px; border-radius:2%; padding:10px;">
<!-- start feedwind code --><script type="text/javascript">document.write('\x3Cscript type="text/javascript" src="' + ('https:' == document.location.protocol ? 'https://' : 'http://') + 'feed.mikle.com/js/rssmikle.js">\x3C/script>');</script><script type="text/javascript">(function() {var params = {rssmikle_url: "http://www.missingkids.com/missingkids/servlet/XmlServlet?act=rss&LanguageCountry=en_US&orgPrefix=NCMC",rssmikle_frame_width: "100%",rssmikle_frame_height: "400",frame_height_by_article: "0",rssmikle_target: "_blank",rssmikle_font: "Arial, Helvetica, sans-serif",rssmikle_font_size: "12",rssmikle_border: "off",responsive: "off",rssmikle_css_url: "",text_align: "left",text_align2: "left",corner: "off",scrollbar: "on",autoscroll: "off",scrolldirection: "up",scrollstep: "2",mcspeed: "20",sort: "Off",rssmikle_title: "off",rssmikle_title_sentence: "",rssmikle_title_link: "",rssmikle_title_bgcolor: "#FF0000",rssmikle_title_color: "#FFFFFF",rssmikle_title_bgimage: "",rssmikle_item_bgcolor: "#FFFFFF",rssmikle_item_bgimage: "",rssmikle_item_title_length: "55",rssmikle_item_title_color: "#0066FF",rssmikle_item_border_bottom: "on",rssmikle_item_description: "on",item_link: "off",rssmikle_item_description_length: "150",rssmikle_item_description_color: "#666666",rssmikle_item_date: "gl1",rssmikle_timezone: "Etc/GMT",datetime_format: "%b %e, %Y %l:%M:%S %p",item_description_style: "text+tn",item_thumbnail: "full",item_thumbnail_selection: "auto",article_num: "15",rssmikle_item_podcast: "off",keyword_inc: "",keyword_exc: ""};feedwind_show_widget_iframe(params);})();</script><div style="font-size:10px; text-align:center; width:300px;">RSS Feed Widget<!--Please display the above link in your web page according to Terms of Service.--></div><!-- end feedwind code --></section>
</section>
</div>
<div class="container" style="overflow-y: hidden;">
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-md custom-height-modal">
<div class="modal-content">
<div class="modal-header" style="background-color:#d3d3d3">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title" style="text-align:center">Safety Warning</h3>
</div>
<div class="modal-body">
<p style="text-align:center"> Your computer can be monitored by others. For your safety, consider using a public computer or a friend’s computer. If you are in danger, please call 911, your local hotline, or the U.S. National Domestic Violence Hotline at +1-800-799-7233 and <br> TTY +1-800-787-3224.</p>
<p style="text-align:center"> To learn more how to computer safety, click the following link: <br>Internet Safety Tips</br></p>
<!--Wording can be better just for the meantime-->
<p style="text-align:center"> If you are not safe, click the following button: <br><span class="btn btn-lg btn-danger" id="get-away" id="del_cookie">Escape Button</span></br></p>
</div>
<div class="modal-footer">
<p class="text-center"><a href="" class="btn btn-default" class="btn pull-middle" data-dismiss="modal" >Close</a></p>
</div>
</div>
</div>
</div>
</div><!--End of Modal container-->
<!--<div class="container">
<section class="col-md-3">
<div class="list-group" id="sidebar">
<a href="#" class="list-group-item">
Link 1
</a>
</div>
</section>
</div>-->
</div><!--End wrapper-->
<footer>
<div id="footer-right">
<ul>
<li>ABOUT US</li>
<li>Contact Us</li>
<li>FAQ's</li>
<li>Site Map</li>
</ul>
<ul>
<li>SUPPORT OUR CAUSE</li>
<li>Donate</li>
<li>Volunteer</li>
<li>Fundraising Events</li>
</ul>
<ul>
<li>FOLLOW US</li>
<li>
<a target="_blank" href="http://ww.facebook.com/yesicanorg"><img src="img/social/facebook-icon.png" alt="Facebook Logo" class="social-icon"></a>
<a target="_blank" href="http://www.instagram.com/childadvocacynetwork"><img src="img/social/instagram-icon.png" alt="Instagram Logo" class="social-icon"></a>
<a target="_blank" href="http://twitter.com/YesICANorg"><img src="img/social/twitter-icon.png" alt="Twitter Logo" class="social-icon"/></a>
<a target="_blank" href="http://www.pinterest.com/Yesicanorg"><img src="img/social/pinterest-icon.png" alt="Pinterest Logo" class="social-icon"/></a>
<a target="_blank" href="http://www.youtube.com/childadvocacynetwork"><img src="img/social/youtube-icon.png" alt="YouTube Logo" class="social-icon"/></a>
</li>
</ul>
</div>
<div id="footer-left">
<p id="footer-slogan">BREAK THE <strong>SILENCE</strong> <br>AND <strong>CYCLE</strong> OF ABUSE</p>
<p id="copyright">Copyright© 2015 International Child Advocacy Network</p>
</div>
</footer>
<!-- 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.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>-->
<script src="js/bootstrap.min.js"></script>
<script src="/path/to/jquery.cookie.js"></script>
<script src="js/escape-button.js"></script>
<script src="js/history.replace.js"></script>
<!--Testing to see if it works-->
<!--<script>
$(document).ready(function() {
if ($.cookie('pop') == null) {
$('#myModal').modal('show');
$.cookie('pop', '1');
}
});
</script>-->
<!--Works fine-->
<script type="text/javascript">
$(function(){
$( '#myModal' ).modal('show');
});
</script>
<script>
var probablyPhone = ((/iphone|android|ie|blackberry|fennec/).test(navigator.userAgent.toLowerCase()) && 'ontouchstart' in document.documentElement);
function initialize() {
( function( $ ) {
$( '.call' ).css ( "text-decoration", "none" );
$( '.call' ).css ( "color", "black" );
$( '.call' ).css ( "cursor", "default" );
} )( jQuery );
}
</script>
</body>
</html>
I am doing a website for abuse survivors and I have created a escape button that will jump the user to another link and replace the location of the site with another site like google. I am currently trying to figure out how to manipulate the history back button. Currently, I have this code but it is not working at all when the back button or back arrow is clicked on. Also, what would be the best approach to replace/erase the cookies when the user visits the website.
function getAway() {
// Get away right now
window.open("http://weather.com", "_newtab");
// Replace current site with another benign site
window.location.replace('http://google.com');
// This should clear all back button history.
var Backlen = history.length;
history.go(-2);
}
$(function() {
$("#get-away").on("click", function(e) {
getAway();
});
$("#get-away a").on("click", function(e) {
// allow the (?) link to work
e.stopPropagation();
});
});
I have been working with impress.js, html5 and css. I have got my impress.js presentation to a standard I am quite happy with but I am trying to implement a fixed top nav similar to Twitters.
The current implementation does not work correctly. if you click the bar whilst on a slide/step the links are unclickable.
My Attempt
HTML
<!DOCTYPE html5>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=1024"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<title>PATCHU_</title>
<meta name="author" content="patchu" />
<link href="http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<link rel="shortcut icon" href="favicon.png" />
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
</head>
<body class="impress-not-supported">
<div class="fallback-message">
<p>Your browser <strong>doesn't support the features required</strong> by my website, so you are presented with a simplified version.</p>
<p>For the best experience please use the latest <strong>Chrome</strong>, <strong>Safari</strong> or <strong>Firefox</strong> browser.</p>
</div>
<div class="navbar-fixed-top2" align="center">
<p>Navigation will go here <a class="" href="#websites" title="My Websites">My Websites</a>
<a class="" href="#about" title="My Websites">About</a>
<a class="" href="#contact" title="My Websites">Contact</a>
<a class="" href="#applications" title="My Websites">Applications</a>
</div>
<div id="impress" data-transition-duration="800">
<div id="title" class="step slide" data-x="0" data-y="0" data-scale="3">
<hgroup>
<h1>#PATCHU_</h1>
<h2></h2>
</hgroup>
</div>
<div id="about" class="step slide" data-x="-1000" data-y="-700" data-rotate="270" data-scale="5">
<h1>About Me</h1>
</div>
<div id="about1" class="step slide about" data-x="-1900" data-y="880" data-z="-100" data-rotate="270" data-scale="1">
<p>Apart from making <strong>awesome websites</strong>, I love computer networking and making <strong>iOS applications.</strong></p>
</div>
<div id="about2" class="step slide about" data-x="-1900" data-y="100" data-z="-100" data-rotate="270" data-scale="1">
<p>Minimalist, <strong>Perfectionist</strong>, Gamer and Apple fanboy. I have a passion for creating stuff. Love trying out <strong>new technologies</strong> and experiences.</p>
</div>
<div id="about3" class="step slide about" data-x="-1900" data-y="-800" data-z="-100" data-rotate="270" data-scale="1">
<p>I mostly code in <strong>PHP</strong> and <strong>Objective-C</strong>, but I'm not afraid to get my hands dirty.</p>
</div>
<div id="about4" class="step slide about" data-x="-1900" data-y="-1600" data-z="-100" data-rotate="270" data-scale="1">
<p><strong>Graduated</strong> with a <strong>1:1</strong> (84% Average) in Computer Network Technology BSc.</p>
</div>
<div id="websites" class="step slide" data-x="7100" data-y="-700" data-z="-3000" data-rotate="0" data-scale="5">
<h1>Websites</h1>
</div>
<div id="applications" class="step slide application" data-x="3950" data-y="-4500" data-z="-3000" data-rotate="90" data-scale="5">
<h1>Applications</h1>
</div>
<div id="contact" class="step slide" data-x="-180" data-y="2100" data-scale="3">
<h1>Connect</h1>
<p></p>
<div id="contact_images">
<img src="images/twitter.png">
<img src="images/linkedin.png">
</div>
</div>
</div>
<script src="js/impress.js"></script>
<script>
//All hail megatron
impress().init();
//impress().showMenu();
</script>
</body>
</html>
CSS
/*
Resetting the humans
*/
.navbar-fixed-top2{
position:fixed;
top:0;
width:100%;
height:50px;
background-color:red;
z-index:3000;
}
This is due to a work-around for a chrome bug in impress.js, see the comments at the end of the CSS file that ships with it.
To make the links in your navbar clickable, add the following to your .navbar-fixed-top2 CSS class:
pointer-events: auto
Alternatively, add the following class to your CSS:
.extra-clickable { pointer-events: auto }
... and then add that class to anything outside of #impress that you want to have clickable.