I am having trouble right aligning elements in my navbar with bootstrap. For some reason, the elements seemed fixed and even using an external css file did not help. The look im aiming for is keeping the logo and name or "brand" on the left, with the rest of the 'items' right-aligned. For some reason, the 'ml-auto' class of bootstrap is not working either.
HTML:
.navbar-nav {
margin-left: auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<div class="navbar" width="100%">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img
src="/com_connect_font.png"
class="me-2"
height="70"
alt=""
loading="lazy"
/>
<medium>Community Connector</medium>
</a>
<button
class="navbar-toggler"
type="button"
data-mdb-toggle="collapse"
data-mdb-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<i class="fas fa-bars"></i>
</button>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">
About
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Contacts
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Settings
</a>
</li>
</ul>
</div>
</nav>
</div>
</body>
</html>
Could someone share what might be the issue? Any help is appreciated.
Small example. Only bootstrap classes without any additional CSS. In your example, the first div destroys the nav because it's not 100% wide. Btw here's another example. In your navbar the whole mobile view is broken. The example below is completely working with desktop and mobile devices.
Hopefully it will work :)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="d-flex flex-grow-1">
<span class="w-100 d-lg-none d-block"><!-- hidden spacer to center brand on mobile --></span>
<a class="navbar-brand" href="#">
Navbar 7
</a>
<div class="w-100 text-right">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar7">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
<div class="collapse navbar-collapse flex-grow-1 text-right" id="myNavbar7">
<ul class="navbar-nav ml-auto flex-nowrap">
<li class="nav-item">
Link
</li>
<li class="nav-item">
Link
</li>
<li class="nav-item">
Link
</li>
<li class="nav-item">
Link
</li>
</ul>
</div>
</nav>
</body>
</html>
Related
I am learning bootstrap and trying to make a navbar but the navbar toggler hamburger icon doesn't show up. A portion of the code I currently have is below. Thank you.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Website</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div class="container-fluid">
<div class="navbar navbar-expand-md">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" data-toggle="collapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Skills</a>
</li>
The bootstrap .navbar-toggler-icon styling will depend on what theme your navbar would be. For example try using navbar-light on your navbar this will produce the hamburger with rgba(255, 255, 255, 0.5) stroke.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Website</title>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
</head>
<header>
<div class="container-fluid">
<div class="navbar navbar-light navbar-expand-md">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#uniqueIdentifier">
<span class="navbar-toggler-icon"></span>
</button>
<div id="uniqueIdentifier" class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Skills</a>
</li>
</ul>
</div>
</div>
</div>
</header>
I was using div container in bootstrap and there always seems to be a margin around the container. How do I decrease the margin slightly? mx-15 to mx-6 doesn't do anything, it still keeps the container in the center, but as soon as I do mx-5, then everything goes to the left and there's a huge margin on the right. how do I tackle this problem?
the versions of bootstrap and jquery that I'm used can be also seen in the bottom code block
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<header class="header">
<nav class="navbar navbar-expand-lg fixed-top">
<div class="container mx-5 text-center">
<a href="#" class="navbar-brand font-weight-bold"
style="font-family: Playfair Display Bold;">example</a>
<button type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"
class="navbar-toggler navbar-toggler-right">
<i class="fa fa-bars"></i>
</button>
<div id="navbarSupportedContent" class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a href="#" class="nav-link text-uppercase font-weight-bold">Home <span
class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
About
</li>
<li class="nav-item">
Gallery
</li>
</ul>
</div>
</div>
</nav>
</header>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
</script>
Image of the problem
trying to work out navbars right now, but my code doesn't seem to work with them.
The collapse icon is staying next to the navbar-brand and then the navbar-links are sitting next to it.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,700" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="app.css">
<title>Website</title>
</head>
<body>
<nav id="mainNavbar "class="navbar navbar-dark bg-dark navbar-expand-md">
<a class="navbar-brand" href="#">TEST</a>
<button class="navbar-toggle" data-toggle="collapse" data-target="#nav-links">
<span class="navbar-toggler-icon" id="navbar-icon"></span>
</button>
<div class="collapse navbar-collapse" id="nav-links">
<ul class="navbar-nav">
<li class="nav-item">
HOME
</li>
<li class="nav-item">
ABOUT
</li>
<li class="nav-item">
TICKETS
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
you have to add navbar-toggler class instead of navbar-toggle to the button see the code:
<nav id="mainNavbar "class="navbar navbar-dark bg-dark navbar-expand-md">
<a class="navbar-brand" href="#">TEST</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#nav-links">
<span class="navbar-toggler-icon" id="navbar-icon"></span>
</button>
<div class="collapse navbar-collapse" id="nav-links">
<ul class="navbar-nav">
<li class="nav-item">
HOME
</li>
<li class="nav-item">
ABOUT
</li>
<li class="nav-item">
TICKETS
</li>
</ul>
</div>
</nav>
Problem is with your button change your class navbar-toggle to navbar-toggler
<button class="navbar-toggler" data-toggle="collapse" data-target="#nav-links">
<span class="navbar-toggler-icon" id="navbar-icon"></span>
</button>
As seen here, the Navbar overlaps the text in the body. How can I fix this? This is what it looks like on desktop.
Here is my code for the Navbar:
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<!-- Logo -->
<a class="navbar-brand" href="index.html">
<img src="black_hole.jpg" alt="logo" style="width: 40px;height: 40px;">
</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="portfolio.html">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="beermoney.html">BeerMoney Routine</a>
</li>
<li class="nav-item">
<a class="nav-link" href="mailto:(my_email_here)#gmail.com">Contact Me</a>
</li>
</ul>
</nav>
Then the rest of the code is the body text.
Any help is appreciated. I'm going on vacation, so I will try to respond to your comments the best I can, but no guarantees.
(All Code here)
You can remove the .fixed-top class from <nav> element to show the content all the time. So you can also remove the margin-top: 90px; (or adjust the value) to remove / adjust the gap between navigation and content.
<!DOCTYPE html>
<html lang="en">
<title>Home</title>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="MainClass.css">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<!-- navigation -->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<a class="navbar-brand" href="index.html">
<img src="black_hole.jpg" alt="logo" style="width: 40px;height: 40px;">
</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">
<li class="nav-item">
<a class="nav-link" href="portfolio.html">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="beermoney.html">BeerMoney Routine</a>
</li>
<li class="nav-item">
<a class="nav-link" href="mailto:nickbthesaint#gmail.com">Contact Me</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<div class="col-md-12" style="margin-bottom: 30px;">
<h3>Who Am I?</h3>
<p>My name is theITguy, and I am a video editor, student, and an active member of the 3D Printing community.</p>
</div>
</div>
</body>
</html>
In case you want to use the fixed navigation, you have to add support for the responsive navgation so you can toggle on mobile.
<!DOCTYPE html>
<html lang="en">
<title>Home</title>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="MainClass.css">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<!-- navigation -->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="index.html">
<img src="black_hole.jpg" alt="logo" style="width: 40px;height: 40px;">
</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">
<li class="nav-item">
<a class="nav-link" href="portfolio.html">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="beermoney.html">BeerMoney Routine</a>
</li>
<li class="nav-item">
<a class="nav-link" href="mailto:nickbthesaint#gmail.com">Contact Me</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid" style="margin-top: 90px;">
<div class="col-md-12" style="margin-bottom: 30px;">
<h3>Who Am I?</h3>
<p>My name is theITguy, and I am a video editor, student, and an active member of the 3D Printing community.</p>
</div>
</div>
</body>
</html>
I am trying to use a nav bar with links and a collapsible menu for small screens. However, I am having two issues:
On normal size screens, the links do not show up
On mobile, when clicking the menu open button, the menu opens but collapses immediately.
Here is a link to my code on jsfiddle. Thanks
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta viewport="viewport" content="width=device-width, initial-scale=1.0 ">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Page name</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="navbar navbar-default navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="#">Page Name</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#thetarget">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="thetarget">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="page1.html">txt</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" target="_blank">txt1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" target="_blank">txt2</a>
</li>
</ul>
</div>
</nav>
<!-- Bootstrap core JavaScript -->
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
I recreated the navbar bootstrap here using the w3school page. I changed the script tags in the head tag and code a bit. Hope this helps.
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#thetarget">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Page Name</a>
</div>
<div class="collapse navbar-collapse" id="thetarget">
<ul class="nav navbar-nav">
<li> <a class="nav-link" href="page1.html">txt</a> </li>
<li><a class="nav-link" href="#" target="_blank">txt1</a></li>
<li><a class="nav-link" href="#" target="_blank">txt2</a></li>
</ul>
</div>
</div>
</nav>