I'm using bootstrap for my navbar to have a list of links collapse and grow when clicking on the icon, but I can't seem to get it to work. I think I have all of the ids matching but something must be a miss.
<nav class="navbar navbar-expand-lg bg-dark navbar-dark d-flex" style="background-color:#7E0B2A !important;">
<!-- Logo -->
<a>
<img src="images/scc1logo3.jpg" class="d-none d-lg-block" style="max-height:80px; max-width:80px;">
</a>
<div class="d-lg-none d-block" style="color:white; font-size: 1.3rem;">
Company Name
</div>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse align-items-left justify-content-between" id="collapsibleNavbar">
<ul class="navbar-nav text-left d-flex justify-content-center">
<li class="nav-item pl-lg-1">
<a class="nav-link" style="color:white;" href="index.html">Home</a>
</li>
<li class="nav-item pl-lg-1">
<a class="nav-link" style="color:white;" href="about.html">About SCC</a>
</li>
<li class="nav-item pl-lg-1">
<a class="nav-link" style="color:white;" href="Project.html">Projects</a>
</li>
<li class="nav-item pl-lg-1">
<a class="nav-link" style="color:white;" href="Collaborators.html">Collaborators</a>
</li>
<li class="nav-item pl-lg-1">
<a class="nav-link" style="color:white;">Calender</a>
</li>
<li class="nav-item pl-lg-1">
<a class="nav-link" style="color:white;">Contact Us</a>
</li>
<li class="nav-item pl-lg-1 d-block d-lg-none">
<a class="nav-link" style="color:white;">Donate</a>
</li>
</ul>
<div class="d-lg-block d-none">
<a class="nav-link" style="color:white;">Donate</a>
</div>
</div>
</nav>
I am not sure what is the problem? Are you including bootstrap libraries?
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg bg-dark navbar-dark d-flex" style="background-color:#7E0B2A !important;">
<!-- Logo -->
<a>
<img src="images/scc1logo3.jpg" class="d-none d-lg-block" style="max-height:80px; max-width:80px;">
</a>
<div class="d-lg-none d-block" style="color:white; font-size: 1.3rem;">
Company Name
</div>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse align-items-left justify-content-between" id="collapsibleNavbar">
<ul class="navbar-nav text-left d-flex justify-content-center">
<li class="nav-item pl-lg-1">
<a class="nav-link" style="color:white;" href="index.html">Home</a>
</li>
<li class="nav-item pl-lg-1">
<a class="nav-link" style="color:white;" href="about.html">About SCC</a>
</li>
<li class="nav-item pl-lg-1">
<a class="nav-link" style="color:white;" href="Project.html">Projects</a>
</li>
<li class="nav-item pl-lg-1">
<a class="nav-link" style="color:white;" href="Collaborators.html">Collaborators</a>
</li>
<li class="nav-item pl-lg-1">
<a class="nav-link" style="color:white;">Calender</a>
</li>
<li class="nav-item pl-lg-1">
<a class="nav-link" style="color:white;">Contact Us</a>
</li>
<li class="nav-item pl-lg-1 d-block d-lg-none">
<a class="nav-link" style="color:white;">Donate</a>
</li>
</ul>
<div class="d-lg-block d-none">
<a class="nav-link" style="color:white;">Donate</a>
</div>
</div>
</nav>
</body>
Related
I'm having a little trouble with my navbar, using bootstrap 5. The navbar doesn't collapse after expanding and the dropdown list doesn't drop.
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Body -->
<nav class="navbar navbar-expand-md bg-light sticky-top">
<div class="container-fluid ">
<a class="navbar-brand" href="#"><img class="" width="100px" src="icons/cake/Asset 4.png"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
<span class="fa fa-navicon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" href="#">SERVICES</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Delivery</a></li>
<li>
<a class="dropdown-item" href="#">Event Planning</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><button class="btn btn-danger">ORDER ONLINE</button></a>
</li>
</ul>
</div>
</div>
</nav>
Many of Bootstrap's components require the use of JavaScript to function. Including navbars and dropdowns. I added the relevant source for both font-awesome and the Bootstrap JS.
Read more here on Bootstrap 5 Introduction.
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<nav class="navbar navbar-expand-md bg-light sticky-top">
<div class="container-fluid ">
<a class="navbar-brand" href="#"><img class="" width="100px" src="icons/cake/Asset 4.png"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
<span class="fa fa-navicon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" href="#">SERVICES</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Delivery</a></li>
<li>
<a class="dropdown-item" href="#">Event Planning</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><button class="btn btn-danger">ORDER ONLINE</button></a>
</li>
</ul>
</div>
</div>
</nav>
When I wanted to add a navbar in the parent class .container-fluid. the navbar is taking a default left right margin as you can see the image here Please see the image
here is my code-
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<nav id="navbar_top" class="navbar navbar-expand-md bg-dark navbar-dark">
<!-- <a class="navbar-brand" href="#">Navbar</a> -->
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Product</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Campaign</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
Bootstrap 5 the .no-gutters class has been replaced with .g-0. Use it
on the .row where you want no spacing between columns.
https://stackoverflow.com/a/21256143/244811
.g-0 has been added to the .col-lg-12 div, which appears to have had the gutters:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="g-0 col-lg-12">
<nav id="navbar_top" class="navbar navbar-expand-md bg-dark navbar-dark">
<!-- <a class="navbar-brand" href="#">Navbar</a> -->
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Product</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Campaign</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
I want the navbar to be in the center of the page. How can I give styling to get it in the center. Currently it's starting from the left side of the page.
section class="navbarSection">
<div class="container-fluid">
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="navBar2">
<nav class="navbar navbar-expand-lg bg-white paddingo">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item ">
<a class="nav-link firstLink" href="#">WHO WE ARE <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item ">
<a class="nav-link " href="#">OUR SERVICES</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">OUR PROJECTS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT US</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CAREERS</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
</section>
Just remove ml-auto from navbar-nav:
<ul class="navbar-nav ml-auto">
<li class="nav-item ">
<a class="nav-link firstLink" href="#">WHO WE ARE <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item ">
<a class="nav-link " href="#">OUR SERVICES</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">OUR PROJECTS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT US</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CAREERS</a>
</li>
</ul>
And make it m-auto, this way the auto margin is applied to both left and right sides.
Centered bootstrap nav codepen
Just add
<div class="d-flex col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 bg-primary justify-content-center">
So in this way you declare a flex box with justify-content-center and they should get in the right place:
.navBar2{
display:flex;
justify-content:center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<section class="navbarSection">
<div class="container-fluid">
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="navBar2">
<nav class="navbar navbar-expand-lg bg-white paddingo">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item ">
<a class="nav-link firstLink" href="#">WHO WE ARE <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item ">
<a class="nav-link " href="#">OUR SERVICES</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">OUR PROJECTS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT US</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CAREERS</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
This is for my mobile sized site. When I click the hamburger menu, the Navbar does not appear. My data-target matches the nav id so I'm not sure why it isn't working.
<section id="nav">
<nav class="navbar navbar-light navbar-expand-md py-2">
<a href="index.html">
<img src="./img/logo.png" class="img-fluid mw-121 height: auto" alt="Logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarLinks"><span
class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarLinks">
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="flavors.html">Flavors</a>
</li>
<li class="nav-item">
<a class="nav-link" href="details.html">What's Included</a>
</li>
<li class="nav-item">
<a class="nav-link" href="reserve.html">Reserve Today</a>
</li>
<li class="nav-item">
<a class="nav-link" href="faq.html">FAQ</a>
</li>
</ul>
</div>
</nav>
</section>
I've used your code to replicate the problem but it's working fine. Check my code below you might be missing one of the dependencies.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<section id="nav">
<nav class="navbar navbar-light navbar-expand-md py-2">
<a href="index.html">
<p>Test Image here</p>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarLinks"><span
class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarLinks">
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="flavors.html">Flavors</a>
</li>
<li class="nav-item">
<a class="nav-link" href="details.html">What's Included</a>
</li>
<li class="nav-item">
<a class="nav-link" href="reserve.html">Reserve Today</a>
</li>
<li class="nav-item">
<a class="nav-link" href="faq.html">FAQ</a>
</li>
</ul>
</div>
</nav>
</section>
</body>
</html>
I am currently having trouble creating 2 rows and getting align logo(heading) to the left, 'Home' and 'User' menu links to the top right corner. The second row should display 'Link1', 'Link2', 'Link3' menu in the center. The following code doesn't seem to align properly.
I have tried to use 'navbar-nav mr-auto' for logo but it didn't work. Also tried 'Home', 'About' links 'ml-auto'. It doesn't work.
*******************************************************************************************
Home About User
Logo Heading1
Link1 Link2 Link3 Link4
*******************************************************************************************
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container">
<a class="navbar-brand mr-auto" href="">
<img style="width: 72px; height: 71px;" src="logo-1.png">Heading
</a>
<div class="d-flex flex-column flex-wrap" id="navbarCollapse">
<ul class="navbar-nav mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="ace.aspx">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="About.aspx" >About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="User.aspx" >User</a>
</li>
</ul>
<div id="divSubMenu" runat="server" >
<ul class="navbar-nav mx-auto mt-auto">
<li class="nav-item active" id="liDashboard" runat="server">
<a class="nav-link" href="Dashboard.aspx">Link1</a>
</li>
<li class="nav-item" id="liaint" runat="server">
<a class="nav-link" href="ation.aspx">Link2</a>
</li>
<li class="nav-item" id="liign" runat="server">
<a class="nav-link">Link3</a>
</li>
<li class="nav-item" id="lise" runat="server">
<a class="nav-link" href="Search.aspx">Link4</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
Try this code. hope will help You.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-between align-items-center w-100" id="navbarNavDropdown">
<ul class="navbar-nav mx-auto text-md-center mt-5">
<li class="nav-item active" id="liDashboard" runat="server">
<a class="nav-link" href="Dashboard.aspx">Link1</a>
</li>
<li class="nav-item" id="liaint" runat="server">
<a class="nav-link" href="ation.aspx">Link2</a>
</li>
<li class="nav-item" id="liign" runat="server">
<a class="nav-link">Link3</a>
</li>
<li class="nav-item" id="lise" runat="server">
<a class="nav-link" href="Search.aspx">Link4</a>
</li>
</ul>
<div class="nav-item flex-row justify-content-md-center justify-content-start flex-nowrap">
<ul class="navbar-nav mb-5">
<li class="nav-item">
<a class="nav-link" href="ace.aspx">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="About.aspx" >About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="User.aspx" >User</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
Hope below code will help you
<div class="container">
<div class="row">
<div class="col-12">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#">Logo Heading1</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav mx-auto">
<li class="nav-item active" id="liDashboard" runat="server">
<a class="nav-link" href="Dashboard.aspx">Link1</a>
</li>
<li class="nav-item" id="liaint" runat="server">
<a class="nav-link" href="ation.aspx">Link2</a>
</li>
<li class="nav-item" id="liign" runat="server">
<a class="nav-link">Link3</a>
</li>
<li class="nav-item" id="lise" runat="server">
<a class="nav-link" href="Search.aspx">Link4</a>
</li>
</ul>
<div class="nav-item">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="ace.aspx">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="About.aspx" >About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="User.aspx" >User</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
If u want out put like you have provided text above logo above middle on below
<div class="container">
<div class="row">
<div class="col-12">
<nav class="navbar navbar-expand-lg navbar-light align-items-start">
<a class="navbar-brand" href="#">Logo Heading1</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav mx-auto mt-5">
<li class="nav-item active" id="liDashboard" runat="server">
<a class="nav-link" href="Dashboard.aspx">Link1</a>
</li>
<li class="nav-item" id="liaint" runat="server">
<a class="nav-link" href="ation.aspx">Link2</a>
</li>
<li class="nav-item" id="liign" runat="server">
<a class="nav-link">Link3</a>
</li>
<li class="nav-item" id="lise" runat="server">
<a class="nav-link" href="Search.aspx">Link4</a>
</li>
</ul>
<div class="nav-item">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="ace.aspx">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="About.aspx" >About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="User.aspx" >User</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
You can try stacking multiple navbars in bootstrap 4 as shown below. Please see if this answer is acceptable for you requirements. Hope this helps!
EDIT: Updated my code to only have two rows as requested in the question. Good luck champ..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Stack Answer</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark py-0">
<div class="container">
<div class="collapse navbar-collapse" id="navbarResponsive1">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">User</a>
</li>
</ul>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark pt-0">
<div class="container">
<ul class="navbar-nav">
<li class="nav-item">
<a class="navbar-brand" href="#">
<img style="width: 72px; height: 71px;" src="http://placehold.it/72x71?text=Logo">
Stack Answer
</a>
</li>
</ul>
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link" href="#">Link1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link4</a>
</li>
</ul>
</div>
</nav>
<!-- Page Content -->
<!-- Bootstrap core JavaScript -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
</body>
</html>