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 -->
Related
May I ask as to how to create a vertical line that extends all the way down the right side of the listed items on this website? since I'll place the main content after the vertical line I'm trying to figure out
.first a.nav-link {
background-color: #ebe0dd;
}
a.nav-link {
font-size: 23px;
font-family: font-family: 'Times New Roman', Times, serif;
color: black;
font-weight: lighter;
}
<div class="container d-flex flex-column flex-md-row">
<nav class="navbar navbar-expand-md navbar-light d-flex flex-md-column">
<button
class = "navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#sidebar"
aria-controls="sidebar"
aria-expanded="false"
aria-label="Toggle Navigation">
<span class = "navbar-toggler-icon"></span>
</button>
<div class = "collapse navbar-collapse sidebar" id = "sidebar">
<ul class = "navbar-nav w-750 my-3 d-flex flex-md-column text-center ">
<li class = "first">All</li>
<li>To Pay</li>
<li><a href="#" class = "nav-link" >To Ship</a></li>
<li><a href="#" class = "nav-link" >To Receive</a></li>
<li><a href="#" class = "nav-link" >Completed</a></li>
<li><a href="#" class = "nav-link" >Cancelled</a></li>
</ul>
</div>
</nav>
</div>
Add the border-end class to the ul element:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<div class="container d-flex flex-column flex-md-row">
<nav class="navbar navbar-expand navbar-light flex-column" style="height: 100vh;">
<button
class = "navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#sidebar"
aria-controls="sidebar"
aria-expanded="false"
aria-label="Toggle Navigation">
<span class = "navbar-toggler-icon"></span>
</button>
<div class = "collapse navbar-collapse sidebar" id="sidebar">
<ul class = "navbar-nav h-100 w-750 my-3 d-flex flex-column text-center border-end">
<li class = "first">All</li>
<li>To Pay</li>
<li><a href="#" class = "nav-link" >To Ship</a></li>
<li><a href="#" class = "nav-link" >To Receive</a></li>
<li><a href="#" class = "nav-link" >Completed</a></li>
<li><a href="#" class = "nav-link" >Cancelled</a></li>
</ul>
</div>
</nav>
</div>
When I'm trying to take it as mobile version, I don't see the menu by clicking on the place where I showed in the picture. Can someone please help me?enter image description here
<div class = "container">
<div class = "navbar-header">
<button type = "button" class = "navbar-toggle" data-toggle = "collapse"
data-target = "#micon">
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
<img class = "logo" src = "logo1.png">
</div>
<div class = "collapse navbar-collapse" id = "micon">
<ul class = "nav navbar-nav navbar-right">
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
</div>
</nav>
</header>
did you include the cdn and css links in your index.html and css?
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>
When I use ngRouter, navbar is not collapsing after selecting a link in small devices
angilarjs:
var app = angular.module('MyTemplate',['ngRoute','ui.bootstrap']);
app.controller("templateCtrl",function($scope){
$scope.navbarCollapsed = true;
});
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/Page1', {
templateUrl: 'Page1.html',
controller: 'Page1Ctrl'
})
.when('/Page2', {
templateUrl: 'Page2.html',
controller: 'Page2Ctrl'
})
.otherwise({
redirectTo: '/Page1'
});
}]);
HTML:
<div class="navbar-header">
<button type="button" class="navbar-toggle" ng-click="navbarCollapsed = !navbarCollapsed">
<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="">Navigation bar</a>
</div>
<!-- nav links for toggling -->
<div class="collapse navbar-collapse" collapse="navbarCollapsed">
<ul class="nav navbar-nav nav_width">
<li>Page1</li>
<li>Page2</li>
</ul>
</div>
Please help to fix this issue. Thank you...
Change the code like this:
var app = angular.module('MyTemplate',['ngRoute','ui.bootstrap']);
app.controller("templateCtrl",function($scope){
$scope.navbarCollapsed = true;
$scope.collapseNavbar = function () {
$scope.navbarCollapsed = true;
};
});
And the html
<div class="collapse navbar-collapse" collapse="navbarCollapsed">
<ul class="nav navbar-nav nav_width">
<li>Page1</li>
<li>Page2</li>
</ul>
</div>
It's adding a function to the scope to force the collapse property to true
I would like to know why my website navbar in mobile won't close and open like I want. When the user clicks on those 3 bars, it should close and open in mobile view, but it just won't work. Here is the code for the navbar:
Here is my website. Just resize it, and you will see that it just stays there and won't close like I want it to.
Here is the website:
http://edgaraxe.net/
<div class = "navbar navbar-default navbar-static-top" >
<div class = "container">
<!--Navigation -->
<div class="navbar-header">
<a class="navbar-brand">Edgar Axelsson</a>
<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>
</div>
<div>
<div class "collapse navbar-collapse navHeaderCollapse">
<ul class = "nav navbar-nav navbar-right">
Try using id on your data-target. Try
<button class="navbar-toggle" data-toggle="collapse" data-target="#testnavbar" aria-expanded="true">
on your button and
<div class="collapse in" "collapse="" navbar-collapse="" navheadercollapse"="" id="testnavbar" aria-expanded="true">
on your div.
Also, note that your div does not have an = on your class - that seems to be a typo, so the div line should look like:
<div class="collapse navbar-collapse navHeaderCollapse" id="testnavbar">