Menu
Hello people please help!
I have gone through all the jquery issues in stackoverflow. I tried some of the solutions but i am not getting the result as i want. I am making a one page website for my company but i am having trouble in bringing responsiveness to it.
The code is as follows:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Top Accountant. Providing solution for all your accounting needs</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link type="text/css" rel="stylesheet" href="css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="css/bootstrap-theme.css" />
</head>
<body>
<!-- Navigation -->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">Top Accountant</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li class="dropdown">
<a href="#"class="dropdown-toggle" data-target=".dropdown">Services <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Service 1</a></li>
<li><a href="#">Service 1</a></li>
<li><a href="#">Service 1</a></li>
<li><a href="#">Service 1</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
<!-- End of Navigation -->
<!--Image slider-->
<div id="myCarousel" class="carousel slide">
<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>
</ol>
<div class="carousel-inner">
<!--images size should be 1920-741 px -->
<div class="item active">
<img src="img/accountancy-services.png" />
<div class="container">
<div class="carousel-caption">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut nisl sit amet est sodales imperdiet.</p>
<p><a class="btn btn-lg btn-primary" href="#">Contact Us</a></p>
</div>
</div>
</div>
<div class="item">
<img src="img/images.jpg" />
<div class="container">
<div class="carousel-caption">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut nisl sit amet est sodales imperdiet.</p>
<p><a class="btn btn-lg btn-primary" href="#">Contact Us</a></p>
</div>
</div>
</div>
<div class="item">
<img src="img/accountant-9-tips.png"/>
<div class="container">
<div class="carousel-caption">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut nisl sit amet est sodales imperdiet.</p>
<p><a class="btn btn-lg btn-primary" href="#">Contact Us</a></p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="Prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="Next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<!--End Image slider-->
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="js/bootstrap.js"></script>
There are few things which i have made so far.
1.) When the website is viewed in mobile or tab the nav bar disappears and a toggle button appears. This is working fine.
2.) I have dropdown menu in services which is not working for me. 3.) I have made a carousel as well which is sliding perfectly but not responding to the the left and right click icon.
I don't know what's the problem as 1 is working fine but 2 & 3 are not working.
Please help me in this matter and advise me where am i going wrong.
Thanks in advance.
743
Double check the docs for working markup examples. There are few problems with your markup. Use data-toggle="dropdown" for the dropdown, and your href/class attributes are not spaced. Remove the data-target for the dropdown.
As far as the carousel goes, next and prev are case sensitive so you need to use data-slide="prev". Also, since you're using navbar-fixed-top don't forget to add body {padding-top: 50px;} or the navbar will overlay your carousel content.
Here's a working update: http://codeply.com/go/gJvCndru8B
145
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
