I'm trying to add a bootstrap navbar following this guide: http://robertdickert.com/blog/2014/05/09/set-up-navigation-with-iron-router-and-bootstrap/. However the brand keeps appearing on a separate line from the list of links. ie (underscore is just to show the indent):
Brand
__Link1 Link2 Link3
This is the output from meteor list:
accounts-password 1.1.0* Password support for accounts
accounts-ui 1.1.5 Simple templates to add login widgets to an app
autopublish 1.0.3 Publish the entire database to all clients
bootstrap 1.0.1 Front-end framework from Twitter
iron:router 1.0.7 Routing specifically designed for Meteor
meteor-platform 1.2.2 Include a standard set of Meteor packages in your app
Here is the related html. I didn't add any css code, only installed bootstrap via meteor add.
<template name="layout">
<div class="container">
<header>
{{> nav}}
</header>
<body>{{> yield}}</body>
</div>
</template>
<template name='nav'>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="btn btn-navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
{{> navBrand}}
</div>
<div class="navbar-collapse">
<ul class="nav navbar-nav">
{{> navItems}}
</ul>
</div>
</div><!-- /.container-fluid -->
</nav>
</template>
<template name="navBrand">
<a class="navbar-brand" href="{{ pathFor 'home' }}">MyApp</a>
</template>
<template name='navItems'>
<li class="{{ activeIfTemplateIs 'link1' }}">
Link1
</li>
<li class="{{ activeIfTemplateIs 'link2' }}">
Link2
</li>
<li class="{{ activeIfTemplateIs 'link3' }}">
Link3
</li>
</template>
The problem was I didn't have bootstrap 3 installed. Fixed it with:
meteor remove bootstrap
meteor add mizzao:bootstrap-3
Related
I have a simple static HTML site with a header.html file I'd like to reuse on each of the pages. I followed the suggestion from how to load header and footer before the content using jquery.load() which appeared to work but caused the drop-down on hover no longer function (must be clicked). The top is the navbar using jQuery.load, the bottom is identical code placed inline within my index.html. My css and js files are all included in my index.html file, not in the header.html file. Any thoughts on why this is occurring?
In my header, I have the code below:
<script>
$(document).ready(function() {
$("#header").load("header.html");
$("#footer").load("footer.html");
});
</script>
..and to include the header/footer I have:
<div id="header"></div>
Contents of my current header.html file:
<section class="header-uper">
<div class="container clearfix">
<div class="logo">
<figure>
<a href="index.html">
<img src="images/logo.png" alt="" width="250em">
</a>
</figure>
</div>
<div class="right-side header-padding">
<ul class="contact-info">
<li class="item">
<div class="icon-box">
<i class="fa fa-envelope-o spacer"></i>
</div>
<strong>Email</strong>
<br>
<a href="#">
<span>customer email</span>
</a>
</li>
<li class="item">
<div class="icon-box">
<i class="fa fa-phone spacer"></i>
</div>
<strong>Call Now</strong>
<br>
<span>customer #</span>
</li>
</ul>
</div>
</div>
</section>
<header class="navbar navbar-default">
<div class="container">
<div class="HeaderRow">
<div class="col-md-12">
<!-- header-right start -->
<!-- ================ -->
<div class="header-right clearfix">
<!-- main-navigation start -->
<!-- ================ -->
<div class="main-navigation animated">
<!-- navbar start -->
<!-- ================ -->
<nav class="navbar navbar-default" role="navigation">
<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="#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>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav navbar">
<li class="active">Home</li>
<li class="dropdown">
Our Practice <span class="caret"></span>
<ul class="dropdown-menu">
<li>About Dr. Eaton</li>
<li>Staff</li>
<li>Our Office</li>
<li>Services</li>
</ul>
</li>
<li class="dropdown">
Education <span class="caret"></span>
<ul class="dropdown-menu">
<li>Eye Education</li>
<li>Covid 19 Safety Plan</li>
</ul>
</li>
<li>Optical</li>
<li>Insurances</li>
<li>Forms & Contact Us</li>
</ul>
</div>
</div>
</nav>
<!-- navbar end -->
</div>
<!-- main-navigation end -->
</div>
<!-- header-right end -->
</div>
</div>
</div>
</header>
Reposting as an answer for that lucrative reputation...
You state that you are loading content into here:
<div id="header"></div>
It sounds like this is adding a new element into the DOM, which may break your CSS selector specifications if you're not ready for a div#header to appear in the middle of them. I'd look here first.
The other issue is that the DOM is going to be ready and the <header> will not have been loaded yet. You're then using jQuery to load new elements into the DOM, and those elements may still need to be initialized once the DOM has finished loading the new HTML.
I am stuck with a problem with my nav bar. While clicking on the MENU option, nothing happens but if I right click on them and open them in a new tab they work fantastically. The thing is it's working in Mozilla but not in Chrome
What should I do?
Here's the HTML:
<div class="navbar navbar-fixed-top custom-navbar" role="navigation">
<div class="container">
<!-- navbar header -->
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon icon-bar"></span>
<span class="icon icon-bar"></span>
<span class="icon icon-bar"></span>
</button>
New Event
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li> Intro</li>
<li> Overview</li>
<li> Speakers</li>
<li> Programs</li>
<li> Register</li>
<li> Venue</li>
<li> Sponsors</li>
<li> Contact</li>
</ul>
</div>
</div>
</div>
<!-- =========================
INTRO SECTION
============================== -->
<section id="intro" class="parallax-section">
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12">
<h3 class="wow bounceIn" data-wow-delay="0.9s">July 22 - 26 in San Francisco, CA</h3>
<h1 class="wow fadeInUp" data-wow-delay="1.6s">Web Design Conference</h1>
LEARN MORE
REGISTER NOW
</div>
</div>
</div>
</section>
I'll just take a wild guess and assume you're using Bootstrap.
Make sure to include the bootstrap.js and jquery.js in the correct order:
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
Make sure to include jquery before your bootstrap.js file, this should do it.
For me, it's working in this fiddle.
Within js/smoothscroll.js, you have two dependencies:
jQuery.scrollTo
jQuery.localScroll
The issue seems to be with these plugins (possibly outdated?). localScroll calls e.preventDefault, however jQuery.scrollTo is not properly scrolling to the element with the corresponding hash (the code is minified, and I can't find the source for those versions).
After updating the dependencies, I verified scrolling worked as intended (at least in Chrome).
Steps to resolve:
Replace jQuery.scrollTo with:
https://raw.githubusercontent.com/flesler/jquery.scrollTo/master/jquery.scrollTo.min.js
And replace jQuery.localScroll with:
https://raw.githubusercontent.com/flesler/jquery.localScroll/master/jquery.localScroll.min.js
I have installed bootstrap 3 in my angular 4 project using the npm installer. I have a basic site done up and am trying to get an dynamic sideNav bar that will toggle in and out.
I have seen some examples online however they do not seem to work whether it be a newer version of bootstrap or compatibility issues with angular.
Does anyone have any recommendations for a navigation bar that I could use in this instance?
The HTML in my app.component.html:
<!-- Sidebar -->
<script src="src/Javascript/sidebar.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-left" id="sidebar-wrapper" role="navigation">
<ul class="nav sidebar-nav">
<li class="sidebar-brand">
<a href="#">
Brand
</a>
</li>
<li>
Home
</li>
<li>
About
</li>
<li>
Events
</li>
<li>
Team
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Works <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>About</li>
<li>Services</li>
<li>Clients</li>
<li>Contact</li>
</ul>
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</nav>
First You need to Import bootstrap 3 or Use Bootstrap 3 CDN
Then Instead of using JQuery Use Directive to manipulate Class and Style of Side Bar
I Have Created Stack blitz for same side Bar without using JQuery Check this: https://stackblitz.com/edit/angular-z6hrob
You are probably missing following JS Libraries in your code, add these in your index.html near end of <body> tag:
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<!-- Popper.JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<!-- Bootstrap Js CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- jQuery Custom Scroller CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
I am a newbie to symfony 2, so i used the traditionnal way of including bootstrap css and js files, and i faced the problem that the navbar is not working in my twig view, the code is working on a normal php web site. So here is my code
{%block header%}
{{ parent() }}
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<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>
Ciné-tickets
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li><h1>test</h1></li>
<li>Accueil</li>
<li class="dropdown">
<a href = "" class="dropdown-toggle" data-toggle="dropdown">Categories
<i class="caret"></i>
</a>
<ul class="navbar-nav navbar-inverse dropdown-menu">
<li>Marocain</li>
<li>Americain</li>
<li>Egyptien</li>
<li>Indian</li>
</ul>
</li>
<li>Contact</li>
<li>se connecter || s'inscrire</li>
</ul>
</div> <!--fin collapse navbar-collapser-->
</div> <!--fin container-->
</div> <!--fin navbar navbar-inverse navbar-static-top-->
{%endblock%}
nothing show up even the :
<h1> TEST </h1>
Thank you
to dump assets in to web folder you will need to run few commands in the command promt from your working derectory when working in symfony
php ./app/console assets:install ./web --env=prod
php ./app/console assetic:dump --env=prod
for further guidance you check the documentation : http://symfony.com/blog/new-in-symfony-2-6-smarter-assets-install-command
I'm stuck on formatting a Bootstrap Nav Bar. I want a navigation that has one link (logout) on the right side and the remaining three links and header on the left. The problem is I can't get them to line up so they are all inline.
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
LHV TalentTracker
</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">
{% if request.path == "/candidates/" %}
<li>
<a class="candidate-nav-links" href="/candidates/">Candidates</a>
</li>
<li>
<a class="candidate-nav-links" href="/candidates/?role=technical">Product</a>
</li>
<li>
<a class="candidate-nav-links" href="/candidates/?role=business">Business</a>
</li>
</ul>
</div>
<span class="navbar-text navbar-right">{{ session["company_email"] }} Logout</span>
{% endif %}
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>