im building a "one page" website with two different navbars, one for desktop and the other for small screen sizes. The links in both navbars are same, just the appearance is different. My problem is that i havent find a way to scrollspy both of them, i tried this way but it didnt work:
<body data-spy="scroll" data-target=".navbar, .mobinavi" data-offset="0">
Heres the HTML:
<!-- NAVIGOINTI -->
<div class="container hidden-xs">
<div class="row">
<div class="col-sm-12 navilaatikko">
<nav class="navbar navbar-default navbar-static-top paanavi" data-spy="affix" data-offset-top="140">
<div class="container">
<div class="navbar-header">
<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>
<span class="navbar-brand"></span>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Sulka</li>
<li>Tapahtumat</li>
<li>Galleria</li>
<li>Yhteystiedot & Palaute</li>
<li>Henkilökunta</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
<div class="visible-xs mobinavi" data-spy="affix" data-offset-top="140">
Sulka
Tapahtumat
Galleria
Yhteystiedot & Palaute
Henkilökunta
</div>
<!-- /NAVIGOINTI -->
Any help? Thanks.
Related
i'm trying to create a navbar with logo, like this layout: Layout on desktop
and with mobile, like this layout: Layout on mobile
In the first layout, i need that the navbar is center vertically. I have write this snippets of code:
<div class="row">
<div class="col-md-3">
<a href="#" class="pull-left">
<img src="image/logo.png" height="300px" id="logo" class="img-responsive">
</a>
</div>
<div class="col-md-9">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target="#example-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Search</li>
<li>Archives</li>
<li>Education</li>
<li>About</li>
</ul>
</div>
</nav>
</div>
</div>
That's work, except the vertically centered navbar and the logo on mobile go under the navbar, how i can obtain this two layout? Thanks in advance. :)
Your images do not appear making the question unclear on what you're trying to achieve. From what I understand is that you run out of space on mobile causing the elements to stack. Try adding a resizing attribute to the logo to make it a compatible size for mobile. Please revise your question though.
You can try align="center":
<div align="center" style="max-height:inherit">
<div class="col-md-9">
<nav align="center" class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target="#example-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Search</li>
<li>Archives</li>
<li>Education</li>
<li>About</li>
</ul>
</div>
</nav>
</div>
And please tell me if it works.
I have designed menu for large devices and mobile devices, but the problem is toggle menu always shows in expanded view. The problem occurred when col-md-3 & col-md-9 are given.
Is there any way to fix this?
My HTML Code
<div class="container">
<div class="row">
<div class="col-md-3"><img class="img-responsive logo" src="images/logo.png" ></div>
<div class="col-md-9">
<nav class="navbar navbar-default" style="background:none; border:none;">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse visible-xs" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right text-center">
<li>Home</li>
<li>About us</li>
<li>Employers</li>
<li>Job Seekers</li>
<li>Testimonials</li>
<li>Contact us</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
now Look at this
https://jsfiddle.net/MadhawaMB/qhft4w1L/1/
Im change some code
toggle get grouped for better mobile display
<button type="button" class="navbar-toggle" 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>
<div class="container">
<div class="row">
<div class="col-md-3"><img class="img-responsive logo" src="images/logo.png" ></div>
<div class="col-md-9">
<nav class="navbar navbar-default" role="navigation" style="background:none; border:none;">
<div class="container-fluid">
<!-- toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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>
<!-- 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">
<ul class="nav navbar-nav navbar-right text-center">
<li>Home</li>
<li>About us</li>
<li>Employers</li>
<li>Job Seekers</li>
<li>Testimonials</li>
<li>Contact us</li>
</ul>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav></div>
</div>
</div>
I am using bootstrap and smoothscroll for my one page website. I am unsure how to get the section in the navbar to become active though if someone scrolls to it - any help on this? I know how to get it to highlight when clicked but not sure about position
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- nav bar -->
<div class="navbar-brand"><b>Merisa Lee</b></div>
</div>
<div class="navbar-collapse collapse" style="height: 1px;">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Work</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Resume</li>
</div><!--/.nav-collapse -->
</div>
</div>
I'm using the regular navbar of bootstrap not the fixed-top one, I figured out that when .navbar{position: fixed;} it overlaps, but that's not what I want. I want when I scroll down the menu stays on the top of the page not to move with the page and overlap the content when the menu collapses.
this is my code so far:
<div class="navbar-wrapper">
<div id="menu" class="navbar navbar-right navbar-default nob no-focus" role="navigation">
<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 class="navbar-brand" href="#">Project name</a> -->
</div>
<div class="navbar-collapse collapse ">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
this is what is happening now because is fixed-top
[http://es.tinypic.com/view.php?pic=fc0i6s&s=8#.U9itaON5Py4]
thanks in advance.
Try this, it will keep the navbar fixed rather than overlap once u start scrolling down.
<div class="navbar navbar-inverse 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>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
Hope this helps :)
[noob alert] I am using bootstrap 3 alongside with a bought theme. When using on smaller viewport size, the nav button doesn't work. Which part of it am I missing? Thanks a lot!
<header class="page-header">
<div class="navbar navbar-default 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">Toggle navigation</span>
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="#">Hello World!</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">That</li>
<li>This</li>
</ul>
</div>
</div>
</div>
</header>
i works on me, maybe you forgot to add the jquery, script
http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js