I have a Bootstrap Navbar that works fine in desktop but when shrunk down at about 425px the contact button starts to work as the login button as well, which it's never have done before.
The code I have is this
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav navtop navbar-nav pull-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Contact Us <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Advertising</li>
<li>Contact the Council </li>
<li>Report a Problem</li>
</ul>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Login</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<p class="modalfooter discoverthesecret">discover the secret...</p>
</div>
</div>
</div>
</div>
So when I click on the contact us, it loads up the login modal?
Thank you.
Your second list item (login btn) is over the first so you are triggering the the second instead of first
add the following:
.nav>li {
width: 50%;
float: right;
}
Related
I am trying to have a modal as navigation bar for mobile view, And
When I run the below snippet, In mobile view when I click on icon bar/ menu bar, None of buttons are responding in the modal. I am not getting any clue on this. Thanks for any help in advance
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="height: 100vh !important">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body" style="height: 100vh; opacity:1">
<button type="button" class="close" data-dismiss="modal" >×</button>
<ul class="nav navbar-nav navbar-right hidden-lg hidden-md" >
<li>HOME1</li>
<li>BAND1</li>
<li>TOUR1</li>
<li>CONTACT</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">MORE
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Merchandise</li>
<li>Extras</li>
<li>Media</li>
</ul>
</li>
<li><span class="glyphicon glyphicon-search"></span></li>
</ul>
</div>
</div>
</div>
</div>
<div class="bg-img-hero">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myModal">
<span class="icon-bar" style="color: yellow !important"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right" >
<li >HOME</li>
<li>BAND</li>
<li>TOUR</li>
<li>CONTACT</li>
</ul>
</div>
<div class="collapse navbar-collapse" id="myNavbar1">
<ul class="nav navbar-nav navbar-right hidden-lg hidden-md" >
<li>HOME1</li>
<li>BAND1</li>
<li>TOUR1</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</nav>
</div>
Add All JS & CSS file
also change here data-toggle="collapse" to data-toggle="modal"
<button type="button" class="navbar-toggle" data-toggle="modal" data-target="#myModal">
<span class="icon-bar" style="color: yellow !important"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="height: 100vh !important">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body" style="height: 100vh; opacity:1">
<button type="button" class="close" data-dismiss="modal" >×</button>
<ul class="nav navbar-nav navbar-right hidden-lg hidden-md" >
<li>HOME1</li>
<li>BAND1</li>
<li>TOUR1</li>
<li>CONTACT</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">MORE
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Merchandise</li>
<li>Extras</li>
<li>Media</li>
</ul>
</li>
<li><span class="glyphicon glyphicon-search"></span></li>
</ul>
</div>
</div>
</div>
</div>
<div class="bg-img-hero">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="modal" data-target="#myModal">
<span class="icon-bar" style="color: yellow !important"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="Images\logos\flexit-logo-TM-comp.png" style="padding-top:15px" >
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right" >
<li >HOME</li>
<li>BAND</li>
<li>TOUR</li>
<li>CONTACT</li>
</ul>
</div>
<div class="collapse navbar-collapse" id="myNavbar1">
<ul class="nav navbar-nav navbar-right hidden-lg hidden-md" >
<li>HOME1</li>
<li>BAND1</li>
<li>TOUR1</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</nav>
</div>
please check your bootstrap version and the relevant jquery version. try adding cdns in to
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
when those links are not added collapse will not works fine.
Using bootrap nav-fix top, In mobile mode the fixed navigation bar scrolls using the carousel, only in mobile mode this happens
i try fix with css change but no sucess
i dont know to fix that, thanks for help
Exemple
<!-- Navigation -->
<nav id="mainNav" class="navbar navbar-default navbar-custom navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
</li>
<li>
<a class="page-scroll" href="#fotos">Fotos</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contato</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- Galeria Section -->
<section id="fotos" class="bg-light-gray">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Galeria de Fotos</h2>
<br>
</div>
<div class="row">
<div class="carousel slide article-slide" id="myCarousel">
<div class="carousel-inner cont-slider">
<div class="item active">
<img src="http://placehold.it/1200x440/cccccc/ffffff">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script>$('#myCarousel').carousel({
interval: 4000
});
</script>
You Can use the following media queries its work fine for your issue.
#media (max-width:767px) { .navbar-static-top { position: fixed; bottom: 0; left: 0; width: 100%; margin: 0; } }
I am using bootstrap, and I have a tabbed navigation system within a modal pop up, I want buttons on the page, that will trigger the pop up, and then go to a specific tab within the pop up.
To be more complicated, the tabs I want to reach are within the main tabbed navigation system in the modal (Tabs within a tab). I want a button that will trigger "section 4" below
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<div class="container">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li>Section 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>I'm in Section 2.</p>
<div class="span8">
<div class="tabbable tabs-left">
<ul class="nav nav-tabs">
<li class="active">Section 3</li>
<li>Section 4</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab3">
<p>I'm in Section 3.</p>
</div>
<div class="tab-pane" id="tab4">
<p>I'm in Section 4.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
On my menu I have a font awesome icon that I would like to be able to change once click on parent link.
I am trying to get it if menu link is closed will show
And if menu link is open will show
Currently my java script not working.
I can only get it to change if change it manually but trying to get java script to do so.
<?php echo Modules::run('admin/common/header/index');?>
<div id="wrapper">
<nav class="navbar navbar-inverse" role="navigation">
</nav>
<div class="menu">
<ul class="nav navbar-nav menu">
<li>
<a class="parent" data-toggle="collapse" data-target="#setting"><i class="fa fa-cog"></i> System <span class="pull-right"><i class="fa fa-angle-right"></i></span></a>
<ul id="setting" class="collapse">
<li class="third-level">
<a data-toggle="collapse" data-target="#user"><i class="fa fa-angle-double-right"></i> First Level</a>
<ul id="user" class="collapse">
<li>
<i class="fa fa-angle-double-right"></i> Second Level
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div id="page-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1><i class="fa fa-tachometer"></i> Dashboard <small>Dashboard Home</small></h1>
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$('.parent').on('shown.bs.collapse', function() {
$(".parent").addClass('fa fa-angle-right').removeClass('fa fa-angle-down');
});
</script>
<?php echo Modules::run('admin/common/footer/index');?>
You need to attach the listener to the object that is actually collapsing:
$('#setting').on('shown.bs.collapse', function() {
$(".parent").addClass('fa fa-angle-right').removeClass('fa-angle-down');
});
#setting is the element being collapsed, so the event happens there.
What's wrong here is you jquery syntax
$('.parent').on('shown.bs.collapse', function() {});
The correct syntax looks like $('.parent <sub classes>').on('click', function() {});
Hi guys I know its a simple thing but I'm having trouble making this work. Slidedown on click/touch for the nav, the slideUp function isnt working any help? Thanks
Some Code
<div class="nav-container">
<div class="nav nav-pills nav-stacked">
<ul class="nav nav-pills nav-stacked">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Is Landscape Architecture Right For Me?</a>
<ul class="dropdown-menu">
<li>What Is Landscape Architecture?</li>
<li>What Skills Do I Need?</li>
<li>Future Career Prospects (U.S. Labor Department)</li>
</ul>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">What Do Landscape Architects Do?</a>
<ul class="dropdown-menu">
<li>Interviews With Leading Landscape Architects</li>
<li>ASLA Professional Awards</li>
<li>ASLA Student Awards</li>
<li>Buy the Book: <em>Becoming A Landscape Architect</em></li>
</ul>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Why Is Their Work So Important?</a>
<ul class="dropdown-menu">
<li>Designing Our Future: Sustainable Landscapes</li>
<li>ASLA Animations</li>
</ul>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Where Can I Study?</a>
<ul class="dropdown-menu">
<li>Picking A School</li>
<li>Design Intelligence Rankings (2013)</li>
</ul>
</div>
</div>
</div>
Jquery
$(document).ready(function(e) {
$('.nav-pills ul li').on('click touchstart', function() {
$(this).children('ul').stop().slideDown(500);
});
$('.nav-pills ul li ul').on('click touchstart', function(){
$(this).children('ul').stop().slideUp(300);
});
});
2nd part of my question is if I can hide tooltips on tablets (ipad) currently a user would have to click for the tooltip then click again to launch the modal
Some Code
<div class="modal-container0">
<button class="btn btn-primary btn-lg top" data-toggle="modal" data-placement="top" data-original-title="About Columbus Circle" data-target="#myModal_0"><span class="glyphicon glyphicon-plus"></span></button>
<div class="modal fade right" id="myModal_0" tabindex="-1" role="dialog" aria- labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">About Columbus Circle</h4>
</div>
<div class="modal-body">
<img src="img/0173ColCir_062_c_before.jpg" class="img-responsive"/>
<p>Columbus Circle is an awesome project</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div><!--End Modal 1-->
</div><!--End.modal-content-->
</div><!--End.modal-dialog-->
</div>
Jquery
$(function(){ $('.top').tooltip();});
Also here is a link to the site I'm working on asla.org/yourpath
Thanks so much!