I'm having an issue with my links, even tho I think it will be extremely straight forward, but I can't find what I'm doing wrong.
In my homepage i have two sections #portfolio and #contact. Then i have a folder with all the portfolio projects displayed.
My homepage sections are strucuted like this:
<section class="zonas" id="contact" name="contact">
CONTENT
</section>
On all my portfolio pages i have the menu as this:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<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" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
I want that when clicked on Portfolio, por example, that the user is taken back to the Portfolio section on the homepage. So far, only the "Home" menu item works. Both Portfolio and Contact doesn't. It doesnt do anything. Even tho when i over it i cant see on the left bottom corner the link "mydomain.com/index.html#portfolio
As i saw in other similar threads, i already tried "/index#portfolio" , "/index.html/#portfolio" but the result is the same.
Related
I'm running this ResearchSpace (RS) instance: https://www.magnetic-margins.com
In the header.hbs file, all seems to be set for a use of the navbar on mobile devices, but the dropdown won't work because the collapse event is not triggered, I think. I can make it permanently collapsed for mobiles but I fail to make the actual dropdown work!
RS is using React Bootstrap 3. The corresponding lines in the header.hbs file are:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="rs-header">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#rs-navbar"
aria-expanded="false" aria-controls="rs-navbar" aria-label="Toggle navigation">
<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="rs-header-logo" href="/" title="{{deploymentTitle}}"><img class="img-responsive" src="https://docs.google.com/drawings/d/e/2PACX-1vRKgdbvCgd7aA4xA3nCR21qrQpFvD6ryeqhLHJ2z15oDVb8lBMVLyPgOwRAiJxpUMVPK7HUvcogCVW9/pub?h=70"/></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="rs-navbar">
<ul class="nav navbar-nav">
{{!-- <li>
<semantic-link iri="http://www.researchspace.org/resource/ThinkingFrames"
urlqueryparam-view='system-projects' class="rs-body-m-B" style="padding-left: 60px;">
Projects
</semantic-link>
</li> --}}
</ul>
<ul class="nav navbar-nav icon-btns-container">
<li>
<semantic-link uri="http://www.researchspace.org/resource/magnet_Persons">
<div class="nav-iconAndLabel">
<i class="fa fa-users"></i>
<div>Persons</div>
</div>
</semantic-link>
</li>
...
This bug seems to apply to all RS instances I checked, but, e.g., works on a Metaphacts implementation of http://db.sphaera.mpiwg-berlin.mpg.de/resource/Start
Need help to resolve the bootstrap dropdown navigation issue. I followed all the rules available but I am missing something. Please help.
The service tab has two drop down li which should open when click on the caret. But the website css is not allowing to do so.
<!-- navbar-header -->
<div class="header-nav">
<nav class="navbar navbar-default">
<div class="navbar-header logo">
<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>
<h1>
<a class="navbar-brand" href="http://www.example.com/">Brand Name</a>
</h1>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1 navis">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li class="dropdown">
</span>
<ul class="dropdown-menu">
<li>SEO Service</li>
<li>Digital Marketing</li>
</ul>
</li>
<li>Projects</li>
<li>Timeline</li>
<li>Contact</li>
</ul>
</div>
<div class="contact-bnr-w3-agile">
<ul>
<!--<li><i class="fa fa-envelope" aria-hidden="true"></i>info#example.com</li>-->
<li><i class="fa fa-phone" aria-hidden="true"></i>000000000 </li>
</ul>
</div>
<div class="clearfix"> </div>
</nav>
<div class="clearfix"> </div>
</div>
You have a typo in your code:
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
Here, data-target represents the div that is being targeted for toggling when you click the button. So, it is looking for the div with the ID "bs-example-navbar-collapse-1". This line is fine, though I'd recommend renaming it to something more useful, like "site-nav" or something.
Now, here is where the problem occurs:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1 navis">
This is the div that you are (correctly) trying to expand/collapse. But you have given it the id "bs-example-navbar-collapse-1 navis", which is not the same as "bs-example-navbar-collapse-1". So, you are clicking the button, but no div is being found with a matching ID.
To solve this, set the ID to "bs-example-navbar-collapse-1" instead (remove "navis"):
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
Now, all should be right in the world.
Also, far as the jQuery warnings mentioned above, it seems you are loading jQuery 2 already, so you don't need to include 1.12 as well. So make sure you are including the jQuery lib that you want.
I have tried just about everything to get the toggle navigation to work and I have had no luck. Is it just a simple mistake or piece of code I'm missing? I have tried loading different scripts but still nothing.
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" style="background-color: #f2f2f2">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target="#nav-collapse" style="margin-top: 20px;">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#/home" class="navbar-brand">
<img src="img/evodent-logo.png" alt="evodent-logo" style="width:190px;">
</a>
</div>
<div class="collapse navbar-collapse" id="nav-collapse">
<ul class="nav navbar-nav navbar-right">
<li>
ABOUT
</li>
<li>
CONTACT
</li>
</ul>
</div>
</div>
</nav>
It seems like the code is working just fine as is. Make sure that you are including the bootstrap.min.js file on your page as well. As the collapsible components in bootstrap require this plugin/file.
Here is the official documentation on the Bootstrap Navbar that mentions that the plugin is required: http://getbootstrap.com/components/#navbar
Requires JavaScript plugin
If JavaScript is disabled and the viewport is narrow enough that the navbar collapses, it will be impossible to expand the navbar and view the content within the .navbar-collapse.
The responsive navbar requires the collapse plugin to be included in your version of Bootstrap.
I am new to Stack Overflow so please forgive me if this is a repeat question. I searched thoroughly, but could not figure this out.
I am building a zipline portfolio page using mostly Bootstrap v3.3.6 and cannot get my section links to navigate properly.
Here is a sample of my markup including the nav:
<div 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="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="#">Matthew Shelbourn</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Bio</li>
<li>Projects</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<!-- Body Section1 -->
<div>
<a name="bio"></a>
</div>
<div class="container" style="background-color:cadetblue;">
<div class="row">
<div class="col-xs-12 col-md-4">
<span><img id="profile-image" class="img-responsive pull-left" style="margin-top: 4.1%; margin-bottom:4.1%;" src="#"></span>
</div>
When I click on the link in my nav for "Bio" (or any of the other sections) it doesn't navigate to the top of the corresponding section. Instead, it navigates to an area about 1/3 of the way down from the top of the section.
This same issue happens with every section link I have. I'm sure it's something trivial, but what am I doing wrong? Thanks!
I coded my HTML index to have the navigation bar replaced by a button when the screen gets narrower. But, when the button is clicked, the navigation bar elements are not displayed as I expected. hope somebody can help me.
If I copy-paste the same nav-bar code into w3schools bootstrap simulator (http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_navbar_collapse&stacked=h) the elements do show up when I click the button (with narrow screen)
here is the piece of code I'm talking about:
<nav 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="#myNavbar">
<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/cuori.png" height="42" alt="Valentina e Andrea" title="Valentina e Andrea">Valentina e Andrea
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>Noi</li>
<li>Il Grande Giorno</li>
<li>Lista Nozze</li>
<li>Scrivici!</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1>Auguri a NOI! </h1>
</div>
</div>