I'm working on a bootstrap navbar with the bootstrap 4 version and I have a problem aligning the navbar item on the left because I have some items on the right and I want to make a profile avatar pulled to the left I tried to use [Pull-left] and [ml-auto] but there it doesn't work and so any help?
navbar code:-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar navbar-expand-md navbar-dark bg-dark shadow p-3 mb-5" style="direction: rtl; margin:0;">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="styles/images/svgtopng.png" alt="" width="65" height="" class="d-inline-block align-top mr-auto"><span style="font-family: hana;">المتجر المتعدد</span></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">
<div class="navbar-inner" style="float:right">
<ul class="navbar-nav mr-auto">
<li class="nav-item" style="font-family: cocon-next-arabic; font-size:26px;">
<a class="nav-link active pull-right" aria-current="page" style="direction: rtl;" href="index.php">الرئيسية<img src="styles/images/home.png" alt="" width="66" height="47" class="d-inline-block align-top mr-auto"></a>
</li>
<li class="nav-item" style="font-family: cocon-next-arabic; font-size:26px;">
<a class="nav-link active pull-right" aria-current="page" style="direction: rtl;" href="store.php">المتجر<img src="styles/images/cart.png" alt="" width="66" height="47" class="d-inline-block align-top mr-auto"></a>
</li>
<li class="nav-item" style="font-family: cocon-next-arabic; font-size:26px;">
<a class="nav-link active pull-left" aria-current="page" style="direction: rtl;" href="store.php">Pull Left<img src="styles/images/cart.png" alt="" width="66" height="47" class="d-inline-block align-top mr-auto"></a>
</li>
</ul>
</div>
</ul>
</div>
</div>
</nav>
I think this is what you need.
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="direction:rtl">
<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">
<ul class="navbar-nav ml-auto" style="direction:ltr; padding-right:40px">
<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>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<ul class="mr-auto navbar-nav">
<li class="nav-item">
Avator
<img style="display:inline-block; width:40px; height:40px; border-radius:50px" src="https://png.pngtree.com/png-vector/20190223/ourmid/pngtree-vector-avatar-icon-png-image_695765.jpg" />
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
because you add inline css to nav element and change the direction to right remove it
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar navbar-expand-md navbar-dark bg-dark shadow p-3 mb-5" style="margin:0;">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="styles/images/svgtopng.png" alt="" width="65" height="" class="d-inline-block align-top mr-auto"><span style="font-family: hana;">المتجر المتعدد</span></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">
<div class="navbar-inner" style="float:right">
<ul class="navbar-nav mr-auto">
<li class="nav-item" style="font-family: cocon-next-arabic; font-size:26px;">
<a class="nav-link active pull-right" aria-current="page" style="direction: rtl;" href="index.php">الرئيسية<img src="styles/images/home.png" alt="" width="66" height="47" class="d-inline-block align-top mr-auto"></a>
</li>
<li class="nav-item" style="font-family: cocon-next-arabic; font-size:26px;">
<a class="nav-link active pull-right" aria-current="page" style="direction: rtl;" href="store.php">المتجر<img src="styles/images/cart.png" alt="" width="66" height="47" class="d-inline-block align-top mr-auto"></a>
</li>
<li class="nav-item" style="font-family: cocon-next-arabic; font-size:26px;">
<a class="nav-link active pull-left" aria-current="page" style="direction: rtl;" href="store.php">Pull Left<img src="styles/images/cart.png" alt="" width="66" height="47" class="d-inline-block align-top mr-auto"></a>
</li>
</ul>
</div>
</ul>
</div>
</div>
</nav>
Related
I made a single landing page using bootstrap5. Created a navbar a some section.I give the id to the section same as href link in navbar . It redirect to that targeted section as expected but it navbar hides it titleIt navigates to our tour section but hides its section title.
<header class="fixed-top">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container text-center">
<a class="navbar-brand text-center d-flex flex-cloumn" href="#">
<img
src="./Images/logo.png"
alt=""
width="80"
height="50"
class="d-inline-block"
/>
</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 mt-2 ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a
class="nav-link active"
aria-current="page"
href="#"
>Discover Europe</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="#ourtours"
>Our tours</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="#customizedtour"> Customized tour</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#whychooseus">Why Choose Us?</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#aboutus">About Us</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
You have <header class="fixed-top"> - fixed positioning does not account for elements below/behind. Judging by your screenshot that seems to be an issue. Change fixed-top to sticky-top and it should work just fine.
I made a few snippets which should help.
Version 1 - fixed-top first and the second section is behind the header.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<header class="fixed-top">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container text-center">
<a class="navbar-brand text-center d-flex flex-cloumn" href="#">
<img src="./Images/logo.png" alt="" width="80" height="50" class="d-inline-block" />
</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 mt-2 ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Discover Europe</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="#ourtours"
>Our tours</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="#customizedtour"> Customized tour</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#whychooseus">Why Choose Us?</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#aboutus">About Us</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<section id="ourtours">
<h1>our tours</h1>
</section>
<section id="customizedtour">
<h1>customized tours</h1>
</section>
<section id="ourtours">
<h1>why choose us</h1>
</section>
Version 2 - sticky-top first section is directly below header.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<header class="sticky-top">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container text-center">
<a class="navbar-brand text-center d-flex flex-cloumn" href="#">
<img src="./Images/logo.png" alt="" width="80" height="50" class="d-inline-block" />
</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 mt-2 ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Discover Europe</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="#ourtours"
>Our tours</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="#customizedtour"> Customized tour</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#whychooseus">Why Choose Us?</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#aboutus">About Us</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<section id="ourtours">
<h1>our tours</h1>
</section>
<section id="customizedtour">
<h1>customized tours</h1>
</section>
<section id="ourtours">
<h1>why choose us</h1>
</section>
Below is the code for my Navbar:
<nav class="navbar navbar-expand-lg navbar-dark custom-bg-primary text-white fixed-top mb-3 py-2">
<div class="container">
<a class="navbar-brand" href="{% url 'job-list' %}"><img src="{% static 'jobs/images/sirf-sarkari-naukri.png' %}" alt="Sirf Sarkari Naukri" height="25%" width="25%"></a>
<!-- <a class="navbar-brand" href="{% url 'job-list' %}">Sirf Sarkari Naukri</a> -->
<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 dropdown">
<a class="nav-link dropdown-toggle py-0" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">SARKARI JOBS</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">BY COMPANY</a>
<hr />
<a class="dropdown-item" href="#">BY QUALIFICATION</a>
<a class="dropdown-item" href="#">BY PROFESSION</a>
<hr />
<a class="dropdown-item" href="#">BY STATE</a>
<a class="dropdown-item" href="#">BY TOP CITIES</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
After I added logo to my Navbar, on small screen the Navbar Toggler button is getting shifted to new line and overlapping on the search bar.
Could anyone please help me fix this issue, thanks in advance!
display:inline is causing this... use display:contents to resolve
nav {
background-color: #229a44;
}
a.navbar-brand {
display: contents;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous" />
<nav class="navbar navbar-expand-lg navbar-dark custom-bg-primary text-white fixed-top mb-3 py-2">
<div class="container">
<a class="navbar-brand" href="{% url 'job-list' %}">
<img src="https://i.stack.imgur.com/Jqd4Z.png" alt="Sirf Sarkari Naukri" height="25%" width="25%">
<!--
<img src="https://www.akberiqbal.com/favicon.ico" alt="Sirf Sarkari Naukri" height="25%" width="25%">
-->
</a>
<!-- <a class="navbar-brand" href="{% url 'job-list' %}">Sirf Sarkari Naukri</a> -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-thumbs-up"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle py-0" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">SARKARI JOBS</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">BY COMPANY</a>
<hr />
<a class="dropdown-item" href="#">BY QUALIFICATION</a>
<a class="dropdown-item" href="#">BY PROFESSION</a>
<hr />
<a class="dropdown-item" href="#">BY STATE</a>
<a class="dropdown-item" href="#">BY TOP CITIES</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
Since some time I have been working on a chat room layout and the main concept of my website (Which i'll be showing) is that I have a fixed navbar and a fixed bottom footer (Bootstrap 4). So between them I added a grid system with 3 columns (3 + 6 + 3) Now I want the grid system to be the height so it covers the whole area between the navbar and the footer. But the problem is when I give them the height of 100% a scrollbar comes up and makes it a full page grid.
My Code :
.dropdown-toggle::after {
content: none;
}
body {
margin: 0;
padding: 0;
}
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand navbar-dark" style="background-color:#3A5070">
<a class="navbar-brand" href="#">LOGO</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 ml-auto">
<li class="nav-item">
<img src="https://image.flaticon.com/icons/svg/1156/1156949.svg" width="25" style="margin-top:10px;margin-right:15px;" />
</li>
<li class="nav-item">
<img src="https://image.flaticon.com/icons/svg/813/813020.svg" width="25" style="margin-top:10px;margin-right:15px;" />
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img src="libs/images/icon.png" width="35" />
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown" style="margin-top:7px;border-radius:0px;width:110%;">
<a class="dropdown-item" href="#">Edit Profile</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Logout</a>
</div>
</li>
</ul>
</div>
</nav>
<div class="row no-gutter" style="height:100%">
<div class="col-3" style="background: orange;">col-3</div>
<div class="col-6" style="background:black;">col-6</div>
<div class="col-3" style="background: orange;">col-3</div>
</div>
<nav class="navbar fixed-bottom navbar-light " style="background-color:#3A5070">
<a class="navbar-brand" href="#"></a>
</nav>
Use calc() to calculate the height of a element:
<style>
.full_height {
height: calc(100vh - 82px);
overflow: auto;
}
</style>
.full_height {
height: calc(100vh - 82px);
overflow: auto;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand navbar-dark" style="background-color:#3A5070">
<a class="navbar-brand" href="#">LOGO</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 ml-auto">
<li class="nav-item">
<img src="https://image.flaticon.com/icons/svg/1156/1156949.svg" width="25"
style="margin-top:10px;margin-right:15px;" />
</li>
<li class="nav-item">
<img src="https://image.flaticon.com/icons/svg/813/813020.svg" width="25"
style="margin-top:10px;margin-right:15px;" />
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<img src="libs/images/icon.png" width="35" />
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown"
style="margin-top:7px;border-radius:0px;width:110%;">
<a class="dropdown-item" href="#">Edit Profile</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Logout</a>
</div>
</li>
</ul>
</div>
</nav>
<div class="container-fluid full_height">
<div class="row no-gutter text-center" style="height:100%">
<div class="col-3" style="background: orange;">col-3</div>
<div class="col-6" style="background:black;color:white;">col-6</div>
<div class="col-3" style="background: orange;">col-3</div>
</div>
</div>
<nav class="navbar fixed-bottom navbar-light " style="background-color:#3A5070">
<a class="navbar-brand" href="#"></a>
</nav>
codepen link
Use CSS flex. Giving height 100% will take all the height inherits from its parent. here you are trying to set the content height to 100%. So it takes all height available and there is no space for header and footer. If you try to include header and footer with the content then the page gets overflow. So the scroll comes.
body{
margin:0;
padding:0;
display:flex;
height: 100%;
position: absolute;
width: 100%;
flex-direction:column;
}
.row.no-gutter {
flex: 1;
overflow: auto;
margin: 0;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand navbar-dark" style="background-color:#3A5070">
<a class="navbar-brand" href="#">LOGO</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 ml-auto">
<li class="nav-item">
<img src="https://image.flaticon.com/icons/svg/1156/1156949.svg" width="25" style="margin-top:10px;margin-right:15px;"/>
</li>
<li class="nav-item">
<img src="https://image.flaticon.com/icons/svg/813/813020.svg" width="25" style="margin-top:10px;margin-right:15px;"/>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img src="libs/images/icon.png" width="35" />
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown" style="margin-top:7px;border-radius:0px;width:110%;">
<a class="dropdown-item" href="#">Edit Profile</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Logout</a>
</div>
</li>
</ul>
</div>
</nav>
<div class="row no-gutter" >
<div class="col-3" style="background: orange;">col-3</div>
<div class="col-6" style="background:black;">col-6</div>
<div class="col-3" style="background: orange;">col-3</div>
</div>
<nav class="navbar fixed-bottom navbar-light " style="background-color:#3A5070">
<a class="navbar-brand" href="#"></a>
</nav>
Having issues with the collapsing menu still. According to the way bootstrap is set up, when it collapses, it should go into a straight vertical nav instead of still stretching horizontal. It only seems to end up vertically correct when at the lowest screen size and even though only displays correctly on one of the menus. Thank you Gary for pointing out and helping fix the first issue with the buttons and ID's
first image is how it's supposed to look
Correct Display
My Display
Here's the Snippet of code I put up on codely
<nav class="navbar navbar-expand-xl navbar-light bg-dark" id="topbar">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAlt" aria-controls="navbarNavAlt" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAlt">
<ul class="nav nav-navbar">
<li class="nav-item nav-link">
<a href="tel:1-702-555-5555">
<img src="image/phone.svg" height="15px" alt="Telephone"> (702)555-5555
</a>
</li>
<li class="nav-item nav-link">
<a href="mailto:mail#mail.com">
<img src="image/email.svg" height="15px" alt="Email"> mail#mail.com
</a>
</li>
<li class="nav-item nav-link" href="#">Premier Face Punching</li>
<li class="nav-item nav-link">
<a href="https://www.linkedin.com/company/Stuffnthings/">
<img src="image/linkedin.png" height="15px">
</a>
<a href="https://www.facebook.com/stuffnthings">
<img src="image/facebook.png" height="15px">
</a>
<a href="https://www.twitter.com/stuffnthings">
<img src="image/twitter.png" height="15px">
</a>
</li>
<li>
<input class="form-control border-secondary py-2" type="search" value="search">
</li>
</ul>
</div>
</nav>
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top" id="mainnav">
<a class="navbar-brand" href="#">
<img src="image/VC-Logo.png" height="192px" alt="VC Logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse ml auto" id="navbarNavAltMarkup">
<div class="nav nav-pills">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Web Design</a>
<a class="nav-item nav-link" href="#">Graphic Design</a>
<a class="nav-item nav-link" href="#">About US</a>
<a class="nav-item nav-link" href="#">Contact US</a>
</div>
</div>
</nav>
Your target attribute for both the navbar is same. Just replace the target attribute and the button works for different nav bar. And the navbar seems to become vertical when the width of the browser is less.
<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-xl navbar-light bg-dark" id="topbar">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAlt" aria-controls="navbarNavAlt" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAlt">
<ul class="nav-navbar">
<li class="nav-item nav-link">
<a href="tel:1-702-555-5555">
<img src="image/phone.svg" height="15px" alt="Telephone"> (702)555-5555
</a>
</li>
<li class="nav-item nav-link">
<a href="mailto:mail#mail.com">
<img src="image/email.svg" height="15px" alt="Email"> mail#mail.com
</a>
</li>
<li class="nav-item nav-link" href="#">Premier Face Punching</li>
<li class="nav-item nav-link">
<a href="https://www.linkedin.com/company/Stuffnthings/">
<img src="image/linkedin.png" height="15px">
</a>
<a href="https://www.facebook.com/stuffnthings">
<img src="image/facebook.png" height="15px">
</a>
<a href="https://www.twitter.com/stuffnthings">
<img src="image/twitter.png" height="15px">
</a>
</li>
<li>
<input class="form-control border-secondary py-2" type="search" value="search">
</li>
</ul>
</div>
</nav>
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top" id="mainnav">
<a class="navbar-brand" href="#">
<img src="image/VC-Logo.png" height="192px" alt="VC Logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse ml auto" id="navbarNavAltMarkup">
<div class="nav-pills">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Web Design</a>
<a class="nav-item nav-link" href="#">Graphic Design</a>
<a class="nav-item nav-link" href="#">About US</a>
<a class="nav-item nav-link" href="#">Contact US</a>
</div>
</div>
</nav>
</body>
</html>
Happy Holidays! I have some issue with my navbar. The menu does collapse, but it doesnt expand. I have used this example from Bootstrap. Made some tweaks but it doesn't exapand. It collapse properly, but i don't know why it doesn't expand.
Please find below my code. Thank you!
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
<a class="navbar-brand" href="/">
<img src= {% static 'img/lastlogo.png' %} width="463" height="72" class="d-inline-block align-top" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<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="#">Persoane Fizice</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Consultanta</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Cyber Intelligence</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
check your <header> and put this
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js
your code is work for me
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
<a class="navbar-brand" href="/">
<img src= {% static 'img/lastlogo.png' %} width="463" height="72" class="d-inline-block align-top" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<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="#">Persoane Fizice</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Consultanta</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Cyber Intelligence</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
learn more how to use navbar
ok, so i had to refresh the server. it is working now. Some of the items from the list were disabled. i removed that and now is working.