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>
Related
I want to have my site responsive to different screen sizes. At the moment I am testing my site at a width of 765px (and lower). What I would like to happen is for the menu to appear when I click the three bars, but nothing happens. No menu appears, just the 'brand name'.
I am using the bootstrap navigation for my menu.
This is a screenshot of the page (edited):
The Jquery code: - external file
#media screen and (min-width: 280px) and (max-width: 765px){
/* code goes here */
.primary {
color: orange !important;
font-size: 14px;
}
}
The color change is for testing sizes.
The HTML: - navigation only
<nav class="navbar navbar-default">
<div class="container-fluid">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="navbar-header">
<a class="navbar-brand" href="index.php"><span class="primary">#</span></a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
<li>Privacy</li>
<li>Terms</li>
<li>Copyright</li>
</ul>
</div><!-- navbar collapse -->
</div>
</nav>
What have I missed?
How I can I solve my issue?
Any help would be appreciated.
Thanks
One of the reasons would be messing up the order of jQuery and bootstrap.js. Bootstrap requires jQuery in order to run some events. So make sure your jquery script is before bootstrap.min.js or bootstrap.js.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
<div class="container-fluid">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="navbar-header">
<a class="navbar-brand" href="index.php"><span class="primary">#</span></a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
<li>Privacy</li>
<li>Terms</li>
<li>Copyright</li>
</ul>
</div><!-- navbar collapse -->
</div>
</nav>
i'm stuck. pleasw help. why my collapse menu button doesnt expand when pressed?
https://codepen.io/aalis/pen/egmmeW
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class=" navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">My portfolio page</a>
</div>
<div class="collapse navbar-collapse navbar-right" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>My works</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
https://codepen.io/anon/pen/QdwyEW
You missed placing bootstrap js file in your pen.
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
Add this in your javascript settings and it will work
I am trying to use bootstrap Navbar-collaps menu for my Mobile.site.master page but it seems to be having problems, the button is where I want it its just on click the menu doesn't actually open and I don't know why any help would be amazing. The code is posted below if you need anything else please let me know.
<nav class="navbar navbar-inverse 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="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">BRAND</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>
Fixed Link
</li>
</ul>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>L1</li>
<li>L2</li>
</ul>
</div>
</div>
You should use an ID in your menu div <div class="collapse navbar-collapse" id="MenuID"> and call it in your button data-target="#MenuID"
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#MenuID" 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>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="MenuID">
<ul class="nav navbar-nav">
<li class="active">L1 <span class="sr-only">(current)</span></li>
<li>L2</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Fixed Link</li>
</ul>
</div>
</div>
</nav>
You can see the result here bootply
one change in your code you forget href " second link
<ul class="nav navbar-nav">
<li>L1</li>
<li>L2</li>
</ul>
your code is working now
may be you included this file ?
bootstrap.css
jquery library
bootstrap.js
https://jsfiddle.net/k60f4x3c/
I had to reinstate a backup of my project and while using Github it deleted one of the JS files needed to make the dropdown work, there wasn't actually an error in my code just some of it had gone missing.
Question Background:
I have a standard Bootstrap collapsible NavBar that is pulled-right.
The Issue:
This is the NavBar on a non-mobile device:
This is pulled right to allow for this desired right-aligned posistion.
This is the NavBar collpased on a mobile device:
**Note that the item in the dropdown are aligned right, this make sense as its pulled right but I want them centered when on a mobile device, whilst keeping them aligned right on a non-mobile device
The Code:
I thought that setting text-center on the <ul> list would solve the issue but it does not:
<div class="navbar">
<nav class="navbar navbar-default navbarColour" role="navigation" id="nav">
<div class="container">
<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>
<img src="~/Images/DC.png" class="dc">
</div>
<div class="middleNavPadding">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<div class="pull-right text-center">
********Set text-center but this dosen't work********
<ul class="nav navbar-nav text-center">
<li>Services</li>
<li>Our Mission</li>
<li>Projects Gallery</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
</div>
Any help with setting these <ul> list elements centered but keep the menu items pulled right on a non mobile device would be great.
Instead of using pull-right you should use navbar-right.Just put navbar-right to the unordered-list, remove the pull-right div, and the links will be centered on small devices.Working example.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar">
<nav class="navbar navbar-default navbarColour" role="navigation" id="nav">
<div class="container">
<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>
<img src="~/Images/DC.png" class="dc">
</div>
<div class="middleNavPadding">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right text-center">
<li>Services
</li>
<li>Our Mission
</li>
<li>Projects Gallery
</li>
<li>Contact Us
</li>
</ul>
</div>
</div>
</div>
</nav>
</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 :)