adding a header to my navigation - html

I am trying to add a header as part of my navigation but below it like this:
I have tried adding another row using bootstrap however it just comes out like this:
this is my code:
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<a class="navbar-brand js-scroll-trigger" href="#page-top">Bunk.</a>
<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">
Menu
<i class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#tenant">TENANT</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#landlord">LANDLORD</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#bunkfaqs">BUNK FAQs</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#blog">BLOG</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#team">TEAM</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#login">LOG IN</a>
</li>
</ul>
</div>
<div class="row">
<header id="header">
<div class="container">
<div class="row">
<h2> Tenants </h2>
</div>
</div>
</header>
</div>
any suggestions?


Read more about Bootstrap's Navbar and grid.
The navbar should only contain supported content.
The header shouldn't be in the navbar, put it below.
.container shouldn't be nested in other .containers.
.row is meant to contain only col-*.
Demo on Codeply
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top" id="mainNav">
<a class="navbar-brand js-scroll-trigger" href="#page-top">Bunk.</a>
<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">
Menu
<i class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#tenant">TENANT</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#landlord">LANDLORD</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#bunkfaqs">BUNK FAQs</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#blog">BLOG</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#team">TEAM</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#login">LOG IN</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="container-fluid bg-light">
<header id="header" class="d-flex align-items-center">
<h2 class="mx-auto">Tenants</h2>
</header>
</div>

Related

I am working with Bootstrap 5.2 and my mobile menu will not shut when toggled I would appreciate another set of eyes on the code. Thanks in advance

<body style="background-image: url('/img/smush.png');background-size:cover;background-repeat:no-repeat">
<div class="container">
<header class="pt-2">
<nav class="navbar navbar-expand-lg bg-none fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">Slightly Sophisticated</a>
<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 bg-none p-2 d-flex flex-column justify-content-end" id="navbarSupportedContent">
<ul class="nav">
<li class="nav-item">
<a class="nav-link active text-dark" aria-current="page" href="#services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#mission">About</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#work">Work</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#testimonials">Testimonials</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
I was expecting the toggle to work correctly on mobile. Not sure why it is not working right now, I feel like i looked through it thoroughly but its obviously not the case if i am asking the question here lol

bootstrap 4 nav bar not covering full width when dropdown

This is what my code looks like for the nav bar, when I press the dropdown button, this is how it will look like on my page
https://docs.google.com/document/d/1gHsqAZ9QTaJX4A-1PXrVVoXi2KWBWqa6YTA_-QtG8wo/edit?usp=sharing
<nav class="navbar navbar-expand-lg navbar-dark bg-color mb-3">
<a class="navbar-brand" href="/"><img src="/img/logo.png" alt="" width="100px" height="40px">RYCE</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link text-white" href="/">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="">OUR CARS</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="">SHOP PARTS</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="">TEST DRIVE</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="">SERVICING</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="">SUPPORT</a>
</li>
<li class="nav-item dropdown">
STAFF
<div class="dropdown-menu">
Users Management
Bookings Management
Products Management
Orders Management
</div>
</li>
<li class="nav-item">
<a class="nav-link text-white" href=""><i style='font-size:24px' class='fas'></i></a>
</li>
<li class="nav-item dropdown">
<i class="material-icons"></i>
<div class="dropdown-menu">
LOGIN
SIGN UP
PROFILE
</div>
</li>
</ul>
</div>
</nav>
I have tried changing the width of the navbar and some of the bootstrap properties but none of my attempts have worked so far. I am unsure if the problem lies with the navbar or dropdown menu.
Thank you so much for all your inputs!

You can add .dropdown-menu-right to .dropdown-menu to align the dropdown to the right when it is shown -- this way it stops it from increasing the width of the page. Is this what you wanted?
Otherwise consider using Bootstrap collapse, I can change my example if you want!
body { height: 100vh }
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="bg-dark h-100">
<nav class="navbar navbar-expand-lg navbar-dark bg-danger bg-color mb-3">
<a class="navbar-brand" href="/"><img src="/img/logo.png" alt="" width="100px" height="40px"> RYCE</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link text-white" href="/">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="">OUR CARS</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="">SHOP PARTS</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="">TEST DRIVE</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="">SERVICING</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="">SUPPORT</a>
</li>
<li class="nav-item dropdown">
STAFF
<div class="dropdown-menu dropdown-menu-right">
Users Management
Bookings Management
Products Management
Orders Management
</div>
</li>
<li class="nav-item">
<a class="nav-link text-white" href=""><i style='font-size:24px' class='fas'></i></a>
</li>
<li class="nav-item dropdown">
<i class="material-icons"></i>
<div class="dropdown-menu dropdown-menu-right">
LOGIN
SIGN UP
PROFILE
</div>
</li>
</ul>
</div>
</nav>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

Navbar items alingment for bootstrap 5

I am sticking to this problem for such a long time. Please help me to fix it... I really tried various ways but none of them is actually working.
I want my login button at the end of my navbar(right side) and when I decrease the screen size i wanted it to be appear on the left side of the burgger menu
Here is my code -
<header class="header">
<nav class="navbar navbar-expand-md navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="image/logo.png" alt="" width="150px" height="35px">
</a>
<div class="login-nav ms-auto mb-2 me-2 ">
<ul class="navbar-nav login">
<li class="navbar-item login-item">
<a class="nav-link active" aria-current="page" href="#">Login</a>
</li>
</ul>
</div>
<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 ms-auto mb-2 ">
<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="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
I want them like these pictures :
enter image description here
enter image description here

This is a workaround. There are two login links.
<header class="header">
<nav class="navbar navbar-expand-md navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="image/logo.png" alt="" width="150px" height="35px">
</a>
<div class="mb-2 me-2 d-block d-md-none">
<ul class="navbar-nav login">
<li class="navbar-item login-item">
<a class="nav-link active" aria-current="page" href="#">Login</a>
</li>
</ul>
</div>
<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 ms-auto mb-2 ">
<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="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
<div class="mb-2 me-2 d-none d-md-block">
<ul class="navbar-nav login">
<li class="navbar-item login-item">
<a class="nav-link active" aria-current="page" href="#">Login</a>
</li>
</ul>
</div>
</div>
</nav>
</header>

<header class="header">
<nav class="navbar navbar-expand-md navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="image/logo.png" alt="" width="150px" height="35px">
</a>
<div class="navbar-nav ms-auto me-2 d-block d-md-none">
<ul class="navbar-nav">
<li class="nav-item ">
<a class="nav-link active" aria-current="page" href="#">Login</a>
</li>
</ul>
</div>
<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 justify-content-between" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 ">
<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="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
<div class="navbar-nav ms-auto me-2 d-none d-md-block">
<ul class="navbar-nav">
<li class="nav-item ">
<a class="nav-link active" aria-current="page" href="#">Login</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
This is working as expected :) This for the idea Yasin

Overlapping of dropdown menu in mobile view when fixed-top is used

In mobile view as i click on hamburger button the dropdown menu gets overlapped with the content.Even while scrolling down the content is being overlapped.
<div class="background my-0 mx-0 fixed-top">
<nav id="mainNavbar" class="navbar navbar-expand-lg navbar-light ">
<a class="navbar-brand" href="#">TAVISH DESIGN STUDIO</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto justify-content-end">
<li class="nav-item">
<a class="nav-link active" href="#">HOMEPAGE</a>
</li>`enter code here`
<li class="nav-item">
<a class="nav-link" href="#">OUR CLIENTS</a>
</li>`enter code here`
<li class="nav-item">
<a class="nav-link" href="#">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CAREERS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT US</a>
</li>
</ul>
</div>
</nav>
</div>

Add background solid color to navbar list like below:
.navbar-collapse.show {
background: white;
}

HTML Buttons Stop working after pressing one of them

I have these 4 buttons, that each of them works if it is the first to be pressed but after pressing one of them all the buttons stop working.
<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top">BusTracker</a>
<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">
Menu
<i class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav text-uppercase ml-auto">
<li class="nav-item active">
<a class="nav-link js-scroll-trigger" href="#services">Serviços</a>
</li>
<li class="nav-item active">
<a class="nav-link js-scroll-trigger" href="#about">Sobre nós</a>
</li>
<li class="nav-item active">
<a class="nav-link js-scroll-trigger" href="#team">Equipa</a>
</li>
<li class="nav-item active">
<a class="nav-link js-scroll-trigger" href="#faq">FAQ</a>
</li>
</div>
</div>
</nav>