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>
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
How do I align the navbar-brand to the left of the page? I would like my Website Name to be in the same line with the menu list.
This is my current menu bar:
Current Navigation Bar
Notice, in my Current Navigation Bar, my Website Name is above the menu list.
Here is my code saved at Bootply.com:
https://www.bootply.com/ksxCEDHXPo
Many thanks.
I figured it out. I wanted my menu to look like this:
Click here for my expected navigation menu
I needed to put the column span to the navbar-brand and navbar-collapse parameter.
This was my code before:
Website Name
</div>
<div class="collapse navbar-collapse" id="myNavbar">
Here is my code for the update:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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 col-md-4" href="#">Awesome Theme</a>
</div> <!-- nav-header -->
<div class="collapse navbar-collapse col-md-8" id="myNavbar">
<?php
wp_nav_menu(array(
'theme_location'=>'primary',
'container' => false,
'menu_class'=>'nav navbar-nav navbar-right'
)
);
?>
</div><!-- collapse -->
</div><!-- container-fluid -->
</nav>
For more information on columns check out the site below:
https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
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 am facing an issue with Bootstrap 3. I have a single page navigation with sections and a fix after scroll navbar. As it scrolls the navbar gets fixed and changes background color. However when it comes to small screens the navbar isnt collapsing and it doesnt remain fixed.
This is part of the html.
<div class="navigate clearfix">
<div class="inner">
<h3 class="navigate-brand">Brand</h3>
<nav class="navbar" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu" >
<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="navbar-collapse collapse" id="menu">
<ul class="nav navigate-nav menu-right" >
<li class="active">Home</li>
<li>s1</li>
<li>S2</li>
<li>s3</li>
<li>s4</li>
</ul>
</div>
</nav>
</div>
</div>
The js with the background change:
$(document).ready(function(){
$(window).scroll(function(){
if($(window).scrollTop() > $(window).height()){
$(".navigate").css({"background-color" : "red"});
}else{
$(".navigate").css({"background-color":"transparent","background":"transparent"});
}
})
})
You may want to follow the instructions in: https://getbootstrap.com/components/#navbar
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
Based on the above, I have prepared a fiddle for you where navbar remains fixed at any given width of screen: http://jsfiddle.net/dmv73fzr/
Hope it helps you!
Hi I am trying to customize the boostrap default navbar.
I do not expect you to do all my work, but I need help to style the li field so it hangs over the navbar.
How do I make that?
Code I have:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavigation-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 hidden-lg hidden-md hidden-sm" href="#">Caleum Wellness</a>
</div>
<div class="collapse navbar-collapse" id="mainNavigation-collapse">
<ul class="nav navbar-nav">
<li class="active">Om oss</li>
<li>Behandlingar</li>
<li>Tidsbokning</li>
<li>Blogg</li>
<li>Kontakta</li>
</ul>
</div>
</div>
</nav>
The first image show how it is now, and the second image is how I want it.
You can try the Bootstrap customizer http://getbootstrap.com/customize/
Just change less variables how you want and then download it.
Solved the issue by creating a background image with height lower than the navigation wrapper.
The wrapper is still the same size but it looks like it is smaller.