How do I collapse a navbar for mobile devices? - html

.navbar {
background:white;
border: 1px solid #008080;
border-width: 1px 0;
box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.75), 0 8px 6px -6px black;
}
.navbar-contact,
.nav {
background: #008080;
overflow: hidden;
}
.navbar-contact {
max-height: 29px;
}
.bottom {
margin-top: -30px;
}
/* White Angles (Common) */
.nav:before,
.navbar-contact:after {
content: "";
background: #fff;
position: absolute;
width: 2em; height: 4em;
transform: rotate(30deg);
}
/* .navbar-contact angle position */
.navbar-contact:after {
right: -1em;
top: -0.5em;
}
/* .nav angle position */
.nav:before {
left: -1em;
top: -1em;
}
.head-text{
padding-top:1px;
font-family:Righteous;
text-align:center;
color:#78ece9;
}
<html>
<head>
<title>Contact</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="http://computervision.in/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="http://computervision.in/css/style.css" rel="stylesheet">
</head>
<!------ Include the above in your HEAD tag ---------->
<body id="top">
<nav class="navbar p-0 fixed-top">
<div class="top d-flex w-100">
<div class="px-2 navbar-contact text-white position-relative flex-grow-1">Contact: <a class="text-white" href="#">+91 xxxxxxxxxx or + 91 xxxxxxxxxx </a></div>
<div class="pt-1 pr-3 d-flex mt-auto bg-white position-relative">
<div class="dropdown">
<img class="position-relative" src="http://computervision.in/images/IN.png" height="50">
<div class="dropdown-content2">
<a class="my-font" href="courses.php">Courses</a>
<a class="my-font" href="login.php">Student Login</a>
<a class="my-font" href="#">Make Payments</a>
<a class="my-font" href="#">Student Review</a>
<a class="my-font" href="#">Verify Certificates</a>
<a class="my-font" href="#">Online Registration</a>
</div>
</div>
<div class="dropdown">
<img class="position-relative ml-3 mr-2" src="http://computervision.in/images/PV.png" height="55">
<div class="dropdown-content">
<a class="my-font" href="#">Gallery</a>
<a class="my-font" href="#">Hot Jobs</a>
<a class="my-font" href="#">Placement Cell</a>
<a class="my-font" href="#">Top Placements</a>
<a class="my-font" href="#">Placement Drive</a>
<a class="my-font" href="placement.php">Placement Testimonials</a>
</div>
</div>
</div>
</div>
<div class="bottom d-flex w-100">
<div class="navbar-brand">
<a class="navbar-brand mr-0" href="#"> <img src="http://computervision.in/images/logo.png" height="60"> </a>
<button class="navbar-toggler" id="nav1" type="button" data-toggle="collapse" data-target="#navMain" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<ul class="nav mt-auto flex-grow-1 pl-4 position-relative" role="navigation" id="navMain">
<li class="nav-item active"><a class="nav-link my-font" href="index.php">Home</a></li>
<li class="nav-item"><a class="nav-link my-font" href="about.php">About</a></li>
<li class="nav-item "><a class="nav-link my-font" href="why.php">Why Computer Vision</a></li>
<li class="nav-item"><a class="nav-link my-font" href="courses.php">Courses</a></li>
<li class="nav-item"><a class="nav-link my-font" href="services.php">Services</a></li>
<li class="nav-item"><a class="nav-link my-font" href="events.php">Events</a></li>
<li class="nav-item"><a class="nav-link my-font" href="blogs.php">Blogs</a></li>
<li class="nav-item"><a class="nav-link my-font blink" href="contact.php">Contact</a></li>
<li class="nav-item"><a class="nav-link my-font" href="register.php">Register</a></li>
</ul>
</div>
</nav>
<!-- Contact Us Section -->
</body>
</html>
I have tried a lot of codes for This Code in order to make it responsive in mobile devices, so that when a user accesses my page from mobile he gets a collapsed navigation bar. I have tried in every way, the navbar collapse class doesn't even seem to work. so I have removed the whole code for collapsing the navbar. Please help me out, i've been stuck in here for many days. Thanks anyways.


.navbar {
border: 1px solid #008080;
border-width: 1px 0;
box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.75), 0 8px 6px -6px black;
}
.navbar-contact,
.nav, .navbar-nav {
background: #008080;
overflow: hidden;
}
.navbar-contact {
max-height: 29px;
}
.bottom {
margin-top: -30px;
}
/* White Angles (Common) */
.nav:before,
.navbar-contact:after {
content: "";
background: #fff;
position: absolute;
width: 2em; height: 2.5em;
transform: skew(-30deg);
}
/* .navbar-contact angle position */
.navbar-contact:after {
right: -1em;
top: 0;
}
/* .nav angle position */
.nav:before {
left: -1em;
top: 0;
}
.navbar.navbar-expand-lg {
flex-wrap: wrap;
}
.navbar-toggler {
color: rgba(0,0,0,.5);
border-color: rgba(0,0,0,.1);
}
.navbar .bottom.d-flex {
flex-wrap: wrap;
}
.navbar-toggler-icon {
border:1px solid #ddd;
background-image: url("data:image/svg+xml,<svg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'><path stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/></svg>");
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg p-0">
<div class="top d-flex w-100">
<div class="px-2 navbar-contact text-white position-relative flex-grow-1">Contact: <a class="text-white" href="#">+91 xxxxxxxxxx or xxxxxxxxxx </a></div>
<div class="pt-1 pr-3 d-flex mt-auto bg-white position-relative">
<img class="position-relative" src="http://computervision.in/images/IN.png" height="50">
<img class="position-relative ml-3 mr-2" src="http://computervision.in/images/PV.png" height="55">
</div>
</div>
<div class="bottom d-flex w-100">
<a href="" class="navbar-brand mr-0">
<img src="http://computervision.in/images/logo.png" height="60">
</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 flex-grow-1 pl-4 position-relative">
<li class="nav-item active"><a class="nav-link text-white active" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link text-white" href="#">Services</a></li>
<li class="nav-item"><a class="nav-link text-white" href="#">Courses</a></li>
<li class="nav-item"><a class="nav-link text-white" href="#">Events</a></li>
<li class="nav-item"><a class="nav-link text-white" href="#">Blogs</a></li>
</ul>
</div>
</div>
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</body>
</html>
You just have to modify CSS as per your design. Hope this will work for you.


here is small example for a collapsing navbar. Please give it a try. Run the snippet in the post and fullscreen to see how it works.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 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.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>
<nav class="navbar navbar-expand-lg 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">
<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>
<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>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>

Related

Links in Navbar are getting on top of each other when resizing the browser (I am using Bootstrap)

I am using Bootstrap and I am doing a double navbar in the website so when I resize the window the links in the second navbar go on top of each other like in amazon website
How can I make them resize with resizing the window and keeping them displayed horizontally like in amazon?
Here is the full code of the website:
body{
margin: 0;
background: linear-gradient(to bottom,#232f3d 460px, white) fixed;
}
.img{
width: 100px;
}
a{
color: white !important;
}
.navbar-nav{
margin-left: 100px;
white-space: nowrap;
}
#hehe a:hover{
background-color: transparent;
color: white !important;
border: 1px solid white
}
.nav-link:hover{
color: black !important;
background-color: white;
}
.d-flex{
width: 600px;
}
#drop{
margin-right: 30px;
}
.shopping-cart:hover{
padding: 2px;
transition: 0.3s;
background-color: white;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-ms-transition: 0.3s;
-o-transition: 0.3s;
}
.shopping-cart{
width: 40px !important;
}
.p2_landing{
margin-top: -20px;
}
#media (max-width:992px){
.navbar-nav{
text-align: center;
margin-left: -5px;
margin-top: 2px;
}
.d-flex{
margin-top: 4px;
width: 300px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Links -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/all.css">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/all.js"></script>
<script src="js/bootstrap.bundle.js"></script>
<!-- end links -->
<title>Amazon</title>
</head>
<body>
<!-- Start Nav 1 -->
<nav class="navbar navbar-expand-lg bg-dark" >
<div class="container ">
<a class="navbar-brand" href="#">Test</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">
<form class="d-flex ms-5 " role="search">
<input class="form-control rounded-0" type="search" placeholder="Search" aria-label="Search">
<button type="submit" class="btn btn-warning rounded-0 ">Search</button>
</form>
<ul class="navbar-nav me-auto mb-2 mb-lg-0 ">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Log in</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" id="link" href="#">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Help</a>
</li>
</ul>
<img src="images/shopping-cart.png" class="shopping-cart" alt="shopping-cart">
</div>
</div>
</nav>
<!-- End nav 1 -->
<nav class="navbar navbar-expand-lg bg-transparent " id="hehe">
<div class="container-fluid">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link " aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Kids</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Men</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Women</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Fragrances</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Toys & Games</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Electronics</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Today's Deals</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Clothes</a>
</li>
</ul>
</div>
</nav>
</body>
</html>

Even though you did not share the complete code I found the solution.
flex-direction: row;
add this to your .navbar-nav and it will be ok, but you need further changes on your code to fix the spacing.

Disable link decoration on a logo

.nav-d a{
display: block;
color: black;
text-decoration: none;
border-bottom: 3px solid transparent;
}
.nav-d a:hover {
border-bottom: 3px solid #262262;
}
.nav-d a.active {
border-bottom: 3px solid #262262;
}
<div class="container nav-d" style="max-width: 1134px;">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand mr-5" href="home.html"><img src="Logo-transparant.png" alt="Logo-transparant"></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" id="navbarNavAltMarkup">
<div class="navbar-nav">
<li class="nav-item active pr-4">
<a class="nav-link" href="home.html" > Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item pr-4">
<a class="nav-link" href="Nieuwefietsen.html">Nieuwe fietsen</a>
</li>
<li class="nav-item pr-4">
<a class="nav-link" href="Tweedehandsfietsen.html">Tweedehands fietsen</a>
</li>
<li class="nav-item pr-5">
<a class="nav-link" href="Fietsreperatie.html">Fietsreperatie</a>
</li>
<li class="nav-item pr-4">
<a class="nav-link" href="Contact.html">Contact</a>
</li>
<li class="nav-itme pr-0" style= "border:2px solid rgb(47, 47, 112); border-radius: 250px; background-color: rgb(47, 47, 112);">
<a class="nav-link my-link disabled ml-3 mr-2 " herf="home.html" style="color:white; font-size: 16px;"><i class="far fa-phone mr-2"></i>06 20453640</a>
</li>
</nav>
</div>
Disable link decoration on the logo (the bottom underline decoration). i want to get rid of it i tried text-decoration: none; that didn't help.

Try this instead
You HTML Code is invalid there is not <ul> tag before <li>
.nav-d a.navbar-brand:hover{
border-bottom-color:transparent;
}
.nav-d a{
display: block;
color: black;
text-decoration: none;
border-bottom: 3px solid transparent;
}
.nav-d a:hover {
border-bottom: 3px solid #262262;
}
.nav-d a.active {
border-bottom: 3px solid #262262;
}
.nav-d a.navbar-brand:hover{
border-bottom-color:transparent;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 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.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>
<div class="container nav-d" style="max-width: 1134px;">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand mr-5" href="home.html"><img src="Logo-transparant.png" alt="Logo-transparant"></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" id="navbarNavAltMarkup">
<ul class="navbar-nav">
<li class="nav-item active pr-4">
<a class="nav-link" href="home.html" > Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item pr-4">
<a class="nav-link" href="Nieuwefietsen.html">Nieuwe fietsen</a>
</li>
<li class="nav-item pr-4">
<a class="nav-link" href="Tweedehandsfietsen.html">Tweedehands fietsen</a>
</li>
<li class="nav-item pr-5">
<a class="nav-link" href="Fietsreperatie.html">Fietsreperatie</a>
</li>
<li class="nav-item pr-4">
<a class="nav-link" href="Contact.html">Contact</a>
</li>
<li class="nav-itme pr-0" style= "border:2px solid rgb(47, 47, 112); border-radius: 250px; background-color: rgb(47, 47, 112);">
<a class="nav-link my-link disabled ml-3 mr-2 " herf="home.html" style="color:white; font-size: 16px;"><i class="far fa-phone mr-2"></i>06 20453640</a>
</li>
</ul>
<div>
</nav>
</div>

Do something like this:
a {
color:inherit;
text-decoration: none;
}

Try This. That's it.
.nav-d a.navbar-brand:hover{border-bottom:none;}

Bootstrap 4 - How to prevent collapsing menu from collapsing all elements in the nav

I'm using a bootstrap 4 navbar and I want to prevent the logo and language switch from moving and collapsing with the menu when the hamburger menu is clicked. Here is all of my code. Also, here is the link to my codepen. Is this possible?
https://codepen.io/asizemore/pen/LYEgvOy?editors=1100
CSS
.logo {
max-width: 130px;
}
.btn {
font-family: 'Muli', sans-serif;
font-weight: 900;
}
.btn {
background: rgb(142, 63, 41);
color: rgb(202, 171, 159);
}
.active {
background: rgb(166, 73, 47);
color: white;
}
HTML
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<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>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
!-- NAV BAR -->
<nav class="navbar navbar-light fixed-top navbar-expand-lg bg-white">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand mt-lg-0" href="#"><img src="https://via.placeholder.com/200x50" class="logo img-fluid"></a>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<ul class="navbar-nav mx-auto mt-2 mt-lg-0">
<li class="nav-item">
<a class="nav-link" href="#">PURPOSE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">FAMILY</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">AGRICULTURE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ART</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
</ul>
</div>
<!-- LANGUAGE SWITCH -->
<div class="btn-group btn-toggle lang mr-1">
<input type="button" name="lang" class="btn" value="ENG">
<input type="button" name="lang" class="btn active" value="SPA">
</div>
</nav>

Place your language switch inside a .navbar-item, right after .navbar-brand and give it an order: 1 (which is bigger than the default of 0 - so it's going to be displayed as the last item of its parent) on the interval at which your .navbar is not collapsed. Since you're using .navbar-expand-lg, it's going to be #media (min-width: 992px) but if you used .navbar-expand-md it would have been min-width: 768px - or 576px for -sm. More about responsive breakpoints here.
When the nav is collapsed, you don't need the order changed, so the language switcher is displayed before the menu (that's the reason we placed it after the logo in the first place). See it working:
.logo {
max-width: 130px;
}
.btn {
font-family: 'Muli', sans-serif;
font-weight: 900;
}
.btn {
background: rgb(142, 63, 41);
color: rgb(202, 171, 159);
}
.active {
background: rgb(166, 73, 47);
color: white;
}
#media(min-width: 992px) {
.language-switch {
order: 1;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-light fixed-top navbar-expand-lg bg-white">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand mt-lg-0" href="#"><img src="https://via.placeholder.com/200x50" class="logo img-fluid"></a>
<div class="nav-item language-switch">
<div class="btn-group btn-toggle lang mr-1">
<input type="button" name="lang" class="btn" value="ENG">
<input type="button" name="lang" class="btn active" value="SPA">
</div>
</div>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<ul class="navbar-nav mx-auto mt-2 mt-lg-0">
<li class="nav-item">
<a class="nav-link" href="#">PURPOSE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">FAMILY</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">AGRICULTURE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ART</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
</ul>
</div>
</nav>
Oh, and you need to come up with an solution on how to align the three (logo, language switch and toggler) when they don't actually fit in one line (devices narrower than ~450px). But that's a problem you basically asked for.
Note: if you want the logo to be displayed first when navbar is collapsed, you could simply place it before the toggler and give the toggler either ml-auto mr-3 or ml-3 mr-auto to make it stick to either right or left side (having it centered would be sort of weird, IMHO). Example:
.logo {
max-width: 130px;
}
.btn {
font-family: 'Muli', sans-serif;
font-weight: 900;
}
.btn {
background: rgb(142, 63, 41);
color: rgb(202, 171, 159);
}
.active {
background: rgb(166, 73, 47);
color: white;
}
#media(min-width: 992px) {
.language-switch {
order: 1;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
!-- NAV BAR -->
<nav class="navbar navbar-light fixed-top navbar-expand-lg bg-white">
<a class="navbar-brand mt-lg-0" href="#"><img src="https://via.placeholder.com/200x50" class="logo img-fluid"></a>
<button class="navbar-toggler mr-auto" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="nav-item language-switch">
<div class="btn-group btn-toggle lang mr-1">
<input type="button" name="lang" class="btn" value="ENG">
<input type="button" name="lang" class="btn active" value="SPA">
</div>
</div>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<ul class="navbar-nav mx-auto mt-2 mt-lg-0">
<li class="nav-item">
<a class="nav-link" href="#">PURPOSE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">FAMILY</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">AGRICULTURE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ART</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
</ul>
</div>
</nav>
The same result could be achieved by using order: -1 on the logo (without switching its place in DOM with the toggler) on the proper responsive interval (i.e: below 991px in your case).

Bootstrap 4 Navigation Bar Dropdown Issue

I tried to split this navigation bar dropdown menu in to two columns but they clash with each other.
And the other issue is, the Search bar stays at bottom when in mobile. And page is not responsive. I don't know if this is caused by navigation bar issue. Any input would be appreciated. I hope you all have a great weekend!
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
}
section {
padding: 70px 0;
border-bottom: 1px dotted #ccc;
}
.grid-example div[class^="col"] {
border: 1px solid white;
background: lightblue;
text-align: center;
padding-top: 8px;
padding-bottom: 8px;
}
.jumbotron {
background-color: lightskyblue;
}
table th {
text-align: center;
}
.table {
margin: auto;
width: 50% !important;
}
.table td {
text-align: center;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
line-height: 60px;
color: #fff;
text-align: center;
background-color: #C0C0C0;
}
a {
color: #f00;
}
a:hover {
color: #0f0;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Test</title>
<meta name="description" content="Test">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="Sticky Footer.css">
</head>
<body>
<nav class="navbar-expand-sm navbar-expand-md navbar-expand-lg navbar navbar-light" style="background-color: #C0C0C0;">
<a class="navbar-brand" href="#">Navbar</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">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Test <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Test</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Test</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Test
</a>
<div class="dropdown-menu" style="width:300px" aria-labelledby="navbarDropdown">
<div class="container container-sm">
<div class="row">
<div class="col-sm-4">
<a class="dropdown-item" href="#">Test Test Test</a>
<a class="dropdown-item" href="#">Test Test</a>
<a class="dropdown-item" href="#">Test</a>
</div>
<div class="col-sm-4">
<a class="dropdown-item" href="#">itemitemitemitem</a>
<a class="dropdown-item" href="#">itemitemitemitemitem</a>
<a class="dropdown-item" href="#">item</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</nav>
<div class="jumbotron">
<h1 class="display-8">Hello, world!</h1>
<p class="lead-8">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p class="lead">
<a class="btn btn-primary btn-md" href="#" role="button">Learn more</a>
</p>
</div>
<div class="row align-items-center" style="min-height: calc(100vh - 500px);">
<div class="col-xs-3 col-sm-8 col-md-6 col-lg-6 mx-auto">
<div class="input-group-prepend">
<input id='urlurl' type="url" class="form-control" placeholder="Search" pattern="https?://.+" required />
<span class="input-group-btn">
<button class="btn btn-primary" style="background-color: #0275D8; border-color: #0275D8;" type="button" >Test</button>
</span>
</div>
</div>
</div>
<footer class="footer fixed-bottom text-center">
<span class="text">Place sticky footer content here.</span>
</footer>
<!-- jQuery Version 1.11.1 -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- Bootstrap Core JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

I'll answer the dropdown question that goes along with the title.
You don't want to nest a container inside of the dropdown. Also increase the min-width on the dropdown to fit the content.
https://www.codeply.com/go/9wUCwUErKL
<div class="dropdown-menu" style="min-width:360px" aria-labelledby="navbarDropdown">
<div class="row no-gutters">
<div class="col-sm-6">
<a class="dropdown-item px-2" href="#">Test Test Test</a>
<a class="dropdown-item px-2" href="#">Test Test</a>
<a class="dropdown-item px-2" href="#">Test</a>
</div>
<div class="col-sm-6">
<a class="dropdown-item px-2" href="#">itemitemitemitem</a>
<a class="dropdown-item px-2" href="#">itemitemitemitemitem</a>
<a class="dropdown-item px-2" href="#">item</a>
</div>
</div>
</div>
There is no longer col-xs-* in Bootstrap 4, it's just col-*.

Vertical-Alignment of Image in Navbar

I have a website that I am developing utilizing the Bootstrap 4 framework. I am trying to create a navbar with the navbar-brand in the center. I was able to place the navbar-brand in the center with a navbar-nav on each side of the navbar-brand. Please find below the code that I utilized. My issue is that the navbar-brand is vertically aligned in the center of the navbar.
How can I align the navbar-brand to the bottom of the navbar and have the excess stick out at the top of the navbar without adjusting the margins?
#hdrContainer {
background-color: #0a3782;
}
.container {
background-color: inherit;
}
#tblHeader {
width: 100%;
/*font-size: .8125rem;*/
font-size: 1rem;
text-align: right;
color: #ffffff;
font-weight: bold;
}
#tblHeader tr {
height: 50px;
}
.breadcrumb {
background-color: inherit;
margin-bottom: initial;
font-weight: bold;
}
.breadcrumb .active {
color: inherit;
}
#socialbrand {
text-align: right;
}
#mainNavbar {
background-color: gray;
}
#mainNavbar .container .navbar {
position: relative;
z-index: 0;
max-height: 40px;
}
.navbar-brand {
position: relative;
z-index: 1;
margin-right: initial;
}
.form-control {
width: 200px;
}
.btn-outline-navy {
color: #f6b40e;
background-color: transparent;
background-image: none;
border-color: #f6b40e;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<div id="hdrContainer" class="container-fluid">
<div class="container">
<table id="tblHeader">
<tbody>
<tr>
<td>
<nav aria-label="breadcrumb" role="navigation">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">Commander, Naval Surface Force, US Pacific</li>
</ol>
</nav>
</td>
<td id="socialbrand" style="display: block; padding: .75rem 1rem;">Follow Us |
<i class="fa fa-facebook-square" aria-hidden="true"></i>
<i class="fa fa-twitter-square" aria-hidden="true"></i>
<i class="fa fa-flickr" aria-hidden="true"></i>
<i class="fa fa-wordpress" aria-hidden="true"></i>
<i class="fa fa-youtube-square" aria-hidden="true"></i>
</td>
</tr>
<tr>
<td colspan="2">
<nav class="navbar navbar-light">
<form class="form-inline">
<input class="form-control form-control-sm ml-auto mr-sm-2 float-right" placeholder="Search" aria-label="Search" type="search">
<button class="btn btn-sm btn-outline-navy my-2 my-sm-0" type="submit">Search</button>
</form>
</nav>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="mainNavbar" class="container-fluid">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light">
<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 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>
<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>
<!-- Just an image -->
<a class="navbar-brand mr-auto ml-auto" href="#">
<img src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" alt="" width="75" height="75">
</a>
<ul class="navbar-nav ml-auto 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>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown1">
<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>
</div>
</nav>
</div>
</div>

The solution below makes use of the various flexbox utility classes available in Bootstrap, described in detail in the docs.
The .navbar-brand got wrapped into <div id="logo"> in order to set it's positioning to absolute, and it's bottom position to 0. That pushes down the logo container to the bottom of the navbar.
Additionally, I've added the .d-none .d-lg-block classes in order to hide the logo when the menu is collapsed.
Available as a CodePen as well.
/* Pushing logo to bottom */
#logo {
position: absolute;
bottom: 0;
}
/* Basic styling to resemble to source */
.navbar {
background-color: gray;
}
#header {
height: 100px;
color: white;
background-color: #0a3782;
display: flex;
justify-content: center;
align-items: center;
}
<div id="header">[header placeholder]</div>
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container">
<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 justify-content-around" id="navbarSupportedContent">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
<div id="logo" class="d-none d-lg-block">
<a class="navbar-brand m-0" href="#">
<img src="http://getbootstrap.com/assets/brand/bootstrap-solid.svg" width="75" height="75" alt="">
</a>
</div>
<div class="navbar-nav">
<a class="nav-item nav-link" href="#">Item 1</a>
<a class="nav-item nav-link" href="#">Item 2</a>
<a class="nav-item nav-link" href="#">Item 3</a>
<a class="nav-item nav-link" href="#">Item 4</a>
</div>
</div>
</div>
</nav>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>