Why is my navbar text not on the same line for the "front end web developer" and my pages text. How can I make it appear on the same line?
As you can see in the screenshot, it currently looks like this https://ibb.co/jkd0LS. I want the text to be all on the same line.
jQuery(document).ready(function($) {
$(document).on("scroll", function() {
const features_top = $(".features-icons").position().top;
const top_of_window = $(window).scrollTop();
if (top_of_window >= features_top) {
$(".navbar").show();
} else {
$(".navbar").hide();
}
});
});
.navbar {
border-bottom: 0.04rem solid #111;
background-color: ;
display: none;
}
nav ul li a {
color: rgb(65, 47, 47);
font-family: Montserrat, Helvetica, Arial, sans-serif;
font-size: 0.9rem;
text-transform: uppercase;
}
nav ul li a:hover {
text-decoration: underline;
color: #000;
}
.abs-center-x {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Navigation bar -->
<nav class="navbar scrolled-nav navbar-expand-md fixed-top navbar-dark bg-dark">
<a class="navbar-brand" href="#">Front End Web Developer</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar7">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-stretch" id="navbar7">
<ul class="navbar-nav ml-auto">
<li class="nav-item active"> <a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#features-icons">Expectations</a>
</li>
<li class="nav-item active"> <a class="nav-link" href="#testimonials">Testimonials</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#about">Design</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
Here is all my website code, I uploaded it to GitHub
The display: flex !important; on your #navbar7 is making it go full width. You could change it to display: inline-flex; but it probably just easier to make it float: right;.
#navbar7 {
float: right;
}
See this fiddle for an example (at a wider viewport than the SO code sample).
jQuery(document).ready(function($) {
$(document).on("scroll", function() {
const features_top = $(".features-icons").position().top;
const top_of_window = $(window).scrollTop();
if (top_of_window >= features_top) {
$(".navbar").show();
} else {
$(".navbar").hide();
}
});
});
body { height: 200vh; }
#navbar7 {
float: right;
}
.navbar {
border-bottom: 0.04rem solid #111;
background-color: ;
display: none;
}
nav ul li a {
color: rgb(65, 47, 47);
font-family: Montserrat, Helvetica, Arial, sans-serif;
font-size: 0.9rem;
text-transform: uppercase;
}
nav ul li a:hover {
text-decoration: underline;
color: #000;
}
.abs-center-x {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Navigation bar -->
<nav class="navbar scrolled-nav navbar-expand-md fixed-top navbar-dark bg-dark">
<a class="navbar-brand" href="#">Front End Web Developer</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar7">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-stretch" id="navbar7">
<ul class="navbar-nav ml-auto">
<li class="nav-item active"> <a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#features-icons">Expectations</a>
</li>
<li class="nav-item active"> <a class="nav-link" href="#testimonials">Testimonials</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#about">Design</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
<section class="features-icons bg-light" id="features-icons">
<div class="container">
<h2 class="mb-5 text-center">What You Can Expect</h2>
<hr class="black">
<div class="row">
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="far fa-lightbulb m-auto text-primary"></i>
</div>
<h3 class="text-center">Ideas</h3>
<p class="lead mb-0 text-justify">I collaborate with clients and peers to nurture and transform ideas into well thought out design specs. After all, that's where the majority of amazing user experiences start.</p>
</div>
</div>
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="fa fa-magic m-auto text-primary"></i>
</div>
<h3 class="text-center">UX/UI</h3>
<p class="lead mb-0 text-justify">I sketch and wireframe interfaces focusing on content structure, intuitive UI patterns and simple interactions. I'm a minimalist who truly believes that less is more.</p>
</div>
</div>
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="fas fa-code m-auto text-primary"></i>
</div>
<h3 class="text-center">Coding</h3>
<p class="lead mb-0 text-justify">I design in the browser with HTML(5), CSS(3) and a touch of JavaScript. I love coding things from scratch, but I can work with front-end frameworks like Bootstrap too.</p>
</div>
</div>
</div>
</div>
</section>
Related
I don't know why, when I declare a border shape different from square the edges are cut:
Here's the html template:
<template>
<div class="navbar-container rounded-pill">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 mx-auto">
<li class="nav-item text-center">
<a class="nav-link" href="#">111</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="#">222</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="#">333</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="#">444</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</template>
and heres the css:
<style scoped>
#import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
.navbar-container {
box-sizing: border-box;
margin: 0.5rem;
height: 100%;
width:60%;
border: 2px solid red;
margin-left: 20%;
background-color: transparent;
}
nav {
background-color: white !important;
font-size: 1.3rem !important;
}
nav ul li a {
padding-inline: 1rem !important;
}
</style>
I want a pill-rounded shape of the navbar, when the shape is square, everthing works fine, i just want to change and i couldnt though bootstrap classes and css border radius
Try to also set rounded-pill on navbar class, or you can set the same border-radius to navbar-container and navbar classes without rounded-pill:
new Vue({
el: '#demo',
})
.navbar-container {
box-sizing: border-box;
margin: 0.5rem;
height: 100%;
width: 60%;
border: 2px solid red;
margin-left: 20%;
background-color: transparent;
border-radius: 1em;
}
.navbar {
border-radius: 1em;
}
nav {
background-color: white !important;
font-size: 1.3rem !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div id="demo">
<div class="navbar-container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid ">
<a class="navbar-brand" href="#"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 mx-auto">
<li class="nav-item text-center">
<a class="nav-link" href="#">111</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="#">222</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="#">333</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="#">444</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
i'm just learning about front end. i have a problem to make an overlay navigation bar instead of dropdown menu when it reach extra small page. so this is what i've done:
function openNav() {
document.getElementById("navbarSupportedContent").style.height = "100%";
}
function closeNav() {
document.getElementById("navbarSupportedContent").style.height = "0%";
}
#navbarSupportedContent {
height: 0;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
#overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
#navbarSupportedContent a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" onclick="openNav()">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
×
<ul class="navbar-nav ml-auto" id="overlay-content">
<li class="nav-item pr-5">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item pr-5">
<a class="nav-link" href="#">Products</a>
</li>
<li class="nav-item pr-5">
<a class="nav-link" href="#">Contacts</a>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
when i try to hit the button when it reach extra small, the overlay goes down but it doesn't reach a hundred percent page and it suddenly goes up again. does anyone can help me ?
thanks in advance !
This is happening because you are mixing up Bootstrap core functions and your customs.
Simply remove the Collapse classes of Bootstrap, since you already write your javascript code to achieve what you need.
Add this line of CSS:
#media (min-width: 992px) {
.navbar-expand-lg .navbar-toggler {
display: block;
}
}
Since Bootstrap 4 Media Queries will hide an element matching that class for a screen bigger than 992px.
And then remove all the collapse-related class from your HTML:
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<button class="navbar-toggler" type="button" onclick="openNav()">
<span class="navbar-toggler-icon"></span>
</button>
<div class="" id="navbarSupportedContent">
×
<ul class="navbar-nav ml-auto" id="overlay-content">
<li class="nav-item pr-5">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item pr-5">
<a class="nav-link" href="#">Products</a>
</li>
<li class="nav-item pr-5">
<a class="nav-link" href="#">Contacts</a>
</li>
</ul>
</div>
</nav>
Here's a live working pen: https://codepen.io/alezuc/pen/dyYGobJ
Hope this helps!
I'm currently having some issues with my navbar. Right now it looks like image one but I want to make it look like image 2. How would I do that? Is it something on CSS that I have to add?
/* Nav Bar*/
.navbar-brand{
height: 3.5rem;
}
.navbar-nav li {
padding-right: 0.1rem;
}
.nav-link {
font-size: 1.1rem;
font-weight: 500;
}
.nav-item:hover {
border-bottom: 1px solid #FF7200;
}
.nav
{
}
<body>
<!--Navigation-->
<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
<div class="container-fluid">
<img class="navbar-brand" src="../img/IMG_0537.PNG" alt="KAJ Construction Logo"/>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#section-Services" >Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section-Gallery" >Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section-Contact" >Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
How it currently looks when services link is clicked
How I want it to look like
Add some built-in bootstrap margin and padding like mt-3 (mt means margin-top ) use p-2 (padding from every side) 2 and 3 defines 2rem or 3rem use this it will fix
Since your header is position: fixed, you need to give the content of your page a margin-top equal to its height:
/* Nav Bar*/
.navbar-brand{
height: 3.5rem;
}
.navbar-nav li {
padding-right: 0.1rem;
}
.nav-link {
font-size: 1.1rem;
font-weight: 500;
}
.nav-item:hover {
border-bottom: 1px solid #FF7200;
}
main{
margin-top: 72px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<!--Navigation-->
<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
<div class="container-fluid">
<img class="navbar-brand" src="http://placekitten.com/200/200" alt="KAJ Construction Logo"/>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#section-Services" >Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section-Gallery" >Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section-Contact" >Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
<main>
<h1>Our Services</h1>
</main>
I made Bootstrap Navbar logo in the middle. Here is a picture of the result:
however i have 1 issue:
when i resize the browser, the nav links seems to overlap on each other.
what im looking for is when i resize the browser the links remain relative to each other and not overlap until it collapses in bootstrap toggle button. What would be the solution here?
here is HTML and CSS
html,
body {
height: 100%;
width: 100%;
font-family: 'Arial', 'Poppins', sans-serif;
background-color: #2d2d2d;
margin: 0;
}
.navbar {
width: 100%;
z-index: 999;
background: #2d2d2d;
;
margin-top: 0;
padding: 2em;
/* display: flex; */
}
.navbar .nav-link:hover {
color: rgba(255, 185, 197, 0.986) !important;
}
.navbar-brand {
transform: translateX(-50%);
left: 50%;
top: .1%;
position: absolute;
}
.navbar-nav li {
padding-right: 40px;
font-family: 'Myriad Pro';
font-weight: bold;
/* display: inline-block; */
}
#mt-nav-left {
position: absolute;
transform: translateX(60%);
right: 60%;
}
#mt-nav-right {
position: absolute;
transform: translateX(-65%);
left: 65%;
}
#banner {
overflow: auto;
z-index: 998;
}
#banner img {
width: 100%;
object-fit: cover;
}
#media (max-width: 1024px) {
#mt-nav-right {
position: static;
}
}
#media (max-width: 991px) {
#mt-nav-left {
position: relative;
}
#mt-nav-right {
position: relative;
}
}
<nav class="navbar navbar-expand-lg navbar-dark sticky-top">
<button class="navbar-toggler ml-auto custom-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="toggle">
<i class="fas fa-bars" style="font-size: 21px;"></i>
</span>
</button>
<a class="navbar-brand" href="index.html">
<img class="img-responsive" src="img/logo.png" width="85px" height="85px" class="d-inline-block align-top">
</a>
</div>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="nav navbar-nav ml-auto" id="mt-nav-left">
<li class="nav-item" id="mt-navbar-link">
<a class="nav-link scroll" href="index.html">HOME <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item" id="mt-navbar-link">
<a class="nav-link scroll" href="#">ABOUT</a>
</li>
</ul>
<ul class="nav navbar-nav ml-auto" id="mt-nav-right">
<li class="nav-item" id="mt-navbar-link">
<a class="nav-link scroll" href="#">CONTACT</a>
</li>
<li class="nav-item" id="mt-navbar-link">
<a class="nav-link scroll" href="#">VACANCIES</a>
</li>
</ul>
</div>
</nav>
You can use flex-box to solve it. The idea is to place an empty box between two lists, with the following properties
flex-shrink: 0;
flex-basis: 100px //(not less then the width of your logo);
Look at the snippet that I made.
.navbar-brand {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.menu {
width: 100%;
}
.menu .navbar-nav {
flex-grow: 1;
}
/*
THIS CLASS PREVENTS OVERLAPING
*/
.menu .separator {
flex-grow: 1;
flex-shrink: 0;
flex-basis: 100px;
max-width: 250px;
background: orange;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</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">
<div class="d-flex menu">
<ul class="navbar-nav mr-auto justify-content-end">
<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="#">Link</a>
</li>
</ul>
<!-- Box that prevents overlaping -->
<div class="separator">
</div>
<ul class="navbar-nav mr-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="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>
This is my approach for a navbar with your specifications using Bootstrap 4.
1) There are two navbars-collapse items, the first one with items justified to the end, the second one with the default items justified to start (we will call these A and C respectively).
2) The brand (called B) will be centered using the class mx-auto, the effect of overflowing the navbar is approached using next style (only on not collapsed mode):
#media (min-width: 768px) {
.navbar {
max-height: 75px;
}
.navbar-brand {
bottom: -30px;
position: relative;
}
}
3) We manage the order of the items (A, B and C) using Order classes, on small screen devices the order will be B -> A -> C, on large screen devices will be A -> B -> C. We also use the Spacing utilities p classes for add some padding between items.
This is just my idea, you can check next example (on full screen mode) and play with the browser's width. I hope this helps you...
.navbar {
z-index: 999;
background: #2d2d2d;
}
.navbar .nav-link:hover {
color: rgba(255, 185, 197, 0.986) !important;
}
.navbar-nav li {
font-family: 'Myriad Pro';
font-weight: bold;
}
#media (min-width: 768px) {
.navbar {
max-height: 75px;
}
.navbar-brand {
bottom: -30px;
position: relative;
}
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns" crossorigin="anonymous">
<nav class="navbar navbar-expand-md navbar-dark sticky-top w-100">
<button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target=".dual-nav">
<span class="toggle">
<i class="fas fa-bars" style="font-size:21px;"></i>
</span>
</button>
<div class="navbar-collapse collapse dual-nav justify-content-end order-1 order-md-1">
<ul class="navbar-nav">
<li class="nav-item p-2">
<a class="nav-link scroll" href="index.html">
HOME <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item p-2" id="mt-navbar-link">
<a class="nav-link scroll" href="#">ABOUT</a>
</li>
</ul>
</div>
<a class="navbar-brand mx-auto order-0 order-md-2 p-3" href="index.html">
<img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/commons/d/d0/Newscycle-Circle.png" width="85px" height="85px">
</a>
<div class="navbar-collapse collapse dual-nav order-2 order-md-3">
<ul class="navbar-nav">
<li class="nav-item p-2" id="mt-navbar-link">
<a class="nav-link scroll" href="#">CONTACT</a>
</li>
<li class="nav-item p-2" id="mt-navbar-link">
<a class="nav-link scroll" href="#">VACANCIES</a>
</li>
</ul>
</div>
</nav>
here is desktop version of navigation bar
here is the image when it screen size comes to mobile version after clicking on hamburger button
I want when I click on the hamburger for the menu to open but if it doesn't get pushed down it will be open over the image.
.navbar-light .navbar-toggler {
outline: none !important;
padding-top: 8px;
padding-bottom: 2px;
z-index: 1001;
}
.navbar-toggler .navbar-toggler-icon {
background-color: black;
color: black;
height: 3px;
display: block;
margin-bottom: 6px;
}
<div class="container-fluid wow fadeIn">
<nav class="navbar navbar-expand-md navbar-light bg-faded">
<a class="navbar-brand wow fadeInLeft" href="#"><img src="img/logo.png" alt="logo" width="160px" height="60px"></a>
<button aria-controls="navbarSupportedContent" aria-expanded="true" aria-label="Toggle navigation" class="navbar-toggler navbar-toggler-right" data-target="#navbarSupportedContent" data-toggle="collapse" type="button">
<span class="navbar-toggler-icon"></span>
<span class="navbar-toggler-icon"></span>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto wow fadeInRight">
<li class="nav-item active">
<a class="nav-link" href="#"><strong>HOME </strong><span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><strong>ABOUT</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><strong>SERVICES</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><strong>PORTFOLIO</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><strong>CONTACT US</strong></a>
</li>
</ul>
</div>
</nav>
</div>
<header id="home-section" class="mb-3">
<img src="img/banner.jpg" alt="" width="100%">
</header>
Where did I make a mistake? Which css property or bootstrap class is need to be added?
You can use .navbar-fixed-top class to fixed it on mobile
In Mobile version, keep the hamburger dropdown menu position: absolute; so that the menu dropdown will appear above the image
Use media queries for mobile version and execute the code. For example,
#media only screen and (max-width: 600px) {
.navbar-collapse{
position: absolute;
}
}