I have a line of menu tabs below which there is a line of breadcrumbs. When the screen collapses the line of menu tabs is replaced by the hamburger icon on the right, which is correct. However, in bootstrap 4.0.0 alpha 6 the hamburger icon dropped down onto the line of breadcrumbs but in version 4.1.3 it stays on its own line. Is there any way in 4.1.3 that I can force the previous behaviour? Displaying 2 lines instead of 1 is a waste of space, and on a small screen this is annoying. Here is a code snippet:
<!DOCTYPE html>
<html xml:lang="en" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Put hamburger icon onto breadcrumb line</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<h1>Put hamburger icon onto breadcrumb line</h1>
<nav class="navbar navbar-expand-md navbar-light">
<span class="navbar-brand"></span>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarMenu" aria-controls="navbarMenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarMenu">
<ul class="navbar-nav nav-tabs mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Tab #1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tab #2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tab #3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tab #4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tab #5</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tab #6</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tab #7</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tab #8</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tab #9</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tab #10</a>
</li>
</ul>
</div>
</nav>
<nav class="breadcrumb">
<a class="breadcrumb-item" href="#">Crumb #1</a>
<span class="breadcrumb-item active">Crumb #2</span>
<span class="breadcrumb-item active">Crumb #3</span>
</nav>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"> </script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"> </script>
</body>
</html>
Does this suit your needs?
#media (max-width: 767px) {
.navbar .navbar-toggler {
position: absolute;
right: 5px;
bottom: -44px;
}
.breadcrumb {
padding-right: 66px !important;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="container-fluid">
<h1>Put hamburger icon onto breadcrumb line</h1>
<nav class="navbar navbar-expand-md navbar-light">
<span class="navbar-brand"></span>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMenu" aria-controls="navbarMenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarMenu">
<ul class="navbar-nav nav-tabs mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Tab #1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tab #2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tab #3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tab #4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tab #5</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tab #6</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tab #7</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tab #8</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tab #9</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tab #10</a>
</li>
</ul>
</div>
</nav>
<nav class="breadcrumb">
<a class="breadcrumb-item" href="#">Crumb #1</a>
<span class="breadcrumb-item active">Crumb #2</span>
<span class="breadcrumb-item active">Crumb #3</span>
</nav>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js">
</script>
Related
My Navigation bar disappears when the web page is shrinks, even clicking on the toggler when the page shrinks doesn't display the links at all. I am using bootstrap 4.0 and linking to cdn links
for both the css and other JavaScript needed and it keeps disappearing.
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="navbar">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse ml-2 top-bar" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home </a>
</li>
<li class="nav-item collections">
<a class="nav-link collections" href="#">Services</a>
<ul class="dropdown-menu dropdown-firstmenu">
<li class="dropdown-submenu">
<a tabindex="-1" href="#">2014 <span class="dropdown-caret"><i class="fa fa-caret-right"></i></span></a>
</li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">2014 <span class="dropdown-caret"><i class="fa fa-caret-right"></i></span></a>
</li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">2014 <span class="dropdown-caret"><i class="fa fa-caret-right"></i></span></a>
</li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">2014 <span class="dropdown-caret"><i class="fa fa-caret-right"></i></span></a>
</li>
</ul>
</li>
<li class="nav-item collections">
<a class="nav-link collections" href="#">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Support</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Downloads</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
<!-- drop down -->
<li class="nav-item collections">
<a class="nav-link collections" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<!-- end drop down -->
</ul>
<ul class="navbar-nav ">
<li class="nav-item">
<a class="nav-link" href="#">My Account</a>
</li>
</ul>
I was able to fix this by downloading the bootstrap 4.0 css and changing the navbar display from display:none to display:block
I have a problem creating the bootstrap collapse menu.
<div className='collapse' id='mobile-menu'>
<button
clasNames='navbar-toggler'
type='button'
data-toggle='collapse'
data-target='#navbarToggleExternalContent'
aria-controls='navbarToggleExternalContent'
aria-expanded='false'
aria-label='Toggle navigation'
>
<span className='navbar-toggler-icon'></span>
</button>
<div className={clsx('col-auto order-sm-1', styles.menu)} id='mobile-menu'>
<ul>
<li>
<a href='#' className={styles.active}>
Home
</a>
</li>
<li>
<a href='#'>Furniture</a>
</li>
<li>
<a href='#'>Chair</a>
</li>
<li>
<a href='#'>Table</a>
</li>
<li>
<a href='#'>Sofa</a>
</li>
<li>
<a href='#'>Bedroom</a>
</li>
<li>
<a href='#'>Blog</a>
</li>
</ul>
</div>
</div>
It should be hidden only for xs size. In button and user should be possible to open in and see all menu bar. I used bootstrap documents and I don't know how to do it correctly
You need to review the navbar docs for version 5 as the data attribute names have changed from data-* to data-bs-*. You are also targeting the wrong element data-target='#navbarToggleExternalContent' that should be data-bs-target="#mobile-menu". Also you have duplicate id='mobile-menu' elements (invalid HTML).
You want something more like the following:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<nav class="navbar navbar-expand-sm bg-light" id="mobile-menu-wrapper">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mobile-menu" aria-controls="mobile-menu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mobile-menu">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Furniture</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Chair</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Table</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sofa</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Bedroom</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
So, I'm trying to rebuild my website from scratch. And I want to add a scrollspy to the top of my navbar.
I've already tried to add the data-spy="scroll" data-target=".navbar" data-offset="100"to my body tag, and define it in jQuery by using jQuery('body').scrollspy();.
But it's just not working. I looked into DevTools on Chrome, but I can't find any issues in it.
My Navbar
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top" id="navbar">
<a class="navbar-brand" href="/"><img height="45px" src="https://dellusion.app/assets/img/logo/textlogo.png" alt="Dellusion Records"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor" aria-controls="navbarColor" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="/#top" data-easing="easeOutQuint">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/#latest" data-easing="easeOutQuint">Releases</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/#news" data-easing="easeOutQuint">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/#artists" data-easing="easeOutQuint">Artists</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/#contact" data-easing="easeOutQuint">Contact</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="https://open.spotify.com/user/dellusion_records"><i class="fab fa-lg fa-spotify"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://twitter.com/DellusionRec"><i class="fab fa-lg fa-twitter"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.facebook.com/DellusionRecords"><i class="fab fa-lg fa-facebook-f"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.youtube.com/DellusionRecordsOfficial"><i class="fab fa-lg fa-youtube"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.soundcloud.com/dellusion-records"><i class="fab fa-lg fa-soundcloud"></i></a>
</li>
</ul>
</div>
</nav>
My question is how to get this scrollspy working? Because it's a pain in the head for this to be working.
A full example can be found here
I mentioned the places I added in the comment lines.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>STACKOVERFLOW</title>
</head>
<body data-spy="scroll" data-target="#navbar" data-offset="0">
<!-- Added Here -->
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top" id="navbar">
<a class="navbar-brand" href="/"><img height="45px" src="https://dellusion.app/assets/img/logo/textlogo.png" alt="Dellusion Records"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor" aria-controls="navbarColor" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link active" href="#top" data-easing="easeOutQuint">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#latest" data-easing="easeOutQuint">Releases</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#news" data-easing="easeOutQuint">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#artists" data-easing="easeOutQuint">Artists</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact" data-easing="easeOutQuint">Contact</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="https://open.spotify.com/user/dellusion_records"><i
class="fab fa-lg fa-spotify"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://twitter.com/DellusionRec"><i class="fab fa-lg fa-twitter"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.facebook.com/DellusionRecords"><i
class="fab fa-lg fa-facebook-f"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.youtube.com/DellusionRecordsOfficial"><i
class="fab fa-lg fa-youtube"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.soundcloud.com/dellusion-records"><i
class="fab fa-lg fa-soundcloud"></i></a>
</li>
</ul>
</div>
</nav>
<!-- Created Them for Example -->
<div id="top" style="height: 700px; margin-top: 71px;" class="bg-warning">Home</div>
<div id="latest" style="height: 700px;" class="bg-danger">Releases</div>
<div id="news" style="height: 700px;" class="bg-primary">News</div>
<div id="artists" style="height: 700px;" class="bg-info">Artists</div>
<div id="contact" style="height: 700px;" class="bg-dark text-white">Contact</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<!-- JAVASCRIPT -->
<script>
</script>
</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>