I want to add a search bar under the header, when I completed it and was moving on to the next element it completely disregards the search bar and adds the new elements on top of the search bar. I want the new element below the search bar. I am using HTML and Bootstrap. The search bar code is at the bottom between comments.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="../Content/bootstrap.min.css" rel="stylesheet" />
<link href="../bootstrap-icons-1.9.1/bootstrap-icons.css" rel="stylesheet" />
</head>
<body>
<!--Begin Menu-->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark p-0">
<div class="container">
<a href="index.html" class="navbar-brand">
Blogen
</a>
<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">
<ul class="navbar-nav">
<li class="nav-item">
<a href="index.html"
class="nav-link">
Dashboard
</a>
</li>
<li class="nav-item">
<a href="posts.html"
class="nav-link active">
Posts
</a>
</li>
<li class="nav-item">
<a href="categories.html"
class="nav-link">
Categories
</a>
</li>
<li class="nav-item">
<a href="users.html"
class="nav-link">
Users
</a>
</li>
</ul>
<ul class="navbar-nav ms-auto">
<li class="nav-item dropdown px-2">
<a href="#"
class="nav-link dropdown-toggle"
data-bs-toggle="dropdown">
<i class="bi bi-person-fill h5"></i>
Welcome Tarek
</a>
<div class="dropdown-menu">
<a href="profile.html" class="dropdown-item">
<i class="bi bi-person-circle h5"></i>
Profile
</a>
<a href="settings.html" class="dropdown-item">
<i class="bi bi-gear-fill h5"></i>
Settings
</a>
</div>
</li>
<li class="nav-item">
<a href="login.html"
class="nav-link">
<!--<i class="fa fa-user-times"></i>-->
<i class="bi bi-person-x-fill h5"></i>
Logout
</a>
</li>
</ul>
</div>
</div>
</nav>
<!--End Menu----->
<!--Begin Search Bar-->
<div class="container">
<div class=" input-group py-4 position-absolute w-25 ">
<input type="search" class="form-control rounded" placeholder="Search Posts..." />
<button type="button" class="btn btn-primary">Search</button>
</div>
</div>
<!--End Search Bar-->
<script src="../Scripts/jquery-3.6.0.min.js"></script>
<script src="../Scripts/bootstrap.bundle.min.js"></script>
</body>
</html>
Related
new to bootstrap! I am trying to align the navigation bar and the top title. The yellow area is wider than the navigation bar. I also need help setting the background image to span the whole website. If anyone can give me some suggestions, it would be appreciated!
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<!doctype html>
<div class="container bg-warning">
<div class="row">
<div class="d-flex justify-content-center">
<p class="display-1">Thuan's Website</p>
</div>
</div>
</div>
<div class="container">
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<a href="#" class="navbar-brand" />
<img src="https://img.icons8.com/ios-glyphs/30/000000/redo.png" />Thuan
</a>
<div class="collapse navbar-collapse">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a href="#" class="nav-link">Home
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Forums
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Games
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Contact
</a>
</li>
</ul>
</div>
</nav>
</div>
In order to get the title and navbar full width just put it oustside container class
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex justify-content-center bg-warning">
<p class="display-1">Thuan's Website</p>
</div>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<a href="#" class="navbar-brand" />
<img src="https://img.icons8.com/ios-glyphs/30/000000/redo.png" />Thuan
</a>
<div class="collapse navbar-collapse">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a href="#" class="nav-link">Home
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Forums
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Games
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Contact
</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
</div>
</div>
I have two nav bars, one of the nav bar has a red background and the other nav bar has blue background with multiple anchor tags.
When I reduce the screen, the second nav bar is not displaying correctly when compared to before. Can anyone help me with your best solution?
Please find issue image,
Please find my code below,
<!DOCTYPE html>
<html lang="en">
<head>
<title>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/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
-->
<link rel="stylesheet" type="text/css" href="CSS/Header.css">
<link rel="stylesheet" type="text/css" href="CSS/styles.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- <script src="https://code.jquery.com/jquery-3.3.1.js"></script> -->
</head>
<body>
<header>
<nav class=" navbar navbar-expand-sm navbar-dark navbar-custom" style="background-image:header.png;opacity:0.5;height:12vh;background-color: red"></nav>
<nav class="navbar navbar-expand-sm container-fluid " style="background-color: #01adcd;">
<!-- <a class="navbar-brand" href="#">Start</a> -->
<!-- <div class="collapse navbar-collapse" id="navbarText"> -->
<!-- Collapse button -->
<button class="navbar-toggler toggler-example" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1"
aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"><span class="dark-blue-text"><i
class="fas fa-bars fa-1x"></i></span></button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent1" >
<ul class=" navbar-nav mx-auto order-0" style=" background-color: #01adcd;">
<li class="nav-item active mt-auto mb-auto col active">
<a class="nav-link navicon" href="Start.html">
<div class="icon-center">
<i class="fa fa-home"></i>
</div>
<div >
Start
</div>
<div class="icon-center " >
<i class="far fa-check-circle"></i>
</div>
</a>
</li>
<li class="nav-item mt-auto mb-auto col">
<a class="nav-link navicon" href="Consents.html">
<div >
<i class="fa fa-user"></i>
</div>
<div >
Stop
</div>
</a>
</li>
<li class="nav-item mt-auto mb-auto col">
<a class="nav-link navicon" href="Purpose.html">
<div >
<i class="fa fa-envelope"></i>
</div>
<div >
gallery
</div>
</a>
</li>
<li class="nav-item mt-auto mb-auto col">
<a class="nav-link navicon" href="Personal.html">
<div >
<i class="fa fa-cog"></i>
</div>
<div >
About
</div>
</a>
</li>
<li class="nav-item mt-auto mb-auto col">
<a class="nav-link navicon" href="Assets.html">
<div >
<i class="fa fa-envelope"></i>
</div>
<div >
Assets
</div>
</a>
</li>
<li class="nav-item mt-auto mb-auto col">
<a class="nav-link navicon" href="Declarations.html">
<div >
<i class="fa fa-user"></i>
</div>
<div >
Features
</div>
</a>
</li>
<li class="nav-item mt-auto mb-auto col">
<a class="nav-link navicon" href="Income.html">
<div >
<i class="fa fa-cog"></i>
</div>
<div >
Source
</div>
</a>
</li>
<li class="nav-item mt-auto mb-auto col">
<a class="nav-link navicon" href="Preview.html">
<div >
<i class="fa fa-home"></i>
</div>
<div >
Careers
</div>
</a>
</li>
</ul>
</div>
</Div>
</nav>
</header>
</body>
</html>
After I try this code without header.css and styles.css
No have problem with your code
I will shared snippet on here
Please give the Header.css and Styles.css in here
<!DOCTYPE html>
<html lang="en">
<head>
<title>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/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- <script src="https://code.jquery.com/jquery-3.3.1.js"></script> -->
</head>
<body>
<header>
<nav class=" navbar navbar-expand-sm navbar-dark navbar-custom" style="background-image:header.png;opacity:0.5;height:12vh;background-color: red"></nav>
<nav class="navbar navbar-expand-sm container-fluid " style="background-color: #01adcd;">
<!-- <a class="navbar-brand" href="#">Start</a> -->
<!-- <div class="collapse navbar-collapse" id="navbarText"> -->
<!-- Collapse button -->
<button class="navbar-toggler toggler-example" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1"
aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"><span class="dark-blue-text"><i
class="fas fa-bars fa-1x"></i></span></button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent1" >
<ul class=" navbar-nav mx-auto order-0" style=" background-color: #01adcd;">
<li class="nav-item active mt-auto mb-auto col active">
<a class="nav-link navicon" href="Start.html">
<div class="icon-center">
<i class="fa fa-home"></i>
</div>
<div >
Start
</div>
<div class="icon-center " >
<i class="far fa-check-circle"></i>
</div>
</a>
</li>
<li class="nav-item mt-auto mb-auto col">
<a class="nav-link navicon" href="Consents.html">
<div >
<i class="fa fa-user"></i>
</div>
<div >
Stop
</div>
</a>
</li>
<li class="nav-item mt-auto mb-auto col">
<a class="nav-link navicon" href="Purpose.html">
<div >
<i class="fa fa-envelope"></i>
</div>
<div >
gallery
</div>
</a>
</li>
<li class="nav-item mt-auto mb-auto col">
<a class="nav-link navicon" href="Personal.html">
<div >
<i class="fa fa-cog"></i>
</div>
<div >
About
</div>
</a>
</li>
<li class="nav-item mt-auto mb-auto col">
<a class="nav-link navicon" href="Assets.html">
<div >
<i class="fa fa-envelope"></i>
</div>
<div >
Assets
</div>
</a>
</li>
<li class="nav-item mt-auto mb-auto col">
<a class="nav-link navicon" href="Declarations.html">
<div >
<i class="fa fa-user"></i>
</div>
<div >
Features
</div>
</a>
</li>
<li class="nav-item mt-auto mb-auto col">
<a class="nav-link navicon" href="Income.html">
<div >
<i class="fa fa-cog"></i>
</div>
<div >
Source
</div>
</a>
</li>
<li class="nav-item mt-auto mb-auto col">
<a class="nav-link navicon" href="Preview.html">
<div >
<i class="fa fa-home"></i>
</div>
<div >
Careers
</div>
</a>
</li>
</ul>
</div>
</Div>
</nav>
</header>
</body>
</html>
EDIT - By removing all my previous answer
You are facing this issue because there are too many items in your nav. So the width is too big.
You can consider updating the navbar-expand-sm class to navbar-expand-md in order to change the breakpoint on which you want the menu collapsing under the "burger menu".
Otherelse, you can hide menu texts when the screen is small, and add those texts into the title properties of your icons or its wrappers to see the "menu description" on hover.
Moreover, mt-auto mb-auto col classes for each <li></li> are not needed. In fact, margin / padding should be added only on the wrapper. And the navbar classes automatically arrange your items. The col onto your items are breaking the responsiveness of your nav wrapper.
Keep col but updating nav to navbar-expanded-md:
<!DOCTYPE html>
<html lang="en">
<head>
<title>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/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- <script src="https://code.jquery.com/jquery-3.3.1.js"></script> -->
</head>
<body>
<header>
<nav class=" navbar navbar-expand-sm navbar-dark navbar-custom" style="background-image:header.png;opacity:0.5;height:12vh;background-color: red"></nav>
<nav class="navbar navbar-expand-md container-fluid " style="background-color: #01adcd;">
<!-- <a class="navbar-brand" href="#">Start</a> -->
<!-- <div class="collapse navbar-collapse" id="navbarText"> -->
<!-- Collapse button -->
<button class="navbar-toggler toggler-example" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1"
aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"><span class="dark-blue-text"><i
class="fas fa-bars fa-1x"></i></span></button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent1" >
<ul class="navbar-nav mx-auto order-0" style=" background-color: #01adcd;">
<li class="nav-item col active">
<a class="nav-link navicon" href="Start.html">
<div class="icon-center">
<i class="fa fa-home"></i>
</div>
<div >
Start
</div>
<div class="icon-center " >
<i class="far fa-check-circle"></i>
</div>
</a>
</li>
<li class="nav-item col">
<a class="nav-link navicon" href="Consents.html">
<div >
<i class="fa fa-user"></i>
</div>
<div >
Stop
</div>
</a>
</li>
<li class="nav-item col">
<a class="nav-link navicon" href="Purpose.html">
<div >
<i class="fa fa-envelope"></i>
</div>
<div >
gallery
</div>
</a>
</li>
<li class="nav-item col">
<a class="nav-link navicon" href="Personal.html">
<div >
<i class="fa fa-cog"></i>
</div>
<div >
About
</div>
</a>
</li>
<li class="nav-item col">
<a class="nav-link navicon" href="Assets.html">
<div >
<i class="fa fa-envelope"></i>
</div>
<div >
Assets
</div>
</a>
</li>
<li class="nav-item col">
<a class="nav-link navicon" href="Declarations.html">
<div >
<i class="fa fa-user"></i>
</div>
<div >
Features
</div>
</a>
</li>
<li class="nav-item col">
<a class="nav-link navicon" href="Income.html">
<div >
<i class="fa fa-cog"></i>
</div>
<div >
Source
</div>
</a>
</li>
<li class="nav-item col">
<a class="nav-link navicon" href="Preview.html">
<div >
<i class="fa fa-home"></i>
</div>
<div >
Careers
</div>
</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
</body>
</html>
Removing col but Keeping nav to navbar-expanded-sm:
<!DOCTYPE html>
<html lang="en">
<head>
<title>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/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- <script src="https://code.jquery.com/jquery-3.3.1.js"></script> -->
</head>
<body>
<header>
<nav class=" navbar navbar-expand-sm navbar-dark navbar-custom" style="background-image:header.png;opacity:0.5;height:12vh;background-color: red"></nav>
<nav class="navbar navbar-expand-sm container-fluid " style="background-color: #01adcd;">
<!-- <a class="navbar-brand" href="#">Start</a> -->
<!-- <div class="collapse navbar-collapse" id="navbarText"> -->
<!-- Collapse button -->
<button class="navbar-toggler toggler-example" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1"
aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"><span class="dark-blue-text"><i
class="fas fa-bars fa-1x"></i></span></button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent1" >
<ul class="navbar-nav mx-auto order-0" style=" background-color: #01adcd;">
<li class="nav-item active">
<a class="nav-link navicon" href="Start.html">
<div class="text-center">
<i class="fa fa-home"></i>
</div>
<div >
Start
</div>
<div class="text-center " >
<i class="far fa-check-circle"></i>
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link navicon" href="Consents.html">
<div class="text-center">
<i class="fa fa-user"></i>
</div>
<div >
Stop
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link navicon" href="Purpose.html">
<div class="text-center">
<i class="fa fa-envelope"></i>
</div>
<div >
gallery
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link navicon" href="Personal.html">
<div class="text-center">
<i class="fa fa-cog"></i>
</div>
<div >
About
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link navicon" href="Assets.html">
<div class="text-center">
<i class="fa fa-envelope"></i>
</div>
<div >
Assets
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link navicon" href="Declarations.html">
<div class="text-center">
<i class="fa fa-user"></i>
</div>
<div >
Features
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link navicon" href="Income.html">
<div class="text-center">
<i class="fa fa-cog"></i>
</div>
<div >
Source
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link navicon" href="Preview.html">
<div class="text-center">
<i class="fa fa-home"></i>
</div>
<div >
Careers
</div>
</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
</body>
</html>
On this second snippet, I added the class text-center to your icon wrappers.
I have an navigation bar, where I have an "nav-item" with a dropdown function.
But what I want is the "button / nav-item", that is visible in the navb-bar to be clickable and have a redirect to another page, and then the dropdown arrow should be on the right side, where you can click on the arrow and then get the dropdown menu.
I have two approaches:
1.
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<!-- Navbar Toggle -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar Toggle END -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<!-- Navbar Items Links-->
<ul class="navbar-nav">
<!-- Home -->
<li class="nav-item">
<a class="nav-link" href="../Startseite/Index.jsp">Home <i class="fas fa-home"></i></a>
</li>
<!-- Gruppen Dropdown-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#gruppen" id="navbardrop1" data-toggle="dropdown">Gruppen <i class="fas fa-users"></i></a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#gruppe1">Gruppe 1</a>
<a class="dropdown-item" href="#gruppe2">Gruppe 2</a>
<a class="dropdown-item" href="#gruppe3">Gruppe 3</a>
</div>
</li>
<!-- Zahlungen -->
<li class="nav-item"><a class="nav-link" href="../Zahlungsuebersicht/Zahlungsuebersicht.jsp">Zahlungen
<i class="fas fa-receipt"></i>
</a></li>
</ul>
<!-- Navbar Items Rechts-->
<ul class="navbar-nav ml-auto">
<!-- Profil -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#asd" id="navbardrop2" data-toggle="dropdown">Benutzer <i class="fas fa-user"></i></a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#asd">Profil bearbeiten <i
class="fas fa-user-edit"></i>
</a> <a class="dropdown-item" href="#asd">Abmelden <i class="fas fa-sign-in-alt"></i>
</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link active" href="../Registrieren/Registrieren.jsp">Registrieren <i class="fas fa-sign-in-alt"></i></a>
</li>
</ul>
<!-- Navbar Items END -->
</div>
</nav>
This one is from the design what I am looking for, but I would like the element "Gruppen" clickable, so it redirects you to another page.
2
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<!-- Navbar Toggle -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar Toggle END -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<!-- Navbar Items Links-->
<ul class="navbar-nav">
<!-- Home -->
<li class="nav-item">
<a class="nav-link" href="../Startseite/Index.jsp">Home <i class="fas fa-home"></i></a>
</li>
<!-- Gruppen Dropdown-->
<li class="nav-item">
<a class="nav-link" href="#gruppen">Gruppen <i class="fas fa-home"></i></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop1" data-toggle="dropdown"></a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#gruppe1">Gruppe 1</a>
<a class="dropdown-item" href="#gruppe2">Gruppe 2</a>
<a class="dropdown-item" href="#gruppe3">Gruppe 3</a>
</div>
</li>
<!-- Zahlungen -->
<li class="nav-item"><a class="nav-link" href="../Zahlungsuebersicht/Zahlungsuebersicht.jsp">Zahlungen
<i class="fas fa-receipt"></i>
</a></li>
</ul>
<!-- Navbar Items Rechts-->
<ul class="navbar-nav ml-auto">
<!-- Profil -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#asd" id="navbardrop2" data-toggle="dropdown">Benutzer <i class="fas fa-user"></i></a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#asd">Profil bearbeiten <i
class="fas fa-user-edit"></i>
</a> <a class="dropdown-item" href="#asd">Abmelden <i class="fas fa-sign-in-alt"></i>
</a>
</div>
</li>
<!-- /c:if -->
<li class="nav-item">
<a class="nav-link active" href="../Registrieren/Registrieren.jsp">Registrieren <i class="fas fa-sign-in-alt"></i></a>
</li>
</ul>
<!-- Navbar Items END -->
</div>
</nav>
This one solution is really dirty in my opinion.
Isn't there a clean way to achieve a proper solution?
I'm pretty new to all HTML, Bootstrap and CSS.
EDIT: I have no idea why, but i have run the two exact same code snippets on my local server, and the outcome was different... I want it to like the second approach, but without the arrow being a navitem by it's own, but when I do it, the dropdown arrow is at the top of the navbar, like above all the text. is there a way to fix that?
Your current code structure simplified:
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop1" data-toggle="dropdown">
Gruppen <i class="fas fa-users"></i>
</a>
<div class="dropdown-menu">
...
</div>
</li>
As I understood - the aim is to make <i class="fas fa-users"></i> a separate dropdown link and the style should not degrade.
This will solve your issue:
<li class="nav-item dropdown nav-link">
<a href="/#yourlink">
Gruppen
</a>
<a class="dropdown-toggle" href="#" id="navbardrop1" data-toggle="dropdown">
<i class="fas fa-users"></i>
</a>
<div class="dropdown-menu">
...
</div>
</li>
The trick is in the nav-link class, which makes the propper positioning of your menu element. Moving it to the <li> element may have caused some conflicts in styles if the CSS was more complex, so be careful with moving class from one element to another in future.
Note: you must understand that the dropdown menu should not be made the way you want them now, because interacting with it the average user expects a dropdown after the click, not the redirect to some external page.
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>
I have recently gotten a bootstrap 4 theme. I have been changing some files to work with flask. However I'm not able to figure out why my "main-container" div is falling below the nav bar when I change the page size to a more full size desktop browser size?
In the original bootstrap file the index.html file had the nav bar and page content on a single page. For flask I have moved most of this between three files layout.html, index.html and _navbar.html
I would like this to be on the right side of the nav bar when this is stretched to full desktop size but im not able to figure out what to change.
layout.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pipeline Project Management Bootstrap Theme</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A project management Bootstrap theme by Medium Rare">
<link href="static/img/favicon.ico" rel="icon" type="image/x-icon">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Gothic+A1" rel="stylesheet">
<link href="static/css/theme.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
{%include 'includes/_navbar.html'%}
{%block body%}
{%endblock%}
<script type="text/javascript" src="static/js/jquery.min.js"></script>
<script type="text/javascript" src="static/js/autosize.min.js"></script>
<script type="text/javascript" src="static/js/popper.min.js"></script>
<script type="text/javascript" src="static/js/prism.js"></script>
<script type="text/javascript" src="static/js/draggable.bundle.legacy.js"></script>
<script type="text/javascript" src="static/js/swap-animation.js"></script>
<script type="text/javascript" src="static/js/dropzone.min.js"></script>
<script type="text/javascript" src="static/js/list.min.js"></script>
<script type="text/javascript" src="static/js/bootstrap.js"></script>
<script type="text/javascript" src="static/js/theme.js"></script>
</body>
<footer>
<p><center><small><small>© ME | ©ME </small></small></center></p>
</footer>
</html>
index.html
{%extends 'layout.html'%}
{%block body%}
<div class="main-container">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-11 col-xl-9">
<section class="py-4 py-lg-5">
<div class="mb-3 d-flex">
<img alt="Pipeline" src="static/img/logo-color.svg" class="avatar avatar-lg mr-1" />
<div>
<span class="badge badge-success">1.0</span>
</div>
</div>
<h1 class="display-4 mb-3">Headline</h1>
<p class="lead">
Headline text
</p>
<div class="d-flex">
<div class="dropdown mr-3">
Explore Pages
<div class="dropdown-menu">
<a class="dropdown-item" href="pages-app.html">App Pages</a>
<a class="dropdown-item" href="pages-utility.html">Utility Pages</a>
</div>
</div>
<div class="dropdown">
View Components
<div class="dropdown-menu">
<a class="dropdown-item" href="components-bootstrap.html">Bootstrap Components</a>
<a class="dropdown-item" href="components-pipeline.html">Pipeline Components</a>
</div>
</div>
</div>
</section>
<section class="py-4 py-lg-5">
<div class="carousel slide carousel-fade mb-5" data-ride="carousel">
<div class="carousel-inner overflow-visible">
<div class="carousel-item shadow-lg active">
<a href="pages-app.html">
<img alt="Image" src="static/img/overview/nav-side-team.png" class="img-fluid rounded border" />
</a>
</div>
<div class="carousel-item shadow-lg ">
<a href="pages-app.html">
<img alt="Image" src="static/img/overview/nav-side-project.png" class="img-fluid rounded border" />
</a>
</div>
<div class="carousel-item shadow-lg ">
<a href="pages-app.html">
<img alt="Image" src="static/img/overview/nav-side-task.png" class="img-fluid rounded border" />
</a>
</div>
<div class="carousel-item shadow-lg ">
<a href="pages-app.html">
<img alt="Image" src="static/img/overview/nav-side-kanban-board.png" class="img-fluid rounded border" />
</a>
</div>
<div class="carousel-item shadow-lg ">
<a href="pages-app.html">
<img alt="Image" src="static/img/overview/nav-side-chat.png" class="img-fluid rounded border" />
</a>
</div>
<div class="carousel-item shadow-lg ">
<a href="pages-app.html">
<img alt="Image" src="static/img/overview/nav-side-user.png" class="img-fluid rounded border" />
</a>
</div>
</div>
</div>
<div class="d-flex align-items-center mb-3">
<i class="material-icons text-primary mr-3 h1">supervised_user_circle</i>
<h2 class="h1 mb-0">Project Management Pages</h2>
</div>
<p class="lead">
Pipeline makes building project management interfaces simple with pages for teams, projects, tasks, kanban boards and more.
</p>
App PagesUtility Pages
</section>
</div>
</div>
</div>
</div>
{%endblock%}
_navbar.html
[![<div class="layout layout-nav-side">
<div class="navbar navbar-expand-lg bg-dark navbar-dark sticky-top">
<a class="navbar-brand" href="index.html">
<img alt="Pipeline" src="static/img/logo.svg" />
</a>
<div class="d-flex align-items-center">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-controls="navbar-collapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="d-block d-lg-none ml-2">
<div class="dropdown">
<a href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img alt="Image" src="static/img/avatar-male-4.jpg" class="avatar" />
</a>
<div class="dropdown-menu dropdown-menu-right">
Profile
Account Settings
Log Out
</div>
</div>
</div>
</div>
<div class="collapse navbar-collapse flex-column" id="navbar-collapse">
<ul class="navbar-nav d-lg-block">
<li class="nav-item">
<a class="nav-link" href="index.html">Overview</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-2" aria-controls="submenu-2">Pages</a>
<div id="submenu-2" class="collapse">
<ul class="nav nav-small flex-column">
<li class="nav-item">
<a class="nav-link" href="pages-app.html">App Pages</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pages-utility.html">Utility Pages</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pages-layouts.html">Layouts</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-3" aria-controls="submenu-3">Components</a>
<div id="submenu-3" class="collapse">
<ul class="nav nav-small flex-column">
<li class="nav-item">
<a class="nav-link" href="components-bootstrap.html">Bootstrap</a>
</li>
<li class="nav-item">
<a class="nav-link" href="components-pipeline.html">Pipeline</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="documentation/index.html">Documentation</a>
</li>
<li class="nav-item">
<a class="nav-link" href="documentation/changelog.html">Changelog</a>
</li>
</ul>
<hr>
<div class="d-none d-lg-block w-100">
<span class="text-small text-muted">Quick Links</span>
<ul class="nav nav-small flex-column mt-2">
<li class="nav-item">
Team Overview
</li>
<li class="nav-item">
Project
</li>
<li class="nav-item">
Single Task
</li>
<li class="nav-item">
Kanban Board
</li>
</ul>
<hr>
</div>
<div>
<form>
<div class="input-group input-group-dark input-group-round">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="material-icons">search</i>
</span>
</div>
<input type="search" class="form-control form-control-dark" placeholder="Search" aria-label="Search app" aria-describedby="search-app">
</div>
</form>
<div class="dropdown mt-2">
<button class="btn btn-primary btn-block dropdown-toggle" type="button" id="newContentButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Add New
</button>
<div class="dropdown-menu" aria-labelledby="newContentButton">
<a class="dropdown-item" href="#">Team</a>
<a class="dropdown-item" href="#">Project</a>
<a class="dropdown-item" href="#">Task</a>
</div>
</div>
</div>
</div>
<div class="d-none d-lg-block">
<div class="dropup">
<a href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img alt="Image" src="static/img/avatar-male-4.jpg" class="avatar" />
</a>
<div class="dropdown-menu">
Profile
Account Settings
Log Out
</div>
</div>
</div>
</div>
</div>
Divs by default have display: block which makes them positioned on top of one another.
In order to position them properly you could either:
Wrap them in a container div and use flexbox for positioning (Bootstrap row and columns),
Use floats (Bootstrap float classes)
Below is an example of using floats to position divs.
.container {
width: 500px;
}
.nav {
float: left;
width: 30%;
height: 200px;
background-color: red;
}
.content {
float: left;
width: 70%;
height: 200px;
background-color: blue;
}
.clear {
clear: both;
}
<div class="container">
<div class="nav">
</div>
<div class="content">
</div>
<div class="clear">
</div>
</div>