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.
Related
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>
I tried to make breadcrumb line using bootstrap and thymeleaf but it has this strange broken height in it.
like this
CODE
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
<!--<div class="collapse navbar-collapse" id="navbarSupportedContent">-->
<div class="navbar-nav container">
<ol class="breadcrumb mr-auto">
<li class="breadcrumb-item">
<a th:href="#{/account/notebooks}">
<i class="fas fa-book"></i>
Notebooks
</a>
</li>
<li class="breadcrumb-item">
<a th:href="#{'/notebook/{notebookId}/edit' (notebookId=${notebook.id})}">
<div th:text="${notebook.title}"></div>
</a>
</li>
<li class="breadcrumb-item" th:if="${currentNote} != null">
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" th:text="${currentNote.name}">
</a>
</li>
</ol>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
How to make it into a straight line?
Use flexbox for set elements in straight line.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
<!--<div class="collapse navbar-collapse" id="navbarSupportedContent">-->
<div class="navbar-nav container">
<ol class="breadcrumb mr-auto">
<li class="breadcrumb-item d-flex">
<a th:href="#{/account/notebooks}">
<i class="fas fa-book"></i>
Notebooks
</a>
</li>
<li class="breadcrumb-item d-flex">
<a th:href="#{'/notebook/{notebookId}/edit' (notebookId=${notebook.id})}">
<div th:text="${notebook.title}">Test</div>
</a>
</li>
<li class="breadcrumb-item d-flex" th:if="${currentNote} != null">
<a class="nav-link dropdown-toggle p-0" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" th:text="${currentNote.name}">Test
</a>
</li>
</ol>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
I am building a single page application for a ESP32. I thought it would be nice to have the whole site in one document since there is not much content.
I started with bootstrap 4.1.2 collapse class. It's working but unfortunately there is something I cannot turn off.
As there is always just one content shown it should not be possible to hide it with a click on the corresponding nav-link, only toggle with other content over a different nav-link should be possible.
So how do I do that?
<!doctype html>
<html lang="en">
<head>
<title>LOGO</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/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.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<!-- A vertical navbar -->
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-primary">
<div class="container justify-content-center">
<a class="navbar-brand abs " href="#">
<span class="menu-collapsed">LOGO</span>
</a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse flex-grow text-center" id="navbarNavDropdown">
<ul class="nav navbar-nav flex-fill mx-auto flex-nowrap">
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" data-target="#collapseOne, .navbar-collapse.show"
aria-expanded="true" aria-controls="collapseOne" href="#">TEST1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" data-target="#collapseTwo, .navbar-collapse.show"
aria-expanded="false" aria-controls="collapseTwo" href="#">TEST2</a>
</li>
<li class="nav-item">
<a class="nav-link" role="button" data-toggle="collapse" data-target="#collapseThree, .navbar-collapse.show"
aria-expanded="false" aria-controls="collapseThree" href="#">TEST3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa fa-cog"></i>
<span>Settings</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container" id="accordionExample">
<div class="row">
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body active">
1111111111111111111111111111111111111
</div>
</div>
</div>
<div class="row">
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
222222222222222222222222222222222222
</div>
</div>
</div>
<div class="row">
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
333333333333333333333333333333333333
</div>
</div>
</div>
</body>
</html>
just remove the 'show' class from #collapseOne - i think that would solve your issue...
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/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.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link href="./css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="./css/fontawesome.css" rel="stylesheet">
<nav class="navbar navbar-expand-md navbar-dark bg-primary">
<div class="container justify-content-center">
<a class="navbar-brand abs " href="#">
<span class="menu-collapsed">LOGO</span>
</a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse flex-grow text-center" id="navbarNavDropdown">
<ul class="nav navbar-nav flex-fill mx-auto flex-nowrap">
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" data-target="#collapseOne, .navbar-collapse.show" aria-expanded="true"
aria-controls="collapseOne" href="#">TEST1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" data-target="#collapseTwo, .navbar-collapse.show" aria-expanded="false"
aria-controls="collapseTwo" href="#">TEST2</a>
</li>
<li class="nav-item">
<a class="nav-link" role="button" data-toggle="collapse" data-target="#collapseThree, .navbar-collapse.show" aria-expanded="false"
aria-controls="collapseThree" href="#">TEST3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa fa-cog"></i>
<span>Settings</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container" id="accordionExample">
<div class="row">
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body active">
1111111111111111111111111111111111111
</div>
</div>
</div>
<div class="row">
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
222222222222222222222222222222222222
</div>
</div>
</div>
<div class="row">
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
333333333333333333333333333333333333
</div>
</div>
</div>
<script src="./js/jquery-3.3.1.slim.min.js" crossorigin="anonymous"></script>
<script src="./js/popper.min.js" crossorigin="anonymous"></script>
<script src="./js/bootstrap.min.js" crossorigin="anonymous"></script>
<script src="./js/fontawesome.js" crossorigin="anonymous"></script>
Got it going, I had to use pills with data-toggle="tab". Just the collapsed menu isn't placing all items vertical like in the first post. But that is just a little design flaw. Thanks for the help :)
<!doctype html>
<html lang="en">
<head>
<title>LOGO</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/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.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<!-- A vertical navbar -->
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-primary">
<div class="container justify-content-center">
<a class="navbar-brand abs " href="#">
<span class="menu-collapsed">LOGO</span>
</a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse flex-grow text-center" id="navbarNavDropdown">
<div class="nav nav-pills justify-content-center bg-primary" id="pills-tab" role="navigation" style="margin-top:2.5%;">
<a class="nav-item nav-link text-light active " id="pills-home-tab" data-toggle="tab" href="#pills-home"
role="tab" aria-controls="pills-home" aria-selected="true">
<p class="div" data-toggle="collapse" data-target=".navbar-collapse.show" aria-expanded="false"
aria-controls="collapseThree" href="#">Test1
</p>
</a>
<a class="nav-item nav-link text-light" id="pills-profile-tab" data-toggle="tab" href="#pills-profile"
role="tab" aria-controls="pills-profile" aria-selected="false">
<p class="div" data-toggle="collapse" data-target=".navbar-collapse.show" aria-expanded="false"
aria-controls="collapseThree" href="#">Test2
</p>
</a>
<a class="nav-item nav-link text-light" id="pillsv-contact-tab" data-toggle="tab" href="#pills-contact"
role="tab" aria-controls="pills-contact" aria-selected="false">
<p class="div" data-toggle="collapse" data-target=".navbar-collapse.show" aria-expanded="false"
aria-controls="collapseThree" href="#">Test3
</p>
</a>
</div>
</div>
</nav>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
111111111111111111111111111111111111111111
</div>
<div class="tab-pane" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
222222222222222222222222222222222222222222
</div>
<div class="tab-pane" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
333333333333333333333333333333333333333333
</div>
</div>
<footer class="fixed-bottom">
Facebook, Twitter usw Symbole
</footer>
</body>
</html>
I'm using Bootstrap v4.0.0-alpha.6 and I'm facing some issues with the navigation menu on Safari starting from 8 and down.
The logo at the left is an image and two buttons('Login', 'Sign Up') at the right are not shown on Safari, I used a live testing website for simulating Safari 6 and I inspected the element and I see that they are in the Dom and taking space in the header, But none of them is shown.
Here is a fiddle: http://jsfiddle.net/h6rc4d7g
Live preview:
.btn-red{
background: #d9534f;
color: #fff !important
}
<!-- Fontawesome 4 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap v4.0.0-alpha.6 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- tether -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.4/js/tether.min.js"></script>
<!-- Bootstrap v4.0.0-alpha.6 JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<nav class="navbar navbar-toggleable fixed-top">
<div class="container hidden-md-down">
<div class="navbar-collapse clearfix">
<a class="navbar-brand float-left" href="#">
<img class="mt-1" src="http://placehold.it/1121x171/200" width="200" alt="logo">
</a>
<div class="text-center" style="margin: 0 auto; margin-top: 5px; ">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link hiw-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link hiw-link" href="#blog">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
</ul>
</div>
<div class="float-right ml-auto" style="margin-top: 5px; ">
<ul class="navbar-nav float-right ">
<li class="nav-item">
<a class="nav-link" href="/login">Login</a>
</li>
<li class="nav-item">
<a class="btn btn-red nav-button" href="/new">Sign up</a>
</li>
</ul>
</div>
</div> <!-- .navbar-collapse -->
</div> <!-- .hidden-md-down -->
<div class="hidden-lg-up">
<a class="navbar-brand py-0 float-left mt-3" href="#">
<img style="margin-top: 7px" src="http://placehold.it/1121x171/200" width="150" alt="logo">
</a>
<a class="btn mobile_header_button float-left btn-red mt-3" href="/new">Sign up</a>
<a class="navbar-toggle navbar-toggler-right gray-light float-right" data-toggle="collapse-side" data-target=".side-collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="fa fa-bars"></span>
</a>
</div> <!-- .hidden-lg-up -->
</nav> <!-- .navbar -->
What is causing this issue and how to solve it?!
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>