I am creating an app in Bootstrap 3 with a tab bar. I am dynamically adding and removing tabs. This all works great, what I would like to do though is to have the tab bar be horizontally scrollable through the tabs if there are too many tabs to fit in the width of the app instead of creating multiple rows or tabs.
Has anyone done this or have an idea how to implement this?
Here is an example:
(Not working in snippet for some reason, so here is a link to Bootply : http://www.bootply.com/oROUAMwsG1)
.nav-tabs {
overflow-x: auto;
overflow-y: hidden;
display: -webkit-box;
display: -moz-box;
}
.nav-tabs>li {
float: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="col-md-4">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">Section 1
</li>
<li>Section 2
</li>
<li>Section 3
</li>
<li>Section 4
</li>
<li>Section 5
</li>
<li>Section 6
</li>
<li>Section 7
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>I'm in Section 2.</p>
</div>
</div>
</div>
</div>
</div>
i solved this using:
.nav.nav-tabs {
overflow-x: auto;
overflow-y: hidden;
flex-wrap: nowrap;
}
example: https://codepen.io/r3l4x/pen/mdpdMLQ
note sure about cross browser stuff, so may not be a good answer.
Bootstrap 5 tab horizontal scroll for many items with pure javascript
<!DOCTYPE html>
<html lang="en" class="no-js">
<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, shrink-to-fit=no">
<title>Bootstrap 5 tab horizontal scroll for many item</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<style>
.tab-scroller{
position: relative;
max-width: 100%;
overflow: hidden;
}
.tab-scroller-arrow{
position: absolute;
top: 0;
bottom: 0;
width: 25px;
cursor: pointer;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
background-color: #ffffff;
border: 1px solid #222222;
}
.tab-scroller .right-arrow{
right: 0;
}
.tab-scroller .left-arrow{
left: 0;
}
.tab-scroller .left-arrow.d-none~.nav{
padding-left: 0;
}
.tab-scroller .nav{
position: relative;
padding-left: 35px;
flex-wrap: nowrap;
}
</style>
</head>
<div class="tab-scroller" >
<i class="tab-scroller-arrow left-arrow d-none">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-left" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
</svg>
</i>
<i class="tab-scroller-arrow right-arrow d-none">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
</svg>
</i>
<ul class="nav nav-pills" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#pills-disabled" type="button" role="tab" aria-controls="pills-disabled" aria-selected="false" disabled>Disabled</button>
</li>
</ul>
</div>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">Tab 1</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">Tab 2</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">Tab 3</div>
<div class="tab-pane fade" id="pills-disabled" role="tabpanel" aria-labelledby="pills-disabled-tab" tabindex="0">Tab 4</div>
</div>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<!-- Custom js -->
<script>
document.addEventListener("DOMContentLoaded", function(){
// selector
document.querySelectorAll(".tab-scroller").forEach((el) => {
let scrollTabInner = el.querySelector(".nav")
let scrollTabItem = el.querySelectorAll(".nav-item")
let leftArrow = el.querySelector(".left-arrow")
let rightArrow = el.querySelector(".right-arrow")
//scrollable tab width
let scrollTabWidth = el.offsetWidth
//all tab items width
let scrollTabItemsWidth = () => {
let itemsWidth = 0;
scrollTabItem.forEach(el => {
let itemWidth = el.offsetWidth;
itemsWidth += itemWidth;
});
return itemsWidth
}
//hidden tab item width
let widthOfHiddenItems = scrollTabItemsWidth() - scrollTabWidth;
let rightValue = 0;
if (scrollTabItemsWidth() > scrollTabWidth) {
rightArrow.classList.remove("d-none")
}
//right arrow click functionality
rightArrow.addEventListener("click", () => {
if (rightValue > widthOfHiddenItems) {
rightArrow.classList.add("d-none")
leftArrow.classList.remove("d-none")
scrollTabInner.style.cssText = `right: ${widthOfHiddenItems + 35}px;`
} else {
rightArrow.classList.remove("d-none")
leftArrow.classList.remove("d-none")
rightValue += 200;
scrollTabInner.style.cssText = `right: ${rightValue}px;`
}
})
//left arrow click functionality
leftArrow.addEventListener("click", () => {
rightValue -= 200;
scrollTabInner.style.cssText = `right: ${rightValue}px;`
rightArrow.classList.remove("d-none")
if (rightValue <= 0) {
leftArrow.classList.add("d-none")
rightArrow.classList.remove("d-none")
scrollTabInner.style.cssText = `right: 0px;`
}
})
})
})
</script>
</body>
</html>
I created a horizontal scroll-able tab bar using Navs.
You can check the working demo of the below code here.
CSS
.nav {
overflow-x: auto;
overflow-y: hidden;
height: 115px;
}
.nav-item {
cursor: pointer;
margin: 15px 10px;
width: 200px;
height: 70px;
box-shadow: 0 4px 6px -6px #222;
}
.nav-link {
font-size: 14px;
text-align: center;
}
.nav-item.selected {
color: #fff;
background-color: #007bff;
}
HTML
<div class="card">
<div class="card-body">
<ul class="nav flex-column nav-pills">
<li class="nav-item selected">
<span class="nav-link">HTML </span>
</li>
<li class="nav-item">
<span class="nav-link">CSS</span>
</li>
<li class="nav-item">
<span class="nav-link">JS</span>
</li>
<li class="nav-item">
<span class="nav-link">React</span>
</li>
<li class="nav-item">
<span class="nav-link">Angular</span>
</li>
<li class="nav-item">
<span class="nav-link">Vue</span>
</li>
<li class="nav-item">
<span class="nav-link">Bootstrap</span>
</li>
<li class="nav-item">
<span class="nav-link">Tailwind</span>
</li>
<li class="nav-item">
<span class="nav-link">Codepen</span>
</li>
</ul>
</div>
</div>
.nav-tabs {
overflow-x: auto;
overflow-y: hidden;
display: -webkit-box;
display: -moz-box;
}
.nav-tabs>li {
float: none;
}
<!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">
<link rel="stylesheet" href="teste.css">
<title>Document</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="col-md-4">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
<li>Section 4</li>
<li>Section 5</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>I'm in Section 2.</p>
</div>
<div class="tab-pane" id="tab3">
<p>I'm in Section 3.</p>
</div>
<div class="tab-pane" id="tab4">
<p>I'm in Section 4.</p>
</div>
<div class="tab-pane" id="tab5">
<p>I'm in Section 5.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Related
I have tried making responsive navbar using Bootstrap 5, but my navbar-brand gives me problems. Letters overflow over other elements and my toggle-icon goes to new row and it should be in right corner in the same row as navbar header.
Here is codepen:
https://codepen.io/namename123/pen/VwQzRPL
.logo-iddeea {
font-family: 'Agency FB', sans-serif;
font-size: 3.5rem;
background-image: linear-gradient(to left,rgb(254, 168,100), rgb(240,104,69));
background-size: 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
}
.logo-image{
height:100px;
width:100px;
}
.portal-open-data{
font-size:1.3rem;
margin-top:-5%;
}
.nav-link {
color: #2c3474;
font-weight:bold;
}
.blue-color-font {
color: lightblue;
}
#media only screen and (max-width: 700px) {
.logo-slika{
width:80px;
height: 80px;
}
.logo-iddeea{
font-size:2.5rem;
}
.portal-otvorenih-podataka{
font-size:0.8rem;
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="http://fonts.cdnfonts.com/css/agency-fb" rel="stylesheet">
<nav class="navbar navbar-expand-sm navbar-dark container-fluid bg-dark offset-0">
<div class="container-fluid">
<a class="navbar-brand " href="#">
<div class="row">
<div class="col-3"> <img src="https://shoutcart.com/uploads/gig/bd6f3a23cd5294a2370b09bc413f3331.png" alt="" class="d-inline-block logo-image"></div>
<div class="col-9">
<div class="row">
<div class="col-md-5 ps-4 ps-md-1 my-md-auto logo-iddeea">
AABBA
</div>
<div class="col-md-7 ps-sm-1 ps-4 blue-color-font my-md-auto portal-open-data ">
SOME COMPANY <div style="margin-top:-3%;"> TEXT</div>
</div>
</div>
</div>
</div>
</a>
<button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbarCollapse" class="collapse navbar-collapse ms-5">
<ul class="nav navbar-nav">
<li class="nav-item ">
<a class="nav-link blue-color-font">Groups</a>
</li>
<li class="nav-item dropdown ">
Passwords
</li>
<li class="nav-item">
<a class="nav-link blue-color-font">Administrators</a>
</li>
<li class="nav-item ">
<a class="nav-link blue-color-font">Users</a>
</li>
<li class="nav-item ">
<a class="nav-link blue-color-font">Documentation</a>
</li>
<li class="nav-item ">
<a class="nav-link blue-color-font">Activity logs</a>
</li>
</ul>
<ul class="nav navbar-nav ms-auto">
<li class="nav-item dropdown card shadow">
Logged Username
<div class="dropdown-menu dropdown-menu-end orange-border">
Reports
Settings
<div class="dropdown-divider blue-color-font"></div>
<a>Logout</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
<div class="container-fluid">
<a><img src="https://shoutcart.com/uploads/gig/bd6f3a23cd5294a2370b09bc413f3331.png" alt="" class="mx-2 img-responsive logo-image"></a>
<a class="navbar-brand logo-iddeea" href="#"><h1>AABBA</h1></a>
<span class="text-info"> SOME COMPANY TEXT</span>
<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" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Groups</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">User</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Administrators</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Documentation</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Activity logs</a>
</li>
</ul>
<form class="d-flex" role="search">
<button class="btn btn-light" type="submit">Search</button>
</form>
</div>
</div>
</nav>
use this code and remove all styles which are not required
This question already has answers here:
How to center content in a Bootstrap column?
(11 answers)
Closed 1 year ago.
using bootstrap (without css if possible) , How can I center text anchor inside an li element?
.nav-lt-tab .nav-item .nav-link {
background-color: transparent;
border-top: 3px solid #e0e0e0;
}
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>
<body>
<ul class="nav nav-lt-tab justify-content-center" id="tab" role="tablist">
<!-- Nav item -->
<li class="nav-item my-2 flex-fill ">
<a class="nav-link active text-dark ml-2 mr-2 " id="description-tab" data-bs-toggle="pill" href="#description" role="tab" aria-controls="description" aria-selected="false">Description</a>
</li>
<li class="nav-item my-2 flex-fill">
<a class="nav-link text-dark ml-2 mr-2" id="review-tab" data-bs-toggle="pill" href="#review" role="tab" aria-controls="review" aria-selected="false"><span class="ml-3">Feedback</span></a>
</li>
<li class="nav-item my-2 flex-fill">
<a class="nav-link text-dark ml-2 mr-2" id="review-tab" data-bs-toggle="pill" href="#review" role="tab" aria-controls="review" aria-selected="false"><span class="ml-3">Feedback</span></a>
</li>
<li class="nav-item my-2 flex-fill">
<a class="nav-link text-dark ml-2 mr-2" id="review-tab" data-bs-toggle="pill" href="#review" role="tab" aria-controls="review" aria-selected="false"><span class="ml-3">Feedback</span></a>
</li>
</ul>
</body
</html>
You can give ul elemnt the text-center class and it will be done .
Update your HTML code with the following code
<ul class="nav nav-lt-tab justify-content-center text-center" id="tab" role="tablist">
<!-- Nav item -->
<li class="nav-item my-2 flex-fill ">
<a class="nav-link active text-dark ml-2 mr-2 " id="description-tab" data-bs-toggle="pill" href="#description" role="tab" aria-controls="description" aria-selected="false">Description</a>
</li>
<li class="nav-item my-2 flex-fill">
<a class="nav-link text-dark ml-2 mr-2" id="review-tab" data-bs-toggle="pill" href="#review" role="tab" aria-controls="review" aria-selected="false"><span class="ml-3">Feedback</span></a>
</li>
<li class="nav-item my-2 flex-fill">
<a class="nav-link text-dark ml-2 mr-2" id="review-tab" data-bs-toggle="pill" href="#review" role="tab" aria-controls="review" aria-selected="false"><span class="ml-3">Feedback</span></a>
</li>
<li class="nav-item my-2 flex-fill">
<a class="nav-link text-dark ml-2 mr-2" id="review-tab" data-bs-toggle="pill" href="#review" role="tab" aria-controls="review" aria-selected="false"><span class="ml-3">Feedback</span></a>
</li>
</ul>
Any suggestions how to get the alignement of the navbar correct?
The logo is not in the middele and the menu is pushed to the right.
Check also: https://torza.nl/rsw2
<div class="row">
<ul class="collapse navbar-collapse navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="mailto:info#rotterdamsteelworks.nl" style="color:#2A5AA4;"><small><i class="fas fa-envelope"></i> Stuur e-mail</small></a>
</li>
<li class="nav-item">
<a class="nav-link" href="tel:00310184632456" style="color:#2A5AA4;"><small><i class="fas fa-phone-volume"></i> +31(0)184-632456</small></a>
</li>
</ul>
<a class="navbar-brand" href="index.php"><img class="img-fluid" src="img/logo.png" width="500" alt="Rotterdam Steel Works"></a>
<ul class="collapse navbar-collapse navbar-nav mr-auto">
<li class="nav-item">
<a class="" href="certificering.php"><img class="img-fluid" src="img/logo_metaalunie.png" width="45" alt="Metaalunie"></a>
</li>
<li class="nav-item">
<a class="" href="certificering.php"><img class="img-fluid" src="img/logo_iso_9001.png" width="45" alt="ISO 9001"></a>
</li>
<li class="nav-item">
<a class="" href="certificering.php"><img class="img-fluid" src="img/logo_ce.png" width="45" alt="CE NEN EN1090"></a>
</li>
<li class="nav-item">
<a class="" href="certificering.php"><img class="img-fluid" src="img/logo_lr.png" width="45" alt="Lloyds overstempelbevoegd"></a>
</li>
</ul>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="row">
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.php" style="color:#E4000B;"><strong>Home</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.php" style="color:#E4000B;"><strong>Over ons</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="markten.php" style="color:#E4000B;"><strong>Markten</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="certificering.php" style="color:#E4000B;"><strong>Certificering</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color:#E4000B;"><strong>Media</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.php" style="color:#E4000B;"><strong>Contact</strong></a>
</li>
</ul>
</div>
</div>
</div>
After the changes suggested by Aleksandr Belugin it looks like (still not centered)
Your HTML STRUCTRURE should be as following
<header class="header-container">
<div class="row justify-content-between align-items-center">
<div class="col">
<ul class="collapse navbar-collapse navbar-nav ml-auto">
<li class="nav-item"> <a class="nav-link" href="mailto:info#rotterdamsteelworks.nl"
style="color:#2A5AA4;"><small><i class="fas fa-envelope"></i>
<span>Send email</span>
</small></a> </li>
<li class="nav-item"> <a class="nav-link" href="tel:00310184632456" style="color:#2A5AA4;"><small><i
class="fas fa-phone-volume"></i>
<span>+31 (0) 184-632456</span>
</small></a> </li>
</ul>
</div>
<div class="col-auto">
<a class="navbar-brand" href="index.php"><img class="img-fluid d-block" src="img/logo.png"
alt="Rotterdam Steel Works"></a>
</div>
<div class="col">
<ul class="collapse navbar-collapse navbar-nav mr-auto">
<li class="nav-item"> <a class="" href="certificering.php"><img class="img-fluid"
src="img/logo_metaalunie.png" width="45" alt="Metal Union"></a> </li>
<li class="nav-item"> <a class="" href="certificering.php"><img class="img-fluid"
src="img/logo_iso_9001.png" width="45" alt="ISO 9001"></a> </li>
<li class="nav-item"> <a class="" href="certificering.php"><img class="img-fluid" src="img/logo_ce.png"
width="45" alt="CE NEN EN1090"></a> </li>
<li class="nav-item"> <a class="" href="certificering.php"><img class="img-fluid" src="img/logo_lr.png"
width="45" alt="Lloyds stamp authorized"></a></li>
</ul>
</div>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
</div>
<nav class="row menu-container justify-content-center">
<div class="col-auto">
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.php" style="color:#E4000B;"><strong>
<span>Home</span>
</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.php" style="color:#E4000B;"><strong>
<span>About us</span>
</strong></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false" style="color:#E4000B;"><strong>
<span>Services</span>
</strong></a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog">
<a class="dropdown-item" href="service_snijden.php" style="color:#2A5AA4;">Snijden</a>
<a class="dropdown-item" href="service_stralen.php" style="color:#2A5AA4;">Stralen</a>
<a class="dropdown-item" href="service_lassen.php" style="color:#2A5AA4;">Lassen</a>
<a class="dropdown-item" href="service_afschuinen.php" style="color:#2A5AA4;">Afschuinen</a>
<a class="dropdown-item" href="service_boren.php" style="color:#2A5AA4;">Boren</a>
<a class="dropdown-item" href="service_zetten.php" style="color:#2A5AA4;">Zetten</a>
<a class="dropdown-item" href="service_schuren.php" style="color:#2A5AA4;">Schuren</a>
<a class="dropdown-item" href="service_materiaal.php" style="color:#2A5AA4;">Materiaal</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="markten.php" style="color:#E4000B;"><strong>
<span>Markets</span>
</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="certificering.php" style="color:#E4000B;"><strong>
<span>Certification</span>
</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color:#E4000B;"><strong>
<span>Media</span>
</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.php" style="color:#E4000B;"><strong>
<span>Contact</span>
</strong></a>
</li>
</ul>
</div>
</div>
</nav>
</header>
Your CSS style should be
.header-container .navbar-brand {
width: auto;
height: 100%;
}
Suggestions -> Don't use font tag, instead use css to style font. its way long back old method to style html element.
Always use HTML5 Semantic tags. :)
Remove flex-grow:1 from .navbar-collapse or add flex-grow-0 class.
and justify content property- justify-content:space-between or add justify-content-between class.
.navbar-collapse {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
-ms-flex-positive: 1;
flex-grow: 1; /*Remove this property */
-ms-flex-align: center;
align-items: center;
}
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
justify-content: space-between; /* add this property */
margin-right: -15px;
margin-left: -15px;
}
To align the menu towards right add float-right class.
<div class="row justify-content-between align-items-center float-right
">
<div class="navbar-collapse collapse show" id="navbarResponsive" style="">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.php" style="color:#E4000B;"><strong>Home</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.php" style="color:#E4000B;"><strong>Over ons</strong></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="color:#E4000B;"><strong>Diensten</strong></a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog">
<a class="dropdown-item" href="service_snijden.php" style="color:#2A5AA4;">Snijden</a>
<a class="dropdown-item" href="service_stralen.php" style="color:#2A5AA4;">Stralen</a>
<a class="dropdown-item" href="service_lassen.php" style="color:#2A5AA4;">Lassen</a>
<a class="dropdown-item" href="service_afschuinen.php" style="color:#2A5AA4;">Afschuinen</a>
<a class="dropdown-item" href="service_boren.php" style="color:#2A5AA4;">Boren</a>
<a class="dropdown-item" href="service_zetten.php" style="color:#2A5AA4;">Zetten</a>
<a class="dropdown-item" href="service_schuren.php" style="color:#2A5AA4;">Schuren</a>
<a class="dropdown-item" href="service_materiaal.php" style="color:#2A5AA4;">Materiaal</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="markten.php" style="color:#E4000B;"><strong>Markten</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="certificering.php" style="color:#E4000B;"><strong>Certificering</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color:#E4000B;"><strong>Media</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.php" style="color:#E4000B;"><strong>Contact</strong></a>
</li>
</ul>
</div>
</div>
As you resolved the first one for centering the menu just add class
justify-content-center on your second header parent
<div class="collapse justify-content-center navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav justify-content-center">
<li class="nav-item">
<a class="nav-link" href="index.php" style="color:#E4000B;"><strong>Home</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.php" style="color:#E4000B;"><strong>Over ons</strong></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="color:#E4000B;"><strong>Diensten</strong></a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog">
<a class="dropdown-item" href="service_snijden.php" style="color:#2A5AA4;">Snijden</a>
<a class="dropdown-item" href="service_stralen.php" style="color:#2A5AA4;">Stralen</a>
<a class="dropdown-item" href="service_lassen.php" style="color:#2A5AA4;">Lassen</a>
<a class="dropdown-item" href="service_afschuinen.php" style="color:#2A5AA4;">Afschuinen</a>
<a class="dropdown-item" href="service_boren.php" style="color:#2A5AA4;">Boren</a>
<a class="dropdown-item" href="service_zetten.php" style="color:#2A5AA4;">Zetten</a>
<a class="dropdown-item" href="service_schuren.php" style="color:#2A5AA4;">Schuren</a>
<a class="dropdown-item" href="service_materiaal.php" style="color:#2A5AA4;">Materiaal</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="markten.php" style="color:#E4000B;"><strong>Markten</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="certificering.php" style="color:#E4000B;"><strong>Certificering</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color:#E4000B;"><strong>Media</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.php" style="color:#E4000B;"><strong>Contact</strong></a>
</li>
</ul>
</div>
Using bootstrap add to left <ul> after brand, class justify-content-end and if you want your menu also to be centered add class justify-content-center to div, what surrounds <ul class="navbar-nav">
Also your could add some bottom space to brand to separate it from menu by adding class, for example , mb-3 to it
Should be something like this
<div class="row">
<ul class="collapse navbar-collapse navbar-nav">
<li class="nav-item">
<a class="nav-link" href="mailto:info#rotterdamsteelworks.nl" style="color:#2A5AA4;"><small><i class="fas fa-envelope"></i> Stuur e-mail</small></a>
</li>
<li class="nav-item">
<a class="nav-link" href="tel:00310184632456" style="color:#2A5AA4;"><small><i class="fas fa-phone-volume"></i> +31(0)184-632456</small></a>
</li>
</ul>
<a class="navbar-brand mb-3" href="index.php"><img class="img-fluid" src="img/logo.png" width="500" alt="Rotterdam Steel Works"></a>
<ul class="collapse navbar-collapse navbar-nav justify-content-end">
<li class="nav-item">
<a class="" href="certificering.php"><img class="img-fluid" src="img/logo_metaalunie.png" width="45" alt="Metaalunie"></a>
</li>
<li class="nav-item">
<a class="" href="certificering.php"><img class="img-fluid" src="img/logo_iso_9001.png" width="45" alt="ISO 9001"></a>
</li>
<li class="nav-item">
<a class="" href="certificering.php"><img class="img-fluid" src="img/logo_ce.png" width="45" alt="CE NEN EN1090"></a>
</li>
<li class="nav-item">
<a class="" href="certificering.php"><img class="img-fluid" src="img/logo_lr.png" width="45" alt="Lloyds overstempelbevoegd"></a>
</li>
</ul>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="row">
<div class="collapse navbar-collapse justify-content-center" id="navbarResponsive">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.php" style="color:#E4000B;"><strong>Home</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.php" style="color:#E4000B;"><strong>Over ons</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="markten.php" style="color:#E4000B;"><strong>Markten</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="certificering.php" style="color:#E4000B;"><strong>Certificering</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color:#E4000B;"><strong>Media</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.php" style="color:#E4000B;"><strong>Contact</strong></a>
</li>
</ul>
</div>
</div>
I have 2 menus on the web page one needs to show at the center bottom and another one on the top right. This following code shows all of them in the same line.
Here is the layout I am trying to achieve.
**********************************************************************************
Home About User Login
Logo Heading
Link1 Link2 Link3 Link4 Link5
**********************************************************************************
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
<style>
.navbar-nav {
flex-direction: row;
}
.nav-link {
padding-right: .5rem !important;
padding-left: .5rem !important;
}
/* Fixes dropdown menus placed on the right side */
.ml-auto .dropdown-menu {
left: auto !important;
right: 0px;
}
.navbar-nav > li > a
{
padding: 0;
margin: 0;
vertical-align: bottom;
}
</style>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary rounded">
<a class="navbar-brand" href="">
<img style="width: 64px;height: 64px;" src="../../Images/new.png" >Heading
</a>
<ul class="navbar-nav mr-auto">
<li class="nav-item active" ID="link1" runat="server" >
<a class="nav-link">Link1</a>
</li>
<li class="nav-item active" ID="link2" runat="server" >
<a class="nav-link">Link2</a>
</li>
<li class="nav-item active" ID="link3" runat="server" >
<a class="nav-link">Link3</a>
</li>
<li class="nav-item active" ID="link4" runat="server" >
<a class="nav-link">Link4</a>
</li>
<li class="nav-item active" ID="link5" runat="server" >
<a class="nav-link">Link5</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="../../page.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>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><asp:Label ID="LogOnUser" runat="server"></asp:Label></a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Log Out</a>
</div>
</li>
</ul>
</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>
You're super close! An mx-auto and mt-auto on the bottom-center menu and an mb-auto on the top-right menu are all you need to get it working.
NOTE: This does break on smaller screens as we're still treating everything as columns and columns do wrap. But, you could absolutely position the top-right menu if you need to on smaller screens.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<style>
.navbar-nav {
flex-direction: row;
}
.nav-link {
padding-right: .5rem !important;
padding-left: .5rem !important;
}
/* Fixes dropdown menus placed on the right side */
.ml-auto .dropdown-menu {
left: auto !important;
right: 0px;
}
.navbar-nav>li>a {
padding: 0;
margin: 0;
vertical-align: bottom;
}
</style>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary rounded">
<a class="navbar-brand" href="">
<img style="width: 64px;height: 64px;" src="../../Images/new.png">Heading
</a>
<ul class="navbar-nav mx-auto mt-auto">
<li class="nav-item active" ID="link1" runat="server">
<a class="nav-link">Link1</a>
</li>
<li class="nav-item active" ID="link2" runat="server">
<a class="nav-link">Link2</a>
</li>
<li class="nav-item active" ID="link3" runat="server">
<a class="nav-link">Link3</a>
</li>
<li class="nav-item active" ID="link4" runat="server">
<a class="nav-link">Link4</a>
</li>
<li class="nav-item active" ID="link5" runat="server">
<a class="nav-link">Link5</a>
</li>
</ul>
<ul class="navbar-nav ml-auto mb-auto">
<li class="nav-item">
<a class="nav-link" href="../../page.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>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<asp:Label ID="LogOnUser" runat="server"></asp:Label>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Log Out</a>
</div>
</li>
</ul>
</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.
.navbar-nav {
flex-direction: row;
}
.nav-link {
padding-right: .5rem !important;
padding-left: .5rem !important;
}
/* Fixes dropdown menus placed on the right side */
.ml-auto .dropdown-menu {
left: auto !important;
right: 0px;
}
.navbar-nav > li > a
{
padding: 0;
margin: 0;
vertical-align: bottom;
}
.bottom_menu{
margin-top: 30px;
}
.top_menu{
margin-bottom: 30px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<nav class="navbar navbar-expand-lg navbar-dark bg-primary rounded justify-content-md-center">
<a class="navbar-brand" href="">
<img style="width: 64px;height: 64px;" src="../../Images/new.png" >Heading
</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="bottom_menu navbar-nav ml-auto text-md-center">
<li class="nav-item active" ID="link1" runat="server" >
<a class="nav-link">Link1</a>
</li>
<li class="nav-item active" ID="link2" runat="server" >
<a class="nav-link">Link2</a>
</li>
<li class="nav-item active" ID="link3" runat="server" >
<a class="nav-link">Link3</a>
</li>
<li class="nav-item active" ID="link4" runat="server" >
<a class="nav-link">Link4</a>
</li>
<li class="nav-item active" ID="link5" runat="server" >
<a class="nav-link">Link5</a>
</li>
</ul>
<ul class="top_menu navbar-nav ml-auto justify-content-md-center justify-content-start flex-nowrap">
<li class="nav-item">
<a class="nav-link" href="../../page.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>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><asp:Label ID="LogOnUser" runat="server"></asp:Label></a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Log Out</a>
</div>
</li>
</ul>
</div>
</nav>
<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.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
You mean Like This?
<style>
#header{
position: relative;
width: 100%;
height: 100px;
background-color: orange;
}
a{
display: inline-block;
width: 50px;
}
#logo, #navigation, #url{
position: absolute;
}
#logo{
top: calc(50%);
}
#navigation{
top: 0;
right: 0;
}
#url{
left: calc(50% - 125px);
bottom: 0;
}
</style>
<div id = "header">
<div id = "logo">
LOGO
</div>
<div id = "navigation">
<a>Home</a>
<a>About</a>
<a>User</a>
</div>
<div id = "url">
<a>Link1</a>
<a>Link2</a>
<a>Link3</a>
<a>Link4</a>
<a>Link5</a>
</div>
</div>
I have a couple of issues with Bootstrap 4 fixed-top navbar:
1) It scrolls the page behind it when in collapsed view - How to prevent that?
2) You can't scroll the navbar down if the links are out of the view, as you can see in the example below, I have 8 links, and added 35px paddings just to make them go out of the view. You cannot scroll down to them. Instead it scrolls the page behind it.
.navbar-nav > li > a {
padding:35px!important;
}
p {
padding-top:1000px; /* to emulate scroll */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<div class="container">
<a class="navbar-brand mx-auto" href="#">
<img src="https://loremflickr.com/320/240" width="35" height="35" alt="logo">
<span>Logo</span>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-right" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item main-nav">
<a class="nav-link py-0 text-center" href="#">Link 1</a>
</li>
<li class="nav-item main-nav">
<a class="nav-link py-0 text-center" href="#">Link 2</a>
</li>
<li class="nav-item main-nav">
<a class="nav-link py-0 text-center" href="#">Link 3</a>
</li>
<li class="nav-item main-nav">
<a class="nav-link py-0 text-center" href="#">Link 4</a>
</li>
<li class="nav-item main-nav">
<a class="nav-link py-0 text-center" href="#">Link 5</a>
</li>
<li class="nav-item main-nav">
<a class="nav-link py-0 text-center" href="#">Link 6</a>
</li>
<li class="nav-item main-nav">
<a class="nav-link py-0 text-center" href="#">Link 7</a>
</li>
<li class="nav-item main-nav">
<a class="nav-link py-0 text-center" href="#">Link 8</a>
</li>
</ul>
</div>
</div>
</nav>
<p class="text-center"><strong>I am content at the bottom</strong></p>
This issue you can solve it by 2 ways
you can define a height for the .navbar class for example it can be 80px and then the content behind it give it padding-top: 80px or margin-top: 80px with the same value or even more to have some more space
UPDATE
just add breakpoint #media screen and (max-width: 991px) { .navbar { height: auto } }
body { height: 2000px; }
.navbar {
height: 80px;
}
#media screen and (max-width: 991px) { .navbar { height: auto } }
p {
padding-top:85px; /* to emulate scroll */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<div class="container">
<a class="navbar-brand mx-auto" href="#">
<img src="https://loremflickr.com/320/240" width="35" height="35" alt="logo">
<span>Logo</span>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-right" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item main-nav">
<a class="nav-link py-0 text-center" href="#">Link 1</a>
</li>
<li class="nav-item main-nav">
<a class="nav-link py-0 text-center" href="#">Link 2</a>
</li>
<li class="nav-item main-nav">
<a class="nav-link py-0 text-center" href="#">Link 3</a>
</li>
<li class="nav-item main-nav">
<a class="nav-link py-0 text-center" href="#">Link 4</a>
</li>
<li class="nav-item main-nav">
<a class="nav-link py-0 text-center" href="#">Link 5</a>
</li>
<li class="nav-item main-nav">
<a class="nav-link py-0 text-center" href="#">Link 6</a>
</li>
<li class="nav-item main-nav">
<a class="nav-link py-0 text-center" href="#">Link 7</a>
</li>
<li class="nav-item main-nav">
<a class="nav-link py-0 text-center" href="#">Link 8</a>
</li>
</ul>
</div>
</div>
</nav>
<p class="spacing text-center"><strong>I am content at the bottom</strong></p>
this is more dynamic way if you don't want to have a fixed height and you can define it with js like that you just get the height of the header and then give it as padding-top to the content you want
var navH = $('.navbar').outerHeight();
console.log(navH);
var res = $('.spacing').css('padding-top', navH + 10); /* 10 in case you want more space*/
console.log(res);