Navbar Burger (Dropdown) pushes content down? - html

When my navbar collapses the burger menu shows up. Whenever I click on it all the content below gets pushed down and leaves me with a messed up homepage.
My Navbar:
<section class="nav-bar">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"><img src="WildfireGraphic1.png" class="rounded float-left" alt="icon1"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Film</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Info</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Über uns</a>
</li>
</ul>
</div>
</nav>
</section>
My CSS:
body{
text-align: justify !important;
}
#nav-bar{
position: fixed;
left: 0px;
top: 0px;
width: 100px;
}
.navbar-brand img{
height: 40px;
padding-left: 30;
}
.navbar-nav li{
padding: 0 10px;
}
.navbar-nav li a{
float: right;
text-align: left;
}
.nav-bar ul li a:hover{
color: #000000!important;
}
.navbar{
background: #fff;
}
.navbar-toggler{
border: none!important;
}
.nav-link{
color: #555!important;
font-weight: 600;
font-size: 16px;
}
I have tried using the Z-Index method but no luck so far. Maybe I did something wrong?
https://jsfiddle.net/Lqzs1jdw/8/
Thanks in advance.

You have just make a typo, change the # to . will fix the issue
Example:
.nav-bar{
position: fixed;
width: 100%;
}
https://jsfiddle.net/aslamb/sfoavupd/2/

Related

how to make Navigation or top search bar like Myntra

am trying to making a simple UI in their I stuck, I want full width my input type but its showing short, can anyone tell me how can I make full it, and also I want responsive in mobile and desktop mode
Navbar.js
This is the navbar.js file where I wrote my UI part
import React from 'react'
import './Navbar.css';
import SearchOutlinedIcon from '#material-ui/icons/SearchOutlined';
const Navbar = () => {
return (
<nav class="navbar navbar-expand-lg navbar-light bg-light shadow-sm p-3 bg-white ">
<div className="container">
<a class="navbar-brand" href=""><img src="https://imgeng.jagran.com/images/2021/jan/Myntra-805x530-1-700x4611611985286383.jpg" alt="Mynta" className="coco mr-5" /></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 ">
<a class="nav-link mr-2" href="#">MEN</a>
</li>
<li class="nav-item">
<a class="nav-link mr-2" href="#">WOMEN</a>
</li>
<li class="nav-item">
<a class="nav-link mr-2" href="#">KIDS</a>
</li>
<li class="nav-item">
<a class="nav-link mr-2" href="#">HOME & LIVING</a>
</li>
<li class="nav-item">
<a class="nav-link mr-2" href="#">OFFERS</a>
</li>
</ul>
{/* <div className='sidebar_search'>
<div className='sidebar_searchContainer'>
<SearchOutlinedIcon />
<input type='text' placeholder='Search for products brands and more' />
</div>
</div> */}
<div class="form-group has-search">
<span class="fa fa-search form-control-feedback"></span>
<input type="text" class="form-control" placeholder="Search for Products Branda and More" />
</div>
</div>
</div>
</nav>
)
}
export default Navbar;
style.css
This is the style.css file where I wrote some css
#media (min-width: 1200px) {
.container{
max-width: 1400px;
}
}
.coco{
width: 60px;
}
.nav-item{
font-weight: bold;
color: black;
}
.nav-item, .nav-link {
font-size: 17px;
color: black;
}
.has-search .form-control {
padding-left: 2.375rem;
}
.has-search .form-control-feedback {
position: absolute;
z-index: 2;
display: block;
width: 2.375rem;
height: 2.375rem;
line-height: 2.375rem;
text-align: center;
pointer-events: none;
color: #aaa;
}
input[type="text"] {
outline: none;
box-shadow:none !important;
border:1px solid #ccc !important;
}
/* .sidebar_search{
display: flex;
align-items: center;
height: 39px;
padding: 10px;
background-color: #f0f0f0;
margin-right: 100px;
width: 100%;
}
.sidebar_searchContainer > input {
border: none;
margin-left: 10px;
outline: none;
background-color:#f0f0f0;
} */
you could try this code:
CSS (not big changes)
#media (min-width: 1200px) {
.container{
max-width: 1400px;
}
}
.coco{
width: 60px;
/*border: 1px solid blue;*/
}
.nav-item{
font-weight: bold;
color: black;
}
.nav-item, .nav-link {
font-size: 17px;
color: black;
}
.has-search .form-control {
padding-left: 2.375rem;
}
.has-search .form-control-feedback {
position: absolute;
z-index: 2;
display: block;
width: 2.375rem;
height: 2.375rem;
line-height: 2.375rem;
text-align: center;
pointer-events: none;
color: #aaa;
}
input[type="text"] {
outline: none;
box-shadow:none !important;
border:1px solid #ccc !important;
}
HTML (some changes)
<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-light bg-light shadow-sm p-3 bg-white ">
<a class="navbar-brand" href="">
<img src="https://imgeng.jagran.com/images/2021/jan/Myntra-805x530-1-700x4611611985286383.jpg" alt="Mynta" class="coco mr-5" />
</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 flex-grow-1">
<li class="nav-item ">
<a class="nav-link mr-2" href="#">MEN</a>
</li>
<li class="nav-item">
<a class="nav-link mr-2" href="#">WOMEN</a>
</li>
<li class="nav-item">
<a class="nav-link mr-2" href="#">KIDS</a>
</li>
<li class="nav-item">
<a class="nav-link mr-2" href="#">HOME & LIVING</a>
</li>
<li class="nav-item">
<a class="nav-link mr-2" href="#">OFFERS</a>
</li>
</ul>
<div class="form-group has-search flex-grow-1">
<span class="fa fa-search form-control-feedback"></span>
<input type="text" class="form-control" placeholder="Search for Products Branda and More" />
</div>
</div>
</nav>
</div>
Explanation
The changes made are as follows:
in the tag with the class coco, I have renamed the class from
classname to class.
I have included the container-fluid which requires bootstrap 4 to make the menu wide. Otherwise there was no space to grow and it all came together. finally
I have applied flex, to give similar entities to the menu and to the search field. You can do this by adding the "flex-grow-1" class to each of the tags of both entities. If you want one to be greater than the other, you can remove that class from a tag and see what happens.
You can see this code running on pure css + html in the next link
Importante notice: I´m not familiar with react. So I changed from react code to pure thml + css code. But I´m assuming that you can understand as well.
Good luck!

Make dropdown menu floating in bootstrap

I'm trying to create a quite complex navbar using bootstrap. I wonder wether it is possible to make the dropdown menu floating, so it does not make the navbar big and ugly. The picture is quite self-explanatory:
Code:
.menu-item-seleccionado {
color: white !important;
background-color: grey;
padding: 10px !important;
}
.menu-item-sin-seleccionar {
color: white !important;
padding: 10px !important;
}
.titulo-menu {
margin-left: 1%;
color: white !important;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
<nav class="navbar navbar-expand-lg sticky-top navbar-light bg-dark">
<div class="container-fluid" style="margin: 0; width: 100%;">
<div class="flex-izquierda">
<a class="navbar-brand titulo-menu" href="inicio.html">Resano Innovación</a>
</div>
<button class="navbar-toggler bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#bar"
aria-controls="bar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="flex-derecha collapse navbar-collapse" id="bar">
<ul class="navbar-nav me-auto mb-2 mb-lg-0" style="margin: 0 !important; ">
<li class="nav-item"><a class="nav-link active rounded menu-item-seleccionado" aria-current="page" href="inicio.html">Inicio</a></li>
<li class="nav-item"><a class="nav-link menu-item-sin-seleccionar" href="ubicacion.html">Ubicación</a></li>
<li class="nav-item"><a class="nav-link menu-item-sin-seleccionar" href="contacto.html">Contacto</a></li>
<li class="nav-item"><a class="nav-link menu-item-sin-seleccionar" href="certificado.html">Certificado de calidad</a></li>
<!-- Imagen para cambiar el idioma -->
<li class="nav-item"><a class="navbar-brand" href="../en/inicio.html">
<img src="../img/eng.png" style="max-width: 100%; max-height: 40px; padding-left: 10px;" alt="">
</a>
</li>
</ul>
</div>
</div>
</nav>
.menu-item-seleccionado {
color: white !important;
background-color: grey;
padding: 10px !important;
}
.menu-item-sin-seleccionar {
color: white !important;
padding: 10px !important;
}
.titulo-menu {
margin-left: 1%;
color: white !important;
}
#media screen and (max-width: 736px) {
.navbar-expand-lg .navbar-collapse {
flex-basis: auto;
}
.flex-derecha {
width: 250px;
position: absolute;
height: auto;
background: black;
top: 50px;
right: 0;
}
.collapse:not(.show) {
display: none !important;
}
.nav-item
{
width:250px;
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
<nav class="navbar navbar-expand-lg sticky-top navbar-light bg-dark">
<div class="container-fluid" style="margin: 0; width: 100%;">
<div class="flex-izquierda">
<a class="navbar-brand titulo-menu" href="inicio.html">Resano Innovación</a>
</div>
<button class="navbar-toggler bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#bar"
aria-controls="bar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="flex-derecha collapse navbar-collapse" id="bar">
<ul class="navbar-nav me-auto mb-2 mb-lg-0" style="margin: 0 !important; ">
<li class="nav-item"><a class="nav-link active rounded menu-item-seleccionado" aria-current="page" href="inicio.html">Inicio</a></li>
<li class="nav-item"><a class="nav-link menu-item-sin-seleccionar" href="ubicacion.html">Ubicación</a></li>
<li class="nav-item"><a class="nav-link menu-item-sin-seleccionar" href="contacto.html">Contacto</a></li>
<li class="nav-item"><a class="nav-link menu-item-sin-seleccionar" href="certificado.html">Certificado de calidad</a></li>
<!-- Imagen para cambiar el idioma -->
<li class="nav-item"><a class="navbar-brand" href="../en/inicio.html">
<img src="../img/eng.png" style="max-width: 100%; max-height: 40px; padding-left: 10px;" alt="">
</a>
</li>
</ul>
</div>
</div>
</nav>

Bootstrap navbar-expand-md height increasing #768px - 992px

I'm having a slight problem with the navbar-expand-md. From 768px to 992px the navbar height increases and the navbar-brand gets pushed a little down. It's a minor issue, but it's really bugging me and I can't seem to solve this problem. My skills are not to proficient so I'm at the end of my wit and would appreciate any help. Thanks in advance - happy holidays, stay healthy.
The issue described above can be seen here:
https://jsfiddle.net/w3do6z74/
Navbar-code:
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">brandname</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#"><img src="imgs/category_bar_history.png" class="category-bar">History</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><img src="imgs/category_bar_nature.png" class="category-bar">Nature</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><img src="imgs/category_bar_travel.png" class="category-bar">Travel & Food</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><img src="imgs/category_bar_arts.png" class="category-bar">Arts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><img src="imgs/category_bar_science.png" class="category-bar">Science</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><img src="imgs/category_bar_crime.png" class="category-bar">Crime</a>
</li>
<li class="nav-item">
<a class="nav-link nav-custom-link" href="#">HYPE</a>
</li>
</ul>
</div>
</div>
</nav>
Custom-Css:
.nav-custom-link {
font-weight: bold;
font-style: italic;
}
.navbar {
border-bottom: 1px solid black;
margin-bottom: 12px;
padding-top: 5px;
padding-bottom: 5px;
}
.navbar-brand {
font-family: 'Audiowide', cursive;
}
.category-bar {
padding-right: 4px;
}
.navbar-toggler {
padding: 0.2rem 0.55rem;
font-size: 1.1rem;
}
.navbar-toggler:focus {
box-shadow: 0 0 0 0;
}
If you check the CSS in dev tools, you can see that one of the things changing on the ul element is the bottom margin. It's 0.5rem by default and 0 if the minimum width is larger than 992px:
#media (min-width: 768px)
.navbar-expand-md .navbar-nav {
flex-direction: row;
}
.mb-2 {
margin-bottom: .5rem!important;
}
#media (min-width: 992px)
.mb-lg-0 {
margin-bottom: 0!important;
}
It's because you added mb-2 and mb-lg-0 classes to your ul element:
<ul class="navbar-nav me-auto mb-2 mb-lg-0"></ul>
To fix this, you can add mb-0 and remove mb-lg-0:
<ul class="navbar-nav me-auto mb-0"></ul>

Underlining the first 5 elements in css

I am beginner webdeveloper. I use my project in Bootstrap 4.
I have menu with underline animation. It's work fine.
I have this code (menu and css):
.navbar-light .navbar-nav .nav-link {
color: #ffffff;
font-size: 1rem;
font-family: "Now Medium";
margin-top: 7px;
}
#media (min-width: 994px) {
.navbar-light .navbar-nav .nav-link {
color: #ffffff;
font-size: 1rem;
font-family: "Now Medium";
margin-top: 7px;
display: inline;
position: relative;
overflow: hidden;
}
.navbar-light .navbar-nav .nav-link:after {
content: "";
position: absolute;
z-index: -1;
right: 0;
width: 0;
bottom: -5px;
background: #0ad3f1;
height: 2px;
transition-property: width;
transition-duration: 0.2s;
transition-timing-function: ease-out;
}
.navbar-light .navbar-nav .nav-link:hover:after,
.navbar-light .navbar-nav .nav-link:focus:after,
.navbar-light .navbar-nav .nav-link:active:after {
left: 0;
right: auto;
width: 100%;
}
}
<nav class="navbar navbar-expand-lg text-body px-md-0 pb-md-0 navbar-light w-100 pt-lg-0">
<a class="navbar-brand" href="/">
<img src="images/logo.svg" class="brand-logo pb-2 pt-3 pt-md-0" title="logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarmenu"
aria-controls="navbarmenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</button>
<div class="collapse navbar-collapse" id="navbarmenu">
<ul class="navbar-nav">
<li class="nav-item d-block d-lg-none d-xl-block text-center">
<a class="nav-link active" href="#">Start</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="#">5</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="#">4</a>
</li>
<li class="nav-item text-center">
<a class="nav-link nav-link-selected" href="#">3 </a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="#">2</a>
</li>
<li class="nav-item mx-xl-4 mb-2 mb-md-0 text-center">
<a class="nav-link order-visit" href="#">1</a>
</li>
<li class="nav-item text-center text-lg-right">
123
</li>
<li class="nav-item text-center d-inline-block d-lg-none language-box2">
abc
</li>
</ul>
</div>
</nav>
It's work fine, but I want underline animation for only first 4 elements in this menu.
I would like the current functionality to remain the same, but only for the first 4 items of my menu
How can I make it?
Please help me.
You haven't specified which selectors you want to emphasize, but I'm guessing it's navbar-nav li. I'll write you the rules for how to style the first 4 elements of many:
.navbar-nav li:nth-child(1),
.navbar-nav li:nth-child(2),
.navbar-nav li:nth-child(3),
.navbar-nav li:nth-child(4) {
/*here you specify the styles you need for underlining*/
}

Twitter bootstrap padding not working

I am trying to position my content under my navbar and when I add the padding-top: 60px; it works but pushes the navbar down. I also need the background to be at the top of the page behind the navbar. How can I fix this? The content for the page including the navbar AND background are pushed down but I need the navbar and the background at the top of the page and only the content pushed down.
body {
padding-top: 65px;
margin: 0;
width: 100%;
}
#header {
background-color: grey;
opacity: .7;
width: 100%;
height: 80px;
position: fixed;
z-index: 1000;
}
#logo a {
font-size: 30px;
font-weight: bold;
color: rgb(255, 255, 255);
font-family: 'DIN 1451 Std Engschrift';
margin-top: 5px;
}
#slide1 {
width: 100%;
background: url('sunrise.png') 50% 0 no-repeat fixed;
background-size: cover;
color: #ffffff;
height: 700px;
margin: 0;
padding: 40px 0 260px 0;
}
.content {
margin: 0 auto;
width: 1000px;
}
<div id="header">
<div class="content">
<nav id="nav" class="navbar navbar-expand-lg">
<div id="logo">
<a class="navbar-brand" href="#">Navbar Logo</a>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="logo">
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<a class="nav-item nav-link" href="#slide3">How it Works</a>
<a class="nav-item nav-link" href="#slide4">For Landlords</a>
<a class="nav-item nav-link" href="#">F.A.Q</a>
<a class="nav-item nav-link" href="#pricingslide">Pricing</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<body>
<div id="slide1">
<div class="content">
<h1 id="headline">Use Your Rent To Buy A Home</h1>
<p id="subtitle">Build a credit history, create a down payment,<br> all by just making rent payments thru LikeHome</p>
<h3>Find out how soon you can become a homeowner?</h3>
<%= render '_how_much_buying_form.html.erb' %>
</div>
</div>
</body>
</html>
Do this work for you?
body {
margin: 0;
width: 100%;
}
#slide1 {
background: url('http://res.cloudinary.com/sayob/image/upload/v1526907328/483257_vwhhfw.jpg') 50% 0 no-repeat fixed;
background-size: cover;
color: #ffffff;
height: 700px;
padding: 40px;
margin-top: 20px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<nav id="nav" class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div id="logo">
<a class="navbar-brand" href="#">Navbar Logo</a>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#slide3">How it Works</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#slide4">For Landlords</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">F.A.Q</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pricingslide">Pricing</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid" id="slide1">
<h1 id="headline">Use Your Rent To Buy A Home</h1>
<p id="subtitle">Build a credit history, create a down payment,<br> all by just making rent payments thru LikeHome</p>
<h3>Find out how soon you can become a homeowner?</h3>
</div>
First of all you need to correct the HTML markups. All html contents must be inside tag. Wrap the elements in a body tag, and create another div or section for contents followed by the header. And give padding to that div.