What would make links non responsive in bootstrap? My links won't switch through my pages as they would do live. Any ideas ?
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-dark bg-dark navbar-expand-sm">
<div class="container ">
<a class="navbar-brand d-none d-sm-inline-block fixed-top" href="#">Larry J designs</a>
<ul class="navbar-nav ">
<li class="nav-item "><a class ="nav-link active" href="index.html">Home</a></li>
<li class="nav-item"> <a class ="nav-link " href="about.html">About</a></li>
<li class="nav-item"> <a class ="nav-link" href="portfolio.html">Portfolio</a></li>
<li class="nav-item"> <a class ="nav-link" href="services.html">Services</a></li>
</ul>
<div class="clearfix">
<ul class="navbar-nav ">
<li class="nav-item "><a class ="nav-link active" href="index.html">Home</a></li>
<li class="nav-item"> <a class ="nav-link " href="about.html">About</a></li>
<li class="nav-item"> <a class ="nav-link" href="portfolio.html">Portfolio</a></li>
<li class="nav-item"> <a class ="nav-link" href="services.html">Services</a></li>
</ul>
</div>
</div>
</nav>
<!-- navbar-nav -->
<div class="container">
<section class="container" id ="mainpage">
<div class ="row">
<article class="col-8" id="bio">
<h1>Welcome to Larry J designs </h1>
<p class="justify-content-center">Hello, I'm Larry J , I currently live in the DC Metro area , I also love working on art in my spare time. As a teen in high I use to love to draw and build websites , Currently, I work a full time job like most , however in my spare time I love working on learning web design and drawing . Life has a long road to success , but on the road there are that you have to learn to get to the next level. </p></article>
<section class="col-sm-4">
<div class="row no-gutters">
<div class="col"><img src="about-thumbnail-placeholder.png" alt="larryphoto
" class="img-thumbnail">
</div>
</div>
</section>
</div>
</section>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
You're not using rows or columns and this will have a major effect on the responsiveness of Bootstrap.
You need to look into the Bootstrap Grid system, I advise reading through this page and applying these practices to your code:
https://getbootstrap.com/docs/4.0/layout/grid/
First of all, you should note that non responsive has a different meaning in the world of code, not just the simple 'not working' definition, but also meaning the layout will adapt and respond to the device and browser sizes, this is Responsive Design.
I believe that your problem is occuring from the title overlapping the other links, stopping them from ever interacting with the mouse, only the title will interact. You can look into Chrome's Dev Tools using the right click Inspect option on the links. This happens because the title <a> has a fixed-top class. Removing this solves the issue.
From:
<a class="navbar-brand d-none d-sm-inline-block fixed-top" href="#">Larry J designs</a>
To:
<a class="navbar-brand d-none d-sm-inline-block" href="#">Larry J designs</a>
I highly suggest you read up on the Bootstrap 4 Docs to get a grasp and understand how everything works and how to use the fixed-top class if you were trying to make the nav fixed. Also, looking at the examples and inspecting their code help too.
Related
So I have been trying to develop this site for a friend of mine and i can't seem to get the hamburger menu to appear. I have been trying to get this for hours, and nothing seems to work. Is the format for the navbar wrong, or am I missing something, this is EXTREMELY frustrating. So i added the css and now the hamburger menu appears but it just looks like a red box. It also appears on larger screens, which its only supposed to appear on smaller devices.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script type="text/javascript" src="script/script.js"></script>
<title>Bootstrap</title>
</head>
<body class="darkbg">
<nav class="navbar navbar-expand-lg navbar-white d-flex justify-content-center">
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar-dropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link nvm-link current-link" href="index.html"> NVM </a>
</li>
<li class="nav-item">
<a class="nav-link non-active-link" href="gallery.html"> GALLERY </a>
</li>
<li class="nav-item">
<a class="nav-link non-active-link" href="shop.html"> SHOP </a>
</li>
<li class="nav-item">
<a class="nav-link non-active-link" href="#"> MUSIC </a>
</li>
<li class="nav-item">
<a class="nav-link non-active-link" href="#"> CONTACT </a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid full-height">
<div class="row">
<div class="col-lg-6">
<div class="home-article">
<h2 class="home-header flexFont">WHO THE HELL ARE WE?</h2>
<p class="text-indent main-text"> Hell is full, of all the torturing, screaming, killing, fire, smoke, and poker games a demon could ask for. Unforunately, Satan had no interest in giving us what we needed to have a successful business in the underworld, and most of the other
demons laughed in our faces or ignored us. </p>
<p class="text-indent main-text"> Nobody in hell cared about us, and why would they? It's fucking hell, but me and my cool ass friends knew we deserved more than that. So, we sought out to find the prophesied portal to the surface realm. And guess what bitches, WE FOUND IT!
</p>
<p class="text-indent main-text"> After we celebrated, we closed the portal to prevent any lames from rising above and stealing our awesome idea, We were gonna make this business happen in a world where people care about looking badass(almost everone in hell is pretty badass).</p>
<p class="text-indent main-text"> After we arrived, you humans didn't really take kindly to a bunch of unholy beasts trying to sell you shit, understandable. So we did some research, removed our horns, and made ourselves some awesome masks. <br> NOW WE LOOK LIKE YOU! BOOM! </p>
<p class="text-indent main-text"> You're welcome, it took a lot of soul for us to demote ourselves to your standard so you could buy our gold, so have some fucking empathy. Look at our art, buy our clothes and other cool ass merchandise, sign up for our newsletter too while
you're at it. </p>
<p class="text-indent main-text"> Don't worry. We don't want to kill you, without you we serve no purpose. We just want to spread our noise surface-wide(and then maybe eat your soul, if you're a poser). </p>
<p class="text-indent main-text bottom-text"> Welcome to <a class="text-red" href="#"> NVM </a>, the home of the designer demons.</p>
</div>
</div>
<div class="col-lg-6">
<img class="demon-pic" src="" alt="IMAGE OF THE SEVEN OF US DRAWN AS OUR DEMONS">
</div>
</div>
</div>
</body>
</html>
This is my CSS:
.navbar-toggle {
background-color: transparent;
background-image: none;
border: 1px solid transparent;
}
.navbar-toggle .icon-bar {
background-color: red;
}
You're missing the important class navbar-light for your <nav element.
This class is required to show icons and colors correctly within the navbar.
So just change from
<nav class="navbar navbar-expand-lg navbar-white d-flex justify-content-center">
to
<nav class="navbar navbar-expand-lg navbar-white d-flex justify-content-center navbar-light">
And the hamburger icon will be visible
I've recently been playing around with Materialize-css trying to get use to building websites. However, I noticed that when I try to add JavaScript features it does not seem to work. I've double checked to make sure I have all the right folders in place - js, css, & fonts, and the correct script loading as well. Here is a sample of my jQuery & index.html file:
$('.parallax').parallax();
$('.dropdown-trigger').dropdown();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<ul id="dropdown1" class="dropdown-content">
<li>macOS</li>
<li>iOS</li>
<li class="divider"></li>
<li>Android</li>
</ul>
<!--<div class="navbar-fixed">-->
<nav>
<div class="nav-wrapper" style="background-color: #323643;">
Logo
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>Home</li>
<li>About</li>
<li><a class="dropdown-trigger" href="#" data-target="dropdown1">Downloads<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</div>
</nav>
<!--</div>-->
<div class="parallax-container">
<div class="parallax"><img src="images/oneway.jpg"></div>
</div>
<div class="section white">
<div class="row container">
<h2 class="header">Parallax</h2>
<p class="grey-text text-darken-3 lighten-3">Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.</p>
</div>
</div>
<div class="parallax-container">
<div class="parallax"><img src="images/oneway.jpg"></div>
</div>
<!--JavaScript at end of body for optimized loading-->
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html>
As you can see I'm trying to add a Parallax, and a drop down menu button to my website. In order to do this I've been instructed to add the jQuery '$('.parallax').parallax();', and '$('.dropdown-trigger').dropdown();', in the $(document).ready(function()) in the materialize.js file. See the documentation here: https://materializecss.com/parallax.html, & https://materializecss.com/dropdown.html.
Here is a picture of what I'm getting when I run this code:
The Downloads drop down button should be displaying one, two, three, etc., when I click it, and there should be a background image using the Parallax. Does anyone notice something I'm missing?
I think your library placing is wrong. Please check it with below changes. Now I am not getting any error
$(document).ready(function(){
$('.parallax').parallax();
$('.dropdown-trigger').dropdown();
});
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<!--Import Google Icon Font-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/js/materialize.min.js'></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<ul id="dropdown1" class="dropdown-content">
<li>macOS</li>
<li>iOS</li>
<li class="divider"></li>
<li>Android</li>
</ul>
<!--<div class="navbar-fixed">-->
<nav>
<div class="nav-wrapper" style="background-color: #323643;">
Logo
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>Home</li>
<li>About</li>
<li><a class="dropdown-trigger" href="#" data-target="dropdown1">Downloads<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</div>
</nav>
<!--</div>-->
<div class="parallax-container">enter code here
<div class="parallax"><img src="images/oneway.jpg"></div>
</div>
<div class="section white">
<div class="row container">
<h2 class="header">Parallax</h2>
<p class="grey-text text-darken-3 lighten-3">Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.</p>
</div>
</div>
<div class="parallax-container">
<div class="parallax"><img src="images/oneway.jpg"></div>
</div>
</body>
</html>
I figured it out.
Apparently the JQuery is supposed to be added to this function:
(function($){
$(function(){
$('.sidenav').sidenav();
$('.parallax').parallax();
}); // end of document ready
})(jQuery);
The code was working perfectly on local host with xampp. All I've done is upload it to a server and now it's not working.
I uploaded all the BS files as well. I also fixed the href links to be '..../js/bootstrap.min.js' etc. No images load and nor does bootstrap I do not think. The reason I think the problem comes from Bootstrap is because all the text/buttons still appear, they just aren't customised with the css/JS as BS does.
They are php files.
This is a link to the site: http://www.johnnythyroid.com.
I'm only new and this is just for learning so all advice is much appreciated.
This is the relevant code I think, I deleted a lot of the stupid text to make it shorter:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Jod</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel='stylesheet' type='text/css' href="johnnythyroidcom.ipage.com/css/custom icons.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="johnnythyroidcom.ipage.com/js/bootstrap.min.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[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]-->
</head>
<body>
<div class="navbar navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only"> Navbar toggle </span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="johnnythyroidcom.ipage.com/dansite1.php">Some Name</a>
</div>
<div class="navbar-collapse collapse" style="line-height:21px; height:140px;"> <!-- added this to prevent change of navbar height when switching between login/logout screens -->
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Account<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dropdown-header"></li>
<li>Login</li>
<li>Create Account</li>
<!-- <li class="divider"></li>
<li class="dropdown-header">Portfolio</li>
<li>Portfolio 1</li>
<li>Portfolio 2</li> add divider to split up a drop down menu -->
</ul>
</li>
<li class="navbar-text pull-right signedin"> Welcome, Guest! </li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="jumbotron text-center">
<h1> The </h1>
<p> A simgn </p>
Bg
ng
</div>
<div class="row-same-height">
<div class="col-md-4"> <!-- works on a 12 point grid system - columns need to add up to 12 in a row-->
<a href="johnnythyroidcom.ipage.com/rocket.php" class="thumbnail home-thumb">
<img src="johnnythyroidcom.ipage.com/Img/first rocket.jpg" style="max-height:250px" alt="First rocket theme"/>
</a>
<h3> Rjj </h3>
<p>sum dolor sit amet.</p>
</p>
View more
</div>
<div class="col-md-4"> <!-- works on a 12 point grid system - columns need to add up to 12 in a row-->
<a href="johnnythyroidcom.ipage.com/stars.php" class="thumbnail home-thumb">
<img src="johnnythyroidcom.ipage.com/Img/sky.jpg" style="max-height:250px" alt="sky theme"/>
</a>
<h3> Ss </h3>
<p>Lorenim.</p>
View more
</div>
<div class="col-md-4"> <!-- works on a 12 point grid system - columns need to add up to 12 in a row-->
<a href="johnnythyroidcom.ipage.com/sky.php" class="thumbnail home-thumb">
<img src="johnnythyroidcom.ipage.com/Img/stars.jpg" style="min-height:227px" alt = "Star theme"/>
</a>
<h3> y </h3>
<p>Lorenim.</p>
View more
</div>
</div>
</div>
<div class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
<div class="container">
<div class="navbar-text pull-left">
<p> aaaaaa </p>
</div>
<div class="navbar-text pull-right">
<i class="fa fa-facebook-square fa-2x"></i>
<i class="fa fa-twitter fa-2x"></i>
<i class="fa fa-google-plus fa-2x"></i>
</div>
</div>
</div>
Try this
change
<img src="johnnythyroidcom.ipage.com/Img/first rocket.jpg" style="max-height:250px" alt="First rocket theme">
into
<img src="http://johnnythyroidcom.ipage.com/Img/first rocket.jpg" style="max-height:250px" alt="First rocket theme">
add http:// to your all images src
Check the console for errors.
It says, Bootstrap's JavaScript requires jQuery, As I could see, You have included it and it is loaded correctly. Include that file before including bootstrap.min.js
Also correct that path of images. Your request url becomes: http://www.johnnythyroid.com/johnnythyroidcom.ipage.com/Img/first%20rocket.jpg which is incorrect.
Note: Just a blind guess, Incorrect path could be because of .htaccess
when reffering 3rd party include css or jss
you have to use https if your server is using https
else use http
for example you are accessing your site http://yoursite.com or http://localhost
then http://getbootstrap.com/css/bootstrap.min.js or css will work
that is why it works on localhost
but if you use https for yoru site https://yoursidte.com
then http://getbootstrap.com/css/bootstrap.min.js or css will not work
you will have to user https
e.g https://getbootstrap.com/css/bootstrap.min.js or css
THIS WAS THE CASE WHY MY menu were wroking on localcomputer but not over https , after changing from http to https://getbootstrap.com/css/bootstrap.min.js or css now it is working ..
all these files can be in different locations
for example you may save bootstrap.min.css in your site folder in case you edited that file ..
I just started using foundations and frankly, its been a while since i built my last website. so please be pacient with me.
I deal with an issue with my menu (top-bar) now for over a day and can not find a clue what is going wrong.
The thing is, I really just need a basic menu, which is toggeling to the standard burger-menu on small screens, so far so good, it should work like demonstrated in the documentation right? But unfortunatly it does not and I cant figure out why.
I hope you can help me. I add my code without contents below. The file lies in a subdirectory, thats why all directory references are with ../ at the beginning.
Thanks a lot already!
Ina
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Inas | Ernährungs Coaching</title>
<link rel="stylesheet" href="../css/foundation.css" />
<link rel="stylesheet" href="../css/additionals.css" />
<script src="../js/vendor/modernizr.js"></script>
</head>
<body>
<div id="wrap">
<div id="header">
<div class="row">
<div class="large-12 columns clearfix">
<!-- a header -->
</div>
</div>
<br>
<div class="row">
<div class="small-12 columns">
<!-- Navigation -->
<div class="contain-to-grid sticky">
<nav class="top-bar data-topbar" >
<ul class="title-area" >
<li class="name">
<h1></h1>
</li>
<li class="toggle-topbar menu-icon"><span>Menü</span>
</li>
</ul>
<section class="top-bar-section">
<ul>
<li>Start</li>
<li class="divider"><li>
<li>Angebot</li>
<li class="divider"><li>
<li>Aktuelles</li>
<li class="divider"><li>
<li>Über Mich</li>
<li class="divider"><li>
<li>Kontakt</li>
</ul>
</section>
</nav>
</div><!-- /navigation -->
</div>
</div>
</div>
<div id="main">
<!-- some content -->
</div>
<div id="footer">
<!-- a footer -->
</div>
</div>
<script src="../js/vendor/jquery.js"></script>
<script src="../js/foundation.js"></script>
<script src="../js/foundation/foundation.topbar.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
Compare your line of code:
<nav class="top-bar data-topbar" >
with the corresponding one from Foundation's documentation:
<nav class="top-bar" data-topbar role="navigation">
Your error should be pretty obvious now and can prevent Top Bar from functioning correctly.
Additional advice: Next time you want to use a predefined feature of Foundation, copy and paste the code and then apply your changes to it. It seems you have rewritten it and accidentally believed "data-topbar" to be a class.
Additonal: to stick navigation at the top in small screens (up to 640px range)
"sticky_on: [small]; scrolltop: false"
and show parent link in mobile view you will need
"mobile_show_parent_link: true;"
<nav class="top-bar" data-topbar role="navigation" data-options="sticky_on: [small]; scrolltop: false; mobile_show_parent_link: true;">
I am working on a bootstrap site and are having issues with my navbar-toggle when viewed on my iphone and ipad. The dropdown button is visible, but does not respond or expand. Seems to be working well in all my computer's browsers.
I am using bootstrap v3.3.5 and jquery-1.11.3
<head>
<!-- Website Title & Description for Search Engine purposes -->
<title></title>
<meta name="description" content="">
<!-- Mobile viewport optimized -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- Bootstrap CSS -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="bootstrap/fonts/bootstrap-glyphicons.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="includes/css/styles.css" rel="stylesheet">
<link href="includes/css/fonts.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600|Arvo' rel='stylesheet' type='text/css'>
<!-- Include Modernizr in the head, before any other Javascript -->
<script src="includes/js/modernizr-2.6.2.min.js"></script>
</head>
Here is my navbar
<!--Navbar-->
<div class="navbar" role="navigation">
<div class="container">
<!--navbar responsive toggle-->
<div class="navbar-header">
<button class="navbar-toggle collapsed" type="button" data-target="#navbar-responsive-collapse" data-toggle="collapse" >
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- brand and toggle grouped together for better mobile display -->
<img class="navbar-brand" src="images/navbar_logo.png" alt="logo">
</div><!--end of navbar-header-->
<div class="collapse navbar-collapse" id="navbar-responsive-collapse">
<ul class="nav navbar-nav navbar-default" id="myNav">
<li class="active">
Home
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div><!-- end of collapse-->
</div><!-- end of container-->
</div><!-- end of navbar -->
bottom links.
<!-- All Javascript at the bottom of the page for faster page loading -->
<!-- First try for the online version of jQuery-->
<script src="http://code.jquery.com/jquery.js"></script>
<!-- If no online access, fallback to our hardcoded version of jQuery -->
<script>window.jQuery || document.write('<script src="includes/js/jquery-1.11.3.min.js"><\/script>')</script>
<!-- Bootstrap JS -->
<script src="bootstrap/js/bootstrap.min.js"></script>
here is a js.fiddle if you would like to see the css: https://jsfiddle.net/Dinkledine/asLLydyz/8/
I've seen similar posts to this, and these are the workarounds I've gathered. So far none of them have worked. So i'm starting to think its my markup.
ive tried:
updating bootstrap from v3.3.4 to v3.3.5.....
updating jquery from 1.8.2 to 1.11.3.....
replacing "ontouchstart" to "disable-ontouchstart" within bootstrap.min.css
thanks for your help!
Bootstrap v2 Dropdown Navigation not working on Mobile Browsers
Safari on iPhone only support click event for <a> and <input> element.
You can find your fix here.
<button class="collapse navbar-collapse" id="navbar-responsive-collapse">
<ul class="nav navbar-nav navbar-default" id="myNav">
<li class="active">
Home
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
in css:
body{z-index:-1}