I have created a simple navigation bar using bootstrap but when i click on it ,it does not show the list items ,it works fine in bigger screen.
I have tried many alternatives but it does not work.
<html>
<head>
<meta charset = "utf8">
<meta http-equiv = "X-UA-Compatible" content = "IE = edge">
<meta name = "viewport" content = "width = device-width initial-scale = 1">
<link rel = "stylesheet" type = "text/css" href = "conFusion/css/bootstrap.min.css">
<link rel = "stylesheet" type = "text/css" href = "conFusion/css/bootstrap-theme.min.css">
</head>
<body>
<nav class = "navbar navbar-inverse" role = "navigation">
<div class = "container">
<div class = "navbar-header">
<button type = "button" class = "navbar-toggle collapsed"
data-toggle = "collapse" data-target = "#navbar" area-controls = "navbar"
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">Indore Medical</a>
</div>
<div id = "navbar" class = "navbar-collapse collapse">
<ul class = "nav navbar-nav">
<li class = "active">Main-Course</li>
<li>Starters</li>
<li>Desert</li>
<li>About-us</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
Considering your provided code, it seems that you haven't included jQuery library file and Bootstrap's JavaScript requires jQuery to run its JS/jQ events like toggle menu etc.
Code Snippet
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" area-controls="navbar" 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">Indore Medical</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Main-Course
</li>
<li>Starters
</li>
<li>Desert
</li>
<li>About-us
</li>
</ul>
</div>
</div>
</nav>
Related
I'm stumped with the Bootstrap hamburger menu. It's not opening at all, and I've tried the standard fixes - making sure jQuery is included before the Bootstrap JS, etc. The other thing I tried is making an HTML file out of the different parts of the EJS and opening it in my browser, which worked. So I'm wondering if there is somehow a problem with EJS that is causing this. Any insight would be very much appreciated! Here is the HTML that ends up generated by the server:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
<link rel = "stylesheet" href = "/css/styles.css">
<!-- <script src="https://js.stripe.com/v3/"></script> -->
<!-- <script>const stripe = Stripe('pk_test_dN7BxnPdS35iObyMgz4BPnJa00OevK81ys');</script> -->
<title>
Title
</title>
<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel = "stylesheet" href = "styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- LOGO/FAVICON? <link rel="icon" href="favicon.png"> -->
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="/">Site</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/a">A</a>
</li>
<li>
<a class="nav-link" href="/about">About</a>
</li>
<li>
<a class="nav-link" href="/contact">Contact</a>
</li>
<li>
<a class = "nav-link link-primary" href = "/register">Sign Up</a>
</li>
<li>
<a class = "nav-link link-primary" href = "/login">Login</a>
</ul>
</div>
</nav>
<div class = 'jumbotron jumbotron-fluid'><h1 align = 'center'>Hello!</h1></div>
<div class = 'container-fluid' style = 'padding-top: 10px;'>
<p>Welcome</p>
</div>
<footer class = 'footer'>
<div class = 'container'>
<div align = 'center'>
<span class = 'text-muted'>Copyright © 2021 -2022</p></span>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
If it helps, here is the content of head.ejs:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
<link rel = "stylesheet" href = "/css/styles.css">
<!-- <script src="https://js.stripe.com/v3/"></script> -->
<!-- <script>const stripe = Stripe('pk_test_dN7BxnPdS35iObyMgz4BPnJa00OevK81ys');</script> -->
<title>
The content of nav.ejs:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="/">Site</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/a">A</a>
</li>
<li>
<a class="nav-link" href="/about">About</a>
</li>
<li>
<a class="nav-link" href="/contact">Contact</a>
</li>
<% if(session) { if(session.logged_in) { %>
<li>
<a class = "nav-link link-primary" href = "/account">My Account</a>
</li>
<li>
<a class = "nav-link link-primary" href = "/logout">Logout</a>
</li><% }} %>
<% if(session) { if(!session.logged_in) { %>
<li>
<a class = "nav-link link-primary" href = "/register">Sign Up</a>
</li>
<li>
<a class = "nav-link link-primary" href = "/login">Login</a>
<% }} %>
</ul>
</div>
</nav>
Then the homepage with the includes:
<%- include('head.ejs'); %>
Site
</title>
<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel = "stylesheet" href = "styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<%- include('nav.ejs') %>
<div class = 'jumbotron jumbotron-fluid'><h1 align = 'center'>Hello!</h1></div>
<div class = 'container-fluid' style = 'padding-top: 10px;'>
<p>Welcome!</p>
</div>
<%- include('footer.ejs'); %>
And footer:
<footer class = 'footer'>
<div class = 'container'>
<div align = 'center'>
<span class = 'text-muted'>Copyright © 2021 <% if(new Date().getFullYear() > 2021) { %>-<%= new Date().getFullYear() %><% } %></p></span>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
I've been trying for hours to understand what's happening here, but I didn't manage to understand.
I've written the html body for a navigation bar, which is shown below.
<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.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse">
<div class = "container-fluid">
<div class = "navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target="#navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Segmentation Folks
</div>
<div class = "collapse navbar-collapse" id="navHeaderCollapse">
<ul class = "nav navbar-nav">
<li style="text-align: center;">Home</li>
<li style="text-align: center;">About</li>
<li style="text-align: center;">Contact</li>
<li style="text-align: center;">Sign in</li>
<li style="text-align: center;">Sign up</li>
</ul>
</div>
</div>
</nav>
When I open the html file from my computer, they all seem to be as I want.
But when I copied the html body to be an Angular component, the result is this. In addition the toggle button when the screen is small does not work, while in html it works.
Do you know why this happens? Thank you!
EDIT!
I have installed the bootstrap 3.3.6 and I have removed the scripts and link from this html. Then I included in the index.html below the the following:
<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.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
It seems that now it works!
Instead use links use cli to install bootstrap .
But to install 3.3.6 use this command:
npm install bootstrap#3.3.6
Here is working code
EDIT MAKE COLLAPSE WORK WITH ANGULAR
add in ts
collapsed:boolean=true;
html
<nav class="navbar navbar-inverse">
<div class = "container-fluid">
<div class = "navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target="#navHeaderCollapse" (click)="collapsed = !collapsed;">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Segmentation Folks
</div>
<div class = "collapse navbar-collapse" id="navHeaderCollapse" [ngClass]="{'collapse': collapsed, 'navbar-collapse': true}">
<ul class = "nav navbar-nav">
<li style="text-align: center;">Home</li>
<li style="text-align: center;">About</li>
<li style="text-align: center;">Contact</li>
<li style="text-align: center;">Sign in</li>
<li style="text-align: center;">Sign up</li>
</ul>
</div>
</div>
</nav>
I have a problem with BS3 navbar, when i change the size of the screen, navbar list items goes behind navbar brand image.
I would like navbar items to collapse into hamburger menu before they reach navbar brand. How can I achieve that?
Here is my HTML code:
<!DOCTYPE html>
<head>
<meta charset = "UTF-8">
<!-- BS, JS, FONTS -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<!-- CSS -->
<link rel = "stylesheet" type = "text/css" href = "navbarProb.css"/>
</head>
<body id="index" data-spy="scroll" data-target=".navbar" data-offset="50">
<!-- NAVBAR -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- MOBILE NAVBAR -->
<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 = "#listItem1">
<img src = "https://image.ibb.co/jN2AaV/logo.jpg">
</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>listItem1</li>
<li>listItem23</li>
<!-- DROPDOWN NAVBAR -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">listItem3<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>listItem4</li>
<li>listItem5</li>
<li>listItem6</li>
<li>listItem</li>
<li>listItem</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">listItem<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>listItem7</li>
<li>listItem</li>
<li>listItem</li>
<li>listItem</li>
<li>listItem</li>
<li>listItem</li>
</ul>
</li>
<li>listItem8</li>
<li>listItem9</li>
<li>listItem10</li>
</ul>
</div>
</div>
</nav>
Thanks!
#j.b
Bootstrap converts the navigation to hamburger below 767px and in your expected scenario, it should convert after 1021px which is not possible if you want to make it possible you have to write a media query #media (max-width: 1021px) and your hamburger code.
let me know if you need anything.
I have been working with this for awhile. The navbar shows up just fine, but the functionality is not there. Here is the code:
<nav class = "navbar navbar-inverse navbar-fixed-top" role = "navigation" id = "my-navbar">
<div class = "container">
<div class = "navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-ex1-collapse" 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 = "index.html">WM</a>
</div>
<div class = "collapse navbar-collapse" id = "myNavbar">
<ul class = "nav navbar-nav navbar-right">
<li>Projects</li>
<li>Resume</li>
<li>Contact Me</li>
<input type = "button" class="btn btn-info navbar-btn" value = "Blog" onclick = "relocate_blog()" id = "blog-button">
<script>
function relocate_blog() {
location.href = "blog.html ";
}
</script>
</ul>
</div>
</div>
<!--End Container -->
</nav>
<!-- End Navbar -->
<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="#myNavbar" 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 = "index.html">WM</a>
</div>
<div class = "collapse navbar-collapse" id = "myNavbar">
<ul class = "nav navbar-nav navbar-right">
<li>Projects</li>
<li>Resume</li>
<li>Contact Me</li>
<input type = "button" class="btn btn-info navbar-btn" value = "Blog" onclick = "relocate_blog()" id = "blog-button">
<script>
function relocate_blog() {
location.href = "blog.html ";
}
</script>
</ul>
</div>
</div><!--End Container -->
</nav><!-- End Navbar -->
I'm trying to create a basic bootstrap navbar that has a search bar in the middle of the bootstrap li elements. However, when I do this, it causes the text after the form to jump to the next line. I've tried messing with different classes, but I can't seem to figure this out. Below is an example of what's going wrong. Comment out the <form> and everything looks okay.
Here's the jsfiddle: http://jsfiddle.net/uyf2ddoc/
Thanks for the help!
<head>
<link rel= "stylesheet" href= "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" type="text/css">
<script src= "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div id = "sidebar" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class = "navbar-header">
BookMaps
<button class = "navbar-toggle" data-toggle="collapse" data-target = ".navHeaderCollapse"><span class="glyphicon glyphicon-book"></span></button>
</div>
<div class = "collapse navbar-collapse navHeaderCollapse">
<ul class = "nav navbar-nav navbar-left">
<li><a href = '#'>About</a></li>
<li><a href = '#'>Contact</a></li>
</ul>
<span class = "addBookSpan">
<form class="navbar-form">
<span class="input-group">
<input type="text" style="display:inline" class = "form-control inputAB" id="addBook" placeholder = "Add a Book" >
<span class="input-group-btn">
<button class="btn btn-default" id="addBookButton">Submit</button>
</span>
</span>
</form>
</span>
<ul style="display:inline" class = "nav navbar-nav navbar-left">
<li><a>BOOK</a></li>
</ul>
</div>
</div>
</div>
</body>