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; } }
Related
I have developed single page website and used bootstrap scroll spy when i click on nav item border bottom is not displaying before for this issue
i have added script now there is no issue in this.
But when i click nav link smooth scroll is not working link directly placing to
particular section without smooth scroll please anyone help me on this
Reference : http://floretmedia.net/temp/pbee/
<script>
$(document).ready(function(){
var headerHeight = $('header').innerHeight();
scrollTop: target.offset().top - headerHeight //offset height of header here too.
});
</script>
<body id="lcp1" data-spy="scroll" data-target=".navbar" data-offset="70">
<header>
<div class="custom-container">
<div class="header-right">
<div class="navbar-holder"> <!-- navbar-holder -->
<nav class="navbar navbar-default"> <!-- navbar-inverse -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed blue" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="ease cf">
<a class="navbar-brand" href="./">
<img src="images/logo.png" alt="sfatech Logo">
</a>
</div>
</div> <!-- /.navbar-header -->
<div id="navbar" class="collapse navbar-collapse cf"> <!-- nav-collapse -->
<ul class="nav navbar-nav navbar-right navbrdr">
<li class="active">HOME </li>
<li> FEATURES </li>
<li>PRICING</li>
<li>CONTACT</li>
<li>SIGN UP</li>
</ul> <!-- /.navbar-nav -->
</div> <!--/.nav-collapse -->
</nav> <!-- /.navbar-inverse -->
</div> <!-- /.navbar-holder -->
</div><!-- header-right -->
</div><!-- custom-container -->
</header>
You can try with this one
jQuery(document).ready(function(){
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
})
without javascript, add this code in your CSS file
html{
scroll-behavior: smooth;
}
I want that when someone opens it then menu must be opened, no need to click the button for opening it. When someone clicks the button then closes it instead of opening it.
Can anyone please help me? How can I achieve the result?
<link href="http://vsss.co.in/assets/css/main.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="header-nav animate-dropdown">
<div class="container">
<div class="yamm navbar navbar-default" role="navigation">
<div class="navbar-header">
<button data-target="#mc-horizontal-menu-collapse" data-toggle="collapse" class="navbar-toggle collapsed" type="button" style="background-color: rgb(0, 108, 180);width: 100%;">
<span class="sr-only">Toggle navigation</span>
<span style="font-size: 22px;color: #fff;text-align: center;width: 100%;">Menu</span>
</button>
</div>
<div class="nav-bg-class">
<div class="navbar-collapse collapse" id="mc-horizontal-menu-collapse" style="height: 0px;">
<div class="nav-outer">
<ul class="nav navbar-nav">
<li class="active dropdown yamm-fw"> Home </li>
<li class="dropdown mega-menu">
Category
<ul class="dropdown-menu container">
<li>
<div class="yamm-content">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-3 col-menu">
<ul class="links">
<li>Premium pens</li>
<li>Pens & refills</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
</div>
Yes by putting show class with collapse it will work for you see in example code:
<link href="http://vsss.co.in/assets/css/main.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="header-nav animate-dropdown">
<div class="container">
<div class="yamm navbar navbar-default" role="navigation">
<div class="navbar-header">
<button data-target="#mc-horizontal-menu-collapse" data-toggle="collapse" class="navbar-toggle collapsed" type="button" style="background-color: rgb(0, 108, 180);width: 100%;">
<span class="sr-only">Toggle navigation</span>
<span style="font-size: 22px;color: #fff;text-align: center;width: 100%;">Menu</span>
</button>
</div>
<div class="nav-bg-class">
<div class="navbar-collapse collapse show" id="mc-horizontal-menu-collapse" style="height: 0px;">
<div class="nav-outer">
<ul class="nav navbar-nav">
<li class="active dropdown yamm-fw"> Home </li>
<li class="dropdown mega-menu">
Category
<ul class="dropdown-menu container">
<li>
<div class="yamm-content">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-3 col-menu">
<ul class="links">
<li>Premium pens</li>
<li>Pens & refills</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
</div>
How can I implement Bootstrap Navbar Expand/collapse mobile without JavaScript?
I try like below but when I deactivate javascript from Browser, the Hamburger Menu is no more working.
<div class="container-fluid" id="page">
<div class="sidebar span3">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<style><input:checked + .nav-collapse {height: auto;}</style>
<a>
<label class="btn btn-navbar" for="checkbox">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</label>
</a>
<input type="checkbox" id="checkbox" style="position: absolute; opacity:0;" />
Dictionary
<div class="nav-collapse" />
<ul class="nav">
<li class="active">Search</li>
<li>Phrases</li>
<li>Tools & Downloads</li>
<li>News</li>
<li>About</li>
<li>Contact</li>
<li>Links</li>
</ul>
</div>
</div>
</div>
</div>
</div>
many thanks in advance.
bootstrap navbar is based on JavaScript so you cannot do this without enabling javascript but you can search for css navbar instead , http://codepen.io/Akhilr/pen/xwEvQz
like this http://codepen.io/Akhilr/pen/xwEvQz
In mobile version I need to have logo and navbar in one row, but then navbar content is too small (texts are on two rows, one row will be much better). Can I do something to increase width on 100%?
I create jsfiddle here
http://jsfiddle.net/8ayj7o36/
<div class="row">
<div class="col-xs-8 col-sm-8 col-md-3">
<img src="../img/logo.png" alt="" class="" />
</div>
<div class="col-xs-4 col-sm-4 col-md-9">
<!-- Static navbar -->
<div class="navbar navbar-default">
<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 class="navbar-brand" href="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Link dfa dfa dfdf</li>
<li>Link bbbb bbb bb</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
Thanks for any help!
Put the <a> tag corresponding to your logo within the navbar-header, so that everything falls in single line. Now it is for you to adjust col-group according to your requirement. This is your modified Fiddle
<div class="navbar-header">
<img src="../img/logo.png" alt="logo" class="" />
-
-
-
</div>
I tried to use this solution (Hide Twitter Bootstrap nav collapse on click) to hide nav collapse automatically when clicking. It's working correctly when nav is collapsed but when I'm using site on desktops (exactly when nav is not collapsed) nav is blinking.
Code:
$('.nav a').on('click', function() {
$(".btn-navbar").click(); //bootstrap 2.x
$(".navbar-toggle").click() //bootstrap 3.x by Richard
});
.block {
padding: 70px 0;
}
#section-white {
background-color: #fff;
height: 100px;
}
#section-1 {
margin-top: 51px;
/* height of header-navbar */
}
#section-1,
#section-2,
#section-3 {
height: 600px;
background-color: #555;
color: #fff;
}
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">Brand</a>
</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">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#section-1">About</a>
</li>
<li>
<a class="page-scroll" href="#section-2">Services</a>
</li>
<li>
<a class="page-scroll" href="#section-3">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="block" id="section-1">
<div class="container">
<div class="row">
Hello World
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</div>
<!-- /.block -->
<div id="section-white"></div>
<div class="block" id="section-2">
<div class="container">
<div class="row">
Hello World
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</div>
<!-- /.block -->
<div id="section-white"></div>
<div class="block" id="section-3">
<div class="container">
<div class="row">
Hello World
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</div>
<!-- /.block -->
You can try it here - Desktop results and this is source code - source code
Earlier I used this solution in Bootstrap 2.3.2 and haven't got any problem.
Try this:
JS
$('.nav a').on('click', function() {
$('.navbar-collapse').collapse('hide');
});
Check the updated fiddle.
Also check this answer: Close responsive navbar automatically