<div class="fixed-top">
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h5 class="text-white h4">Collapsed content</h5>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
</div>
<nav class="navbar navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-
expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
</div>
Hi so i got this from boostrap 4.5 navbar. My issue is that when i click on the menu picture it drops to the bottom left corner upon collapse. I want it to stay on the top left corner how do i do that? thanks
place the id=navbarToggleExternalContent after the button navbar-toggler - like in the snippet below:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div class="fixed-top">
<nav class="navbar navbar-dark navbar-expand-lg bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria- expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar content -->
<div class="collapse navbar-collapse" id="navbarToggleExternalContent">
<ul class="navbar-nav">
<div class="bg-dark p-4">
<h5 class="text-white h4">Collapsed content</h5>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
</ul>
</div>
</nav>
</div>
Related
I'm implementing a navbar mega menu from mdbootstrap.
I want the navbar and it's sub-menus not to be transparent.
I changed the code as following:
<!-- Navbar -->
<nav class="navbar navbar-expand-lg">
<!-- div container -->
<div class="container">
<!-- Navbar brand -->
<a class="navbar-brand text-capitalize" href="{% url 'index' %}">
<img src="{%static '/img/logo.png' %}" style="width: 120px; height: 120px;" class="logo" alt="">
</a>
<!-- Collapse button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent2"
aria-controls="navbarSupportedContent2" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse" id="navbarSupportedContent2">
<!-- some menu items -->
</div>
<!-- Collapsible content -->
/div>
<!-- div container -->
</nav>
<!-- Navbar -->
I have deleted bg-light property and also added this piece:
.navbar{
background-color: red;
}
But the navbar is still semi-transparent.
I want both the navbar and it's sub-menus to be solid.
how to do this?
Add navbar-dark to nav tag
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand text-uppercase" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent2"
aria-controls="navbarSupportedContent2" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent2">
</div>
</nav>
I have a navigation bar component made with vue.js. I am styling the app with bootstrap so I have included bootstrap in the main html file.
I have built the navbar component and added the styling that I want but when I add the shadow or shadow-lg class the shadow does not appear at all. I have tried increasing the z-index of the navbar but the shadow still does not show.
<template>
<div class="row">
<div class="col">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark navbar-rounded shadow-lg" style="z-index: 100;">
<a class="navbar-brand" href="/">{{ logo_text }}</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
<li class="nav-item"
v-for="(item, index) in links"
:key="index"
>
<a :href="item.href" class="nav-link">{{ item.text }}</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</template>
Note that the class navbar-rounded is a custom class I added with the styling
.navbar-rounded {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
How would I get the shadow to display correctly?
Shadow has been applied properly. There is no issue on applying styles.
I have created a JSFiddle, where I converted navbar to a lighter version. There you can see shadow is applied. The reason is due to dark theme applied, you can't see a color seperation between navbar background color and it's shadow color.
Clarify this issue by applying shadow, shadow-sm and shadow-lg classes on nav element.
Hope this will help to fix your issue.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="row">
<div class="col">
<nav class="navbar navbar-expand-lg navbar-light bg-light navbar-rounded shadow" style="z-index: 100;">
<a class="navbar-brand" href="/">{{ logo_text }}</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
<li class="nav-item"
v-for="(item, index) in links"
:key="index"
>
<a :href="item.href" class="nav-link">{{ item.text }}</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
Documentation: https://getbootstrap.com/docs/4.3/components/navbar/#external-content
Code:
<div class="pos-f-t">
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h5 class="text-white h4">Collapsed content</h5>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
</div>
<nav class="navbar navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
</div>
The default is for him to come up, but I want to leave him on the right. As?
I am trying to mimic IG's navbar at some point.
I am trying to center all of my elements: logo, search bar and avatar icon and make them all have spaces on the center of the screen like you see here:
However even though I used col-push it doesn't change the behavior of my grids:
<div class="container-fluid">
<div class="row no-gutter">
<div class="col-lg-12 no-space">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="col-lg-4">
<a class="navbar-brand white">LifeShot</a>
</div>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<div class="col-lg-4">
<input
class="form-control mr-sm-2"
type="search"
placeholder="Search"
aria-label="Search"
/>
</div>
<div class="col-lg-4">
<i class="fa fa-user-o fa-lg white" aria-hidden="true"></i>
</div>
</div>
</nav>
</div>
</div>
</div>
Here's the jsfiddle.
Any idea what am I missing here?
.body {
width: 100%;
}
.white {
color: #fff !important;
}
.no-space {
padding: 0;
margin: 0;
}
.align-center {
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row no-gutter">
<div class="col-lg-12 no-space">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="col-lg-4 col-md-4 col-sm-4">
<a class="navbar-brand white">LifeShot</a>
</div>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<div class="row no-gutter">
<div class="col-lg-6 col-md-6 col-sm-6 align-center">
<input
class="form-control mr-sm-2"
type="search"
placeholder="Search"
aria-label="Search"
/>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 align-center">
<i class="fa fa-user-o fa-lg white" aria-hidden="true"></i>
</div>
</div>
</div>
</nav>
</div>
</div>
</div>
You are doing it wrong. You should have only "col-" classes under "row".
Here you have button in between.
You should have 12 columns in total for each row.
So following should be the structure:
<div class="row">
<div class="col-2">
<div class="row">
<div class="col-6">Logo</div>
<div class="col-6">Text</div>
</div>
</div>
<div class="col-8"><!--Empty Space--></div>
<div class="col-2">
<div class="row">
<div class="col-4">icon1</div>
<div class="col-4">icon2</div>
<div class="col-4">icon3</div>
</div>
</div>
</div>
Just remove the unwanted row and container in your code. Move the mobile collapse button near the navbar. I hope this solution will be helpful.
.body {
width: 100%;
}
.white {
color: #fff !important;
}
.no-space {
padding: 0;
margin: 0;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
LifeShot
<div class="col-lg-4">
<input class="form-control" type="search" placeholder="Search" aria-label="Search" />
</div>
<div class="col-lg-4 text-md-right">
<i class="fa fa-user-o fa-lg white" aria-hidden="true"></i>
</div>
</div>
</nav>
I guess that nav as is is row at all. So you don't need to add it again. Maybe i'm wrong but this is working for me :
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="col-lg-12 col">
<div class="row">
<div class="col-lg-4 col">
Here comes logo
</div>
<div class="col-lg-4 col">
<input placeholder="Search">
</div>
<div class="col-lg-4 col text-right">
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
</div>
</nav>
You can try this much simpler way:
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark justify-content-around">
<a class="navbar-brand" href="#">LifeShot</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse flex-grow-0" id="navbarNavDropdown">
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
</form>
<ul class="navbar-nav">
<li class="nav-item">
<i class="fa fa-user-o fa-lg" aria-hidden="true" style="color: #fff;"></i>
</li>
</ul>
</div>
</nav>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
I cleared your code a little. Dont put the NavBar in a Container, just in the body tag.
Then you can change the Container widht in the navbar, to make the space between your navbar-brand and your search box smaller.
<nav class="navbar navbar-expand-lg navbar-dark bg-dark ">
<div class="container w-50">
<a class="navbar-brand white">LifeShot</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<form class="form-inline my-2 my-md-0 ml-auto">
<input
class="form-control mr-sm-2"
type="search"
placeholder="Search"
aria-label="Search"
/>
</form>
<i class="fa fa-user-o fa-lg white" aria-hidden="true"></i>
</div>
</div>
</nav>
Now you can use the fix bootstrap "width-changer-classes" like w-25,w-50,w-75 (25%, 50%, 75% width) etc. or you can write your own width class like:
.costum-w-80 {
width: 80%;
}
And now just replace custom-w-80 with w-50.
I have a scenario where I need to display a footer just like navbar(i.e; need to hide list items of ul list using some button is responsive, on click of that button need to display list items), here I am using bootstrap navbar, but instead of hamburger I need some other customized button. Is it possible?
Here is my code:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">list1</li>
<li>list2</li>
<li>list3</li>
</ul>
</div>
</div>
</nav>
Any help would be appreciated.
Thanks in Advance.
From Bootstrap documentation ... You should be able to change the icon here
https://getbootstrap.com/docs/4.0/components/navbar/
External content
Sometimes you want to use the collapse plugin to trigger hidden content elsewhere on the page. Because our plugin works on the id and data-target matching, that’s easily done!
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="pos-f-t">
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h4 class="text-white">Collapsed content</h4>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
</div>
<nav class="navbar navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
</div>