Bootstrap 4 - 3 images and a form inline - html

im trying to replicate this image as an exercise. original image
But, right now it looks like this. current homepage
Based on my html file, under 'banner' comment, i created a 'jumbo div' so that all elements inside it wrap in a full width dekstop. Then, under 'jumbo div' i created some 'col-sm-n container' so that the elements inside my 'jumbo div' take the amount of space which i assigned.
So, my questions is this the correct way for me to do it to achieve just like the original image. And if yes, what did i do wrong because there are like huge gap after the navbar and those elements not inline.
body {
font: 16px/1.5 'Roboto', 'Myriad Pro', sans-serif;
padding: 0;
margin: 0;
}
.navbar-light .navbar-nav .nav-link {
color: #fff;
margin: 0 30px;
}
#navbarSupportedContent {
margin-left: 50px;
}
.btn {
padding: .75rem 1.5rem;
line-height: 1.25;
margin-left: 30px;
}
.btn-outline-light:hover {
background-color: transparent;
}
.btn-outline-light.focus, .btn-outline-light:focus {
box-shadow: none;
}
.dropdown-menu {
margin: 2.2rem 1rem 1rem 1rem;
font-size: 0.9rem;
left: 0;
min-width: 100% !important;
position: absolute !important;
right: 0;
color: #fff;
background: #bf1e2e;
padding:13px 0px;
border-top: 1px solid #fff;
border-radius: 0;
}
.dropdown-menu a {
color: #fff;
font-weight: 200;
margin: 15px 0 15px 0;
}
.dropdown-item:focus, .dropdown-item:hover {
color: #000;
text-decoration: none;
background-color: #bf1e2e;
}
.dropdown-menu > li{
display:inline-block;
}
ul.navbar-nav li:hover > div.dropdown-menu {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Intermark Mall | Welcome</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="./css/style2.css">
</head>
<body>
<!-- Header -->
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #bf1e2e;">
<div class="container">
<a class="navbar-brand" href="#">
<img src="http://i64.tinypic.com/213n9mc.png" width="275" height="90" alt="">
</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 dropdown">
<a class="nav-link navbarDropdownMenuLink" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
ABOUT
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Mall Info</a>
<a class="dropdown-item" href="#">Precincts</a>
<a class="dropdown-item" href="#">Mall Location</a>
<a class="dropdown-item" href="#">Getting There</a>
<a class="dropdown-item" href="#">Car Park Info</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link navbarDropdownMenuLink" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
STORES
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Directory</a>
<a class="dropdown-item" href="#">Promotions</a>
<a class="dropdown-item" href="#">Floor Plan</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link navbarDropdownMenuLink" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
HAPPENINGS
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Events</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link navbarDropdownMenuLink" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
CONTACT
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Talk to Us!</a>
</div>
</li>
<a class="btn btn-outline-light" href="#" role="button">TOURIST PRIVILEGE</a>
</ul>
</div>
</div>
</nav>
<!-- Banners -->
<div class="jumbotron jumbotron-fluid">
<div class="container-fluid">
<div class="row">
<figure class="col-sm-3">
<img src="http://i64.tinypic.com/140mer.jpg"/>
</figure>
<figure class="col-sm-4">
<img src="http://i68.tinypic.com/2462d89.jpg"/>
</figure>
</div>
<div class="row">
<figure class="col-sm-2">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input">
Check me out
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</figure>
<figure class="col-sm-3">
<img src="http://i66.tinypic.com/2rvyo0h.jpg"/>
</figure>
</div>
</div>
</div>
<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.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>


element is itself an inline element. If you want all images to be align side by side use the max-width:100%; and float the elements properly and clear float in the end. As you are using bootstrap classes then use them in combination of col-3 to place all four images in one line.
body {
font: 16px/1.5 'Roboto', 'Myriad Pro', sans-serif;
padding: 0;
margin: 0;
}
.navbar-light .navbar-nav .nav-link {
color: #fff;
margin: 0 30px;
}
#navbarSupportedContent {
margin-left: 50px;
}
.btn {
padding: .75rem 1.5rem;
line-height: 1.25;
margin-left: 30px;
}
.btn-outline-light:hover {
background-color: transparent;
}
.btn-outline-light.focus, .btn-outline-light:focus {
box-shadow: none;
}
.dropdown-menu {
margin: 2.2rem 1rem 1rem 1rem;
font-size: 0.9rem;
left: 0;
min-width: 100% !important;
position: absolute !important;
right: 0;
color: #fff;
background: #bf1e2e;
padding:13px 0px;
border-top: 1px solid #fff;
border-radius: 0;
}
.dropdown-menu a {
color: #fff;
font-weight: 200;
margin: 15px 0 15px 0;
}
.dropdown-item:focus, .dropdown-item:hover {
color: #000;
text-decoration: none;
background-color: #bf1e2e;
}
.dropdown-menu > li{
display:inline-block;
}
ul.navbar-nav li:hover > div.dropdown-menu {
display: block;
}
figure img{max-width:100%}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Intermark Mall | Welcome</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="./css/style2.css">
</head>
<body>
<!-- Header -->
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #bf1e2e;">
<div class="container">
<a class="navbar-brand" href="#">
<img src="http://i64.tinypic.com/213n9mc.png" width="275" height="90" alt="">
</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 dropdown">
<a class="nav-link navbarDropdownMenuLink" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
ABOUT
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Mall Info</a>
<a class="dropdown-item" href="#">Precincts</a>
<a class="dropdown-item" href="#">Mall Location</a>
<a class="dropdown-item" href="#">Getting There</a>
<a class="dropdown-item" href="#">Car Park Info</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link navbarDropdownMenuLink" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
STORES
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Directory</a>
<a class="dropdown-item" href="#">Promotions</a>
<a class="dropdown-item" href="#">Floor Plan</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link navbarDropdownMenuLink" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
HAPPENINGS
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Events</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link navbarDropdownMenuLink" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
CONTACT
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Talk to Us!</a>
</div>
</li>
<a class="btn btn-outline-light" href="#" role="button">TOURIST PRIVILEGE</a>
</ul>
</div>
</div>
</nav>
<!-- Banners -->
<div class="jumbotron jumbotron-fluid">
<div class="container-fluid">
<div class="row">
<figure class="col-sm-3">
<img src="http://i64.tinypic.com/140mer.jpg"/>
</figure>
<figure class="col-sm-3">
<img src="http://i64.tinypic.com/140mer.jpg"/>
</figure>
<figure class="col-sm-3">
<img src="http://i64.tinypic.com/140mer.jpg"/>
</figure>
<figure class="col-sm-3">
<img src="http://i64.tinypic.com/140mer.jpg"/>
</figure>
</div>
<div class="row">
<figure class="col-sm-2">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input">
Check me out
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</figure>
<figure class="col-sm-3">
<img src="http://i66.tinypic.com/2rvyo0h.jpg"/>
</figure>
</div>
</div>
</div>
<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.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>

Related

Too small mobile view in boostrap 4

Goog morning,
I look forn an solution to create bigger and more visible mobile view for my bootrstap menu with language switcher. Everything is based on boostrap 4. Ive never tried to write something in bootstrap...
Any help??
`
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.2.1/css/flag-icon.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<style type="text/css">
.phone-link {
border-radius: 25px;
background-color: lightblue;
color: #ffffff;
padding: 15px 25px;
}
.navbar-nav {
margin-right: 40px;
}
.navbar-nav .nav-item {
padding: 25px;
}
#media (max-width: 999px) {
.phone-link {
display: none;
}
}
.dropdown.language {
position: absolute;
right: 150px;
width: auto;
top: 35px;
}
#media (max-width: 991px) {
.dropdown.language {
right: 100px;
position: absolute; top: 10px;
}
}
</style>
<nav class="navbar navbar-light" style="background-color: #e3f2fd; ">
<a class="navbar-brand" href="#">
<img src="https://getbootstrap.com/docs/4.2/assets/brand/bootstrap-solid.svg" width="30" height="75" alt="">
</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="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink" style="position: absolute; left: 0px; top: 76px">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
<div class="dropdown language">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="width: 160; height: 42">
<span class="flag-icon flag-icon-us"></span> English
</button>
<div class="dropdown-menu dropdown-menu-left text-left language">
<p style="text-align: left !important">
<a class="dropdown-item" href="#fr"><span class="flag-icon flag-icon-fr"> </span> French</a>
<a class="dropdown-item" href="#it"><span class="flag-icon flag-icon-it"> </span> Italian</a>
<a class="dropdown-item" href="#ru"><span class="flag-icon flag-icon-ru"> </span> Russian</a>
</div>
</div>
</nav>
`
Mobile view is too small... I want to make elements more bigger and viisble

Links on the dropdown menu are not working Bootstrap 4

I tried to make a mega menu with bootstrap. I use the code of dropdown menu and I make some changes on the code, but the links in the dropdown don't work only if I open the link in new tab. Otherwise, when I press the link it closes the dropdown menu. I think maybe is something wrong with the class or js, but I am not sure.
#logo{
position: relative;
left: 50%;
margin-left: -50px !important; /* 50% of your logo width */
display: block;
}
#navbar{
position: -webkit-sticky;
padding-bottom: 10px;
padding-top: 10px;
z-index: 100;
background-color: #282b2e!important;
margin-bottom: 0px;
border-radius: 0px;
}
body {
margin: 0;
}
#megamenu{
padding: 30px;
}
#navlink{
margin-left: 15px;
margin-right: 15px;
color: #bfbfbf;
font-size: 16px;
}
#megamenucol{
align-self: baseline;
}
#navlink{
color: #bfbfbf;
}
#navlink:focus, #navlink:hover {
color: rgb(211, 152, 48);
}
.hvr-underline-from-center:before {
content: "";
position: absolute;
z-index: -1;
left: 51%;
right: 51%;
bottom: 0;
background: #d39830;
height: 4px;
-webkit-transition-property: left,right;
transition-property: left,right;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
#megamenu {
position: absolute;
background: #54595f;
border-radius: 0px;
margin-top: 0px;
}
#h6{
color: #bfbfbf;
font-size: 14px;
}
hr {
margin-top: 1rem;
margin-bottom: 1rem;
border: 0;
border-top: 1px solid #d39830;
}
#dropdownitem {
display: block;
width: 100%;
padding: .25rem 1.5rem;
clear: both;
font-weight: 400;
color: #bfbfbf;
text-align: inherit;
white-space: nowrap;
background-color: transparent;
border: 0;
font-size: 14px;
}
#dropdownitem:focus, #dropdownitem:hover {
color: #d39830;
text-decoration: none;
background-color: #f8f9fa00;
font-size: 14px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.3.1/css/hover-min.css" integrity="sha256-c+C87jupO1otD1I5uyxV68WmSLCqtIoNlcHLXtzLCT0=" crossorigin="anonymous" />
</head>
<body>
<nav id="navbar" class="navbar navbar-expand-lg navbar-light bg-light ">
<a class="navbar-brand" id="logo" href="https://www.dimtiles.gr/"><img src="https://www.dimtiles.gr/wp-content/uploads/2019/05/logo.png" width="90" height="90" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav1,#navbarNav2" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-around" id="navbarNav1">
<ul class="navbar-nav ">
<li class="nav-item ">
<a id="navlink" class="nav-link hvr-underline-from-center " href="https://www.dimtiles.gr/">Αρχική</a>
</li>
<!----------------- MEGA MENU DAPEDO (START) ----------->
<div>
<li class="nav-item " type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<a id="navlink" class="nav-link hvr-underline-from-center" href="#">Δάπεδο</a>
<div id="megamenu" class="dropdown-menu w-100" aria-labelledby="dropdownMenuButton">
<div class="container">
<div id="megamenucol" class="dropdown-row ">
<h6 id="h6">Πλακάκια Δαπέδου</h6>
<hr class="solid">
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%ce%b4%ce%b1%cf%80%ce%b5%ce%b4%ce%b1-33-x-33/">33X33</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%ce%b4%ce%b1%cf%80%ce%b5%ce%b4%ce%bf%cf%85-30%cf%8760/">30X60</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%ce%b4%ce%b1%cf%80%ce%b5%ce%b4%ce%b1-45%cf%8745/">45X45</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%ce%b4%ce%b1%cf%80%ce%b5%ce%b4%ce%b1-50%cf%8750/">50X50</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%ce%b4%ce%b1%cf%80%ce%b5%ce%b4%ce%b1-60-%cf%87-60/">60X60</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%ce%b4%ce%b1%cf%80%ce%b5%ce%b4%ce%bf%cf%85-80%cf%8780/">80X80</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%ce%b4%ce%b1%cf%80%ce%b5%ce%b4%ce%b1-60-%cf%87-120/">60X120</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%ce%b4%ce%b1%cf%80%ce%b5%ce%b4%ce%bf%cf%85-%ce%bc%ce%b5%ce%b3%ce%b1%ce%bb%ce%b5%cf%83-%ce%b4%ce%b9%ce%b1%cf%83%cf%84%ce%b1%cf%83%ce%b5%ce%b9%cf%83/">120X240</a>
</div>
<div id="megamenucol" class="dropdown-row ">
<h6 id="h6">Πλακάκια Τ. Ξύλου</h6>
<hr class="solid">
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%cf%84%cf%85%cf%80%ce%bf%cf%85-%ce%be%cf%85%ce%bb%ce%bf%cf%85-15%cf%8760/">15X60</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%84%cf%85%cf%80%ce%bf%cf%85-%ce%be%cf%85%ce%bb%ce%bf%cf%85-15%cf%8790/">15X90</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%ce%b4%ce%b1%cf%80%ce%b5%ce%b4%ce%bf%cf%85-%cf%84-%ce%be%cf%85%ce%bb%ce%bf%cf%85-20%cf%87120/">20X120</a>
</div>
<div id="megamenucol" class="dropdown-row ">
<h6 id="h6">Παραδοσιακά</h6>
<hr class="solid">
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%b1%cf%81%ce%b1%ce%b4%ce%bf%cf%83%ce%b9%ce%b1%ce%ba%ce%b1/">Όλα τα προϊόντα</a>
</div>
<div id="megamenucol" class="dropdown-row ">
<h6 id="h6">Επενδύσεις</h6>
<hr class="solid">
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%ce%b5%cf%80%ce%b5%ce%bd%ce%b4%cf%85%cf%83%ce%b7/">Όλα τα προϊόντα</a>
</div>
</div>
</div>
</li>
</div>
<!----------------- MEGA MENU MPANIO (START) ----------->
<div>
<li class="nav-item " type="button" id="dropdownMenuButton1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<a id="navlink" class="nav-link hvr-underline-from-center" href="#">Μπάνιο</a>
<div id="megamenu" class="dropdown-menu w-100" aria-labelledby="dropdownMenuButton1">
<div class="container">
<div class="row ">
<h6 id="h6">Πλακάκια Μπάνιου</h6>
<hr class="solid">
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%ce%bc%cf%80%ce%b1%ce%bd%ce%b9%ce%bf%cf%85-20%cf%8720/">20X20</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%cf%84%ce%bf%ce%b9%cf%87%ce%bf%cf%85-20%cf%8750/">20X50</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%cf%84%ce%bf%ce%b9%cf%87%ce%bf%cf%85-20%cf%8760/">20X60</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%ce%bc%cf%80%ce%b1%ce%bd%ce%b9%ce%bf%cf%85-25%cf%8750/">25X50</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%ce%bc%cf%80%ce%b1%ce%bd%ce%b9%ce%bf%cf%85-25%cf%8775/">25X75</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%ce%bc%cf%80%ce%b1%ce%bd%ce%b9%ce%bf%cf%85-30%cf%8760/">30X60</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%ce%bc%cf%80%ce%b1%ce%bd%ce%b9%ce%bf%cf%85-30%cf%8790/">30X90</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%ce%bc%cf%80%ce%b1%ce%bd%ce%b9%ce%bf%cf%85-33%cf%8755/">33X55</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%ce%bc%cf%80%ce%b1%ce%bd%ce%b9%ce%bf%cf%85-40%cf%87120/">40X120</a>
</div>
<div id="megamenucol" class="dropdown-row ">
<br>
</div>
<div id="megamenucol" class="dropdown-row ">
<br>
</div>
<div id="megamenucol" class="dropdown-row ">
<br>
</div>
<div id="megamenucol" class="dropdown-row ">
<br>
</div>
</div>
</div>
</li>
</div>
<!----------------- MEGA MENU MPANIO (END) ----------->
</ul>
</div>
<div class="collapse navbar-collapse justify-content-around" id="navbarNav2">
<ul class="navbar-nav ">
<!----------------- MEGA MENU KOYZINA (START) ----------->
<div>
<li class="nav-item " type="button" id="dropdownMenuButton3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<a id="navlink" class="nav-link hvr-underline-from-center" href="#">Κουζίνα</a>
<div id="megamenu" class="dropdown-menu w-100" aria-labelledby="dropdownMenuButton3">
<div class="container">
<div id="megamenucol" class="dropdown-row ">
<h6 id="h6">Πλακάκια Κουζίνας</h6>
<hr class="solid">
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%ce%ba%ce%bf%cf%85%ce%b6%ce%b9%ce%bd%ce%b1%cf%83/">Όλα τα προϊόντα</a>
</div>
<div id="megamenucol" class="dropdown-row ">
<h6 id="h6">Ψηφίδες</h6>
<hr class="solid">
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%CF%80%CE%BB%CE%B1%CE%BA%CE%B1%CE%BA%CE%B9%CE%B1-%CE%BA%CE%BF%CF%85%CE%B6%CE%B9%CE%BD%CE%B1%CF%83/#psi">Όλα τα προϊόντα</a>
</div>
<div id="megamenucol" class="dropdown-row ">
<br>
</div>
<div id="megamenucol" class="dropdown-row ">
<br>
</div>
<div id="megamenucol" class="dropdown-row ">
<br>
</div>
</div>
</div>
</li>
</div>
<!----------------- MEGA MENU KOYZINA (END) ----------->
<!----------------- EIDIKA (START) ----------->
<div>
<li class="nav-item " type="button" id="dropdownMenuButton4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<a id="navlink" class="nav-link hvr-underline-from-center" href="#">Ειδικά</a>
<div id="megamenu" class="dropdown-menu w-100" aria-labelledby="dropdownMenuButton4">
<div class="container">
<div id="megamenucol" class="dropdown-row ">
<h6 id="h6">Δάπεδο</h6>
<hr class="solid">
<a id="dropdownitem"class="dropdown-item hvr-underline-from-center" href="https://www.dimtiles.gr/%CE%B5%CE%B9%CE%B4%CE%B9%CE%BA%CE%B1-%CF%83%CF%87%CE%B5%CE%B4%CE%B9%CE%B1/#da">Όλα τα προϊόντα</a>
</div>
<div id="megamenucol" class="dropdown-row ">
<h6 id="h6">Μπάνιο</h6>
<hr class="solid">
<a id="dropdownitem" class="dropdown-item hvr-underline-from-center" href="https://www.dimtiles.gr/%CE%B5%CE%B9%CE%B4%CE%B9%CE%BA%CE%B1-%CF%83%CF%87%CE%B5%CE%B4%CE%B9%CE%B1/#to">Όλα τα προϊόντα</a>
</div>
<div id="megamenucol" class="dropdown-row ">
<h6 id="h6">Κουζίνα</h6>
<hr class="solid">
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%CF%80%CE%BB%CE%B1%CE%BA%CE%B1%CE%BA%CE%B9%CE%B1-%CE%BA%CE%BF%CF%85%CE%B6%CE%B9%CE%BD%CE%B1%CF%83/#psi">Ψηφίδες</a>
</div>
<div id="megamenucol" class="dropdown-row ">
<h6 id="h6">Τ. Ξύλου</h6>
<hr class="solid">
<a id="dropdownitem" class="dropdown-item hvr-underline-from-center" href="https://www.dimtiles.gr/%CE%B5%CE%B9%CE%B4%CE%B9%CE%BA%CE%B1-%CF%83%CF%87%CE%B5%CE%B4%CE%B9%CE%B1/#woo">Όλα τα προϊόντα</a>
</div>
<div id="megamenucol" class="dropdown-row ">
<br>
</div>
</div>
</div>
</li>
</div>
<!----------------- MEGA MENU EIDIKA (END) ----------->
<li class="nav-item">
<a class="nav-link hvr-underline-from-center" href="#">Επικοινωνία</a>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" 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>

The dropdown only works when href have # in that

Bootstrap: when navbar collapsed branding overlapping other objects

When the navbar collapses into the burger menu, the branding overlaps with the navigation links - how do I separate them to avoid this happening? Ideally I'd like the branding to appear at the top.
The navbar structure is correct and working as expected when not collapsed, with all items positioned correctly, the problem only occurs when the menu collapses.
JSFiddle: https://jsfiddle.net/PeterLawson/Lkv8gj9a/2/
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!---Style Sheets-->
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<!---Website Title-->
<title>Notepad</title>
</head>
<body>
<!---Main Content-->
<!---Navigation Bar-->
<nav class="navbar nav-fill navbar-expand-lg navbar-light bg-light ">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarMenu">
<!---Search Bar-->
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
<!---Notepad Branding-->
<ul class="nav navbar-nav navbar-center">
<li><a class="navbar-brand" href="#"><img src="images\notepad-logo2.png" alt="Notepad Logo"
style="width:150px;"></a></li>
</ul>
<!---Navigation Links-->
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Discover Notepads</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarProductDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Catalogue
</a>
<div class="dropdown-menu" aria-labelledby="navbarProductDropdown">
<a class="dropdown-item" href="#">Furniture</a>
<a class="dropdown-item" href="#">Lighting</a>
<a class="dropdown-item" href="#">Decor</a>
</div>
</li>
<!---User Profile-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarAvatarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<img src="images\man.png" class="avatar">
</a>
<div class="dropdown-menu" aria-labelledby="navbarAvatarDropdown">
<a class="dropdown-item" href="#">Profile</a>
<a class="dropdown-item" href="#">My Notepads</a>
<a class="dropdown-item" href="#">Create New Notepad</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Sign Out</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
<!---Bootstrap JavaScript and jQuery-->
<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.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<!---Firebase SDK-->
<script src="https://www.gstatic.com/firebasejs/6.3.5/firebase-app.js"></script>
</body>
</html>
CSS:
.navbar-nav.navbar-center {
position: absolute;
left: 50%;
transform: translatex(-50%);
}
.navbar {
margin-left: 10px;
margin-right: 10px;
}
.main-logo{
width: 150px;
height: 50px;
}
.navbar-nav li a {
line-height: 50px;
}
.dropdown-menu > li > a {
height: 50px;
}
.avatar {
width: 48px;
height: 48px;
border-radius: 50%;
box-shadow:
inset 0 0 0 2px rgba(255,255,255,0.6),
0 1px 1px rgba(0,0,0,0.1);
background-color: transparent !important;
z-index: 999;
}
.avatar img {
border-radius: inherit;
width: inherit;
height: inherit;
display: block;
position: relative;
z-index: 998;
}

Simplest solution will be to take the brandImage out of the navigation - that'll help you achieve what you want; your styles.css file wasn't referred to completely, so i inserted a different logo - based on your logo, you would have to tune the padding etc.
Working snippet below:
.navbar-nav.navbar-center {
position: absolute;
left: 50%;
transform: translatex(-50%);
}
.navbar {
margin-left: 10px;
margin-right: 10px;
}
.main-logo {
width: 150px;
height: 50px;
}
.navbar-nav li a {
line-height: 50px;
}
.dropdown-menu>li>a {
height: 50px;
}
.avatar {
width: 48px;
height: 48px;
border-radius: 50%;
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6), 0 1px 1px rgba(0, 0, 0, 0.1);
background-color: transparent !important;
z-index: 999;
}
.avatar img {
border-radius: inherit;
width: inherit;
height: inherit;
display: block;
position: relative;
z-index: 998;
}
.navBarBrand {
list-style: none;
position: absolute;
left: calc(50% - 21px);
padding: 0;
z-index: 1;
}
#media screen AND (min-width:991px) {
.navBarBrand {
padding: 12px 0px;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<!---Website Title-->
<!---Main Content-->
<ul class="navBarBrand">
<li>
<a class="=" href="#"><img src="https://www.akberiqbal.com/apple-touch-icon-57x57.png" alt="Notepad Logo"></a>
</li>
</ul>
<!---Navigation Bar-->
<nav class="navbar nav-fill navbar-expand-lg navbar-light bg-light ">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarMenu">
<!---Search Bar-->
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
<!---Notepad Branding-->
<!---Navigation Links-->
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Discover Notepads</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarProductDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Catalogue
</a>
<div class="dropdown-menu" aria-labelledby="navbarProductDropdown">
<a class="dropdown-item" href="#">Furniture</a>
<a class="dropdown-item" href="#">Lighting</a>
<a class="dropdown-item" href="#">Decor</a>
</div>
</li>
<!---User Profile-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarAvatarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img src="images\man.png" class="avatar">
</a>
<div class="dropdown-menu" aria-labelledby="navbarAvatarDropdown">
<a class="dropdown-item" href="#">Profile</a>
<a class="dropdown-item" href="#">My Notepads</a>
<a class="dropdown-item" href="#">Create New Notepad</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Sign Out</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
<!---Bootstrap JavaScript and jQuery-->
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!---Firebase SDK-->
<script src="https://www.gstatic.com/firebasejs/6.3.5/firebase-app.js"></script>

How do I collapse a navbar for mobile devices?

.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>

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-*.