We Keep Coding

Issue with CSS Text box rendering in IE

I have been trying to build a search engine using basic HTML and CSS for my Uni but IE just doesnt seem to like text boxes. Works perfectly fine in Chrome and Edge but for some reason doesnt work well in IE.
Screenshots attached below.
Image in IE
Image in Chrome
Any help would be highly appreciated.
Code for the search box and the search text button:
.search-box {
position: absolute;
top: 260px;
left: 46%;
transform: translate(-50%, -50%);
background: #2f3640;
height: 60px;
border-radius: 40px;
padding: 10px;
}
.search-box:hover > .search-text {
width: 350px;
padding: 0 6px;
}
.search-box:hover > .search-btn {
background: white;
}
.search-btn {
color: #e84118;
float: right;
width: 40px;
height: 40px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: #2f3640;
display: flex;
justify-content: center;
align-items: center;
transition: 1s;
}
.search-text {
font-family: VFRegular;
border: 1px red solid;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
transition: 0.5s;
line-height: 40px;
width: 0px;
}
/*
.search-box:hover ~ .category-box {
width: 400px;
opacity: 1;
visibility: visible;
}
.category-box:hover {
width: 400px;
opacity: 1;
visibility: visible;
}
.category-box {
position: absolute;
align-items: center;
top: 38%;
left: 50%;
text-decoration-color: white;
transform: translate(-50%, -50%);
background: #2f3640;
height: 60px;
border-radius: 40px;
padding: 10px;
width: 0px;
color: white;
visibility: collapse;
opacity: 0;
transition: width 1s, height 1s, transform 1s;
transition: opacity 1s;
}
*/
.search-box > ul {
left: -100px;
background-color: #2f3640;
color: white;
border-radius: 10px;
list-style-type: none;
font-size: 15px;
}
.search-box > ul li {
left: -10px;
margin: 0 0 10px 0;
border-bottom: 1px solid white;
z-index: 1;
}
.search-box > ul li:last-child {
margin: 0 0 10px 0;
border-bottom: 1px solid transparent;
}
.search-box > ul li:hover {
color: red;
}
<div class="entire-searchbox">
<div class="search-box">
<input class="search-text" type="text" placeholder="Type to search">
<a class="search-btn" href="#">
<i class="fas fa-search"></i>
</a>
<ul id="testListDummy">
</ul>
</div>
</div>

Can you set 400px in .search-box class should be work

Try to add the height property for the .search-text, code as below:
.search-text {
font-family: VFRegular;
border: 1px red solid;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
transition: 0.5s;
line-height: 40px;
width: 0px;
height:58px;
}
The output as below:

Close popup making it disapear from DOM and enable it

I've this button showing a popup made by html and css only, i want to make the popup disapear from DOM when i close it clicking on "delete from dom" button on the popup which is working, but i didn't find the opposite of "removeChild()" method to enable it once it is closed, i did try "appendChild()" which didn't worked for me. Thank you.
function del() {
var elem = document.querySelector('#popup1');
elem.parentNode.removeChild(elem);
}
h1 {
text-align: center;
font-family: Tahoma, Arial, sans-serif;
color: #06D85F;
margin: 80px 0;
}
.box {
width: 40%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #000;
border: 2px solid #06D85F;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: #06D85F;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#media screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
<div class="box">
<a class="button" href="#popup1">Let me Pop up</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Title</h2>
<a class="close" href="#">×</a>
<div class="content">
Text
<input type="submit" value="delete from dom" onclick=del() />
</div>
</div>
</div>

If you really want to delete the popup from the DOM, you have to keep a reference to it (in a variable).
You also have to save the parent (.parentNode obviously won't work while the element is removed and has no parent):
var elem = document.querySelector('#popup1');
var parent = elem.parentNode
function del() {
parent.removeChild(elem);
}
function add() {
parent.appendChild(elem)
}
h1 {
text-align: center;
font-family: Tahoma, Arial, sans-serif;
color: #06D85F;
margin: 80px 0;
}
.box {
width: 40%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #000;
border: 2px solid #06D85F;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: #06D85F;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#media screen and (max-width: 700px) {
.box {
width: 70%;
}
.popup {
width: 70%;
}
}
<div class="box">
<a class="button" href="#popup1" onclick="add()">Let me Pop up</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Title</h2>
<a class="close" href="#">×</a>
<div class="content">
Text
<input type="submit" value="delete from dom" onclick="del()" />
</div>
</div>
</div>

Do you really want to delete it or just hide it? Here I use the route to hide it (just as you use the route to show it) by removing the hash part of the url window.location.href = '#'.
function del() {
window.location.href = '#'
}
h1 {
text-align: center;
font-family: Tahoma, Arial, sans-serif;
color: #06D85F;
margin: 80px 0;
}
.box {
width: 40%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #000;
border: 2px solid #06D85F;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: #06D85F;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#media screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
<div class="box">
<a class="button" href="#popup1">Let me Pop up</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Title</h2>
<a class="close" href="#">×</a>
<div class="content">
Text
<input type="submit" value="Hide Pop-Up" onclick=del() />
</div>
</div>
</div>

How to close the dropdown if the user clicks outside of it?

I am making user dropdown when we click on the picture we get a dropdown or a card. I want to close it when user click outside of dropdown. The code of closing will be in JavaScript. Please solve this problem.
I think there will be a remove function in JavaScript which will remove the dropdown after clicking on it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple popup menu</title>
<style>
body {
margin: 0;
background: tomato;
font-family: 'Open Sans', sans-serif;
}
.menubtn {
cursor: pointer;
width: 40px;
height: 20px;
right: 10px;
top: 10px;
position: absolute;
}
.userimg {
border-radius: 50%;
height: 35px;
width: 35px;
}
.navmenu {
width: 150px;
border-radius: 10px;
margin-top: 30px;
background: #fff;
position: absolute;
right: 18px;
top: 25px;
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.15);
z-index: 10;
visibility: hidden;
opacity: 0;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
.navmenu.opened {
visibility: visible;
opacity: 1;
}
.navmenu::before {
content: '';
position: absolute;
top: -5px;
right: 7px;
width: 15px;
height: 15px;
background: #fff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.navmenu ul {
list-style: none;
margin: 0;
padding: 0;
}
.navmenu ul.text-list {
text-align: left;
font-weight: 100;
width: 100%;
margin: auto;
padding-top: 10px;
padding-bottom: 10px;
}
.navmenu ul.text-list li a {
text-decoration: none;
padding-left: 20px;
padding-top: 5px;
color: #343434;
font-weight: 600;
display: block;
line-height: 27px;
-webkit-transition: all 200ms ease;
transition: all 200ms ease;
}
.navmenu ul.text-list li a:hover {
color: tomato;
}
</style>
</head>
<body>
<div class="menubtn">
<span>
<img class="userimg" src="http://tryma.in/images/user/default.png"/>
</span>
</div>
<div class="navmenu">
<ul class="text-list">
<li>Home</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$('.menubtn').on('click', function() {
$('.navmenu').toggleClass('opened');
});
</script>
</body>
</html>
Please help me in solving this code. Thank You

Bind click on document and remove opened class on click of document.
Use e.stopPropagation() so that event does not propagate on document which event is invoked on click of the .menubtn
$('.menubtn').on('click', function(e) {
e.stopPropagation();
$('.navmenu').toggleClass('opened');
});
$(document).on('click', function() {
$('.navmenu').removeClass('opened');
});
body {
margin: 0;
background: tomato;
font-family: 'Open Sans', sans-serif;
}
.menubtn {
cursor: pointer;
width: 40px;
height: 20px;
right: 10px;
top: 10px;
position: absolute;
}
.userimg {
border-radius: 50%;
height: 35px;
width: 35px;
}
.navmenu {
width: 150px;
border-radius: 10px;
margin-top: 30px;
background: #fff;
position: absolute;
right: 18px;
top: 25px;
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.15);
z-index: 10;
visibility: hidden;
opacity: 0;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
.navmenu.opened {
visibility: visible;
opacity: 1;
}
.navmenu::before {
content: '';
position: absolute;
top: -5px;
right: 7px;
width: 15px;
height: 15px;
background: #fff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.navmenu ul {
list-style: none;
margin: 0;
padding: 0;
}
.navmenu ul.text-list {
text-align: left;
font-weight: 100;
width: 100%;
margin: auto;
padding-top: 10px;
padding-bottom: 10px;
}
.navmenu ul.text-list li a {
text-decoration: none;
padding-left: 20px;
padding-top: 5px;
color: #343434;
font-weight: 600;
display: block;
line-height: 27px;
-webkit-transition: all 200ms ease;
transition: all 200ms ease;
}
.navmenu ul.text-list li a:hover {
color: tomato;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menubtn">
<span>
<img class="userimg" src="http://tryma.in/images/user/default.png"/>
</span>
</div>
<div class="navmenu">
<ul class="text-list">
<li>Home</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>

Make menu hamburger close when click on link and outside

I created a simple hamburger menu for my site, I just can not get it to close after clicking on a link and going to the anchor that I put in and that also closes when I click off the menu.
My HTML is:
$(document).ready(function() {
$('.navbar-fostrap').click(function() {
$('.nav-fostrap').toggleClass('visible');
$('body').toggleClass('cover-bg');
});
});
nav {
height: 60px;
text-align: center;
position: relative;
width: width:100%;
margin: auto;
z-index: 100000;
}
.navbar-default {
transition: 500ms ease;
background: transparent;
}
.navbar-default.scrolled {
background: rgba(28, 28, 28, 0.8);
}
a.title {
float: left;
font-size: 25px;
color: white;
font-family: quantum;
height: 55px;
padding-top: 2px;
}
.title {
float: left;
display: inline-block;
padding: 0;
margin-top: 5px;
list-style: none;
height: 55px;
}
.nav-fostrap ul {
list-style-type: none;
margin-top: 5px;
padding: 0;
display: block;
float: right;
width: auto;
}
.nav-fostrap ul li {
display: inline-block;
font-weight: bold;
text-transform: uppercase;
text-align: center;
padding-left: 15px;
padding-right: 15px;
margin-top: 0;
list-style: none;
height: 60px;
}
a.menu {
font-family: Montserrat, Arial;
font-weight: 700;
position: relative;
display: inline-block;
cursor: pointer;
padding: 8px 0;
margin-top: 14.5px;
margin-bottom: 10.5px;
color: #fff;
text-decoration: none;
height: 40px;
top: -10px;
}
a:hover.menu {
color: #fff;
text-decoration: none;
}
.menu a:before,
a:after {
content: '';
position: absolute;
width: 0%;
height: 2px;
bottom: -2px;
background: #fff;
}
.menu a:before {
left: 0;
}
.menu a:after {
right: 0;
background: #fff;
transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.menu a:hover:before {
background: #fff;
width: 100%;
transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.menu a:hover:after {
background: transparent;
width: 100%;
transition: 0s;
}
.title-on-mobile {
display: none;
}
#media only screen and (max-width:768px) {
a.title {
float: none;
font-size: 25px;
color: white;
font-family: quantum;
height: 55px;
padding-top: 2px;
width: 100%;
text-align: center;
position: fixed;
left: -50px;
}
.nav-fostrap {
background: #1c1c1c;
width: 200px;
height: 100%;
display: block;
position: fixed;
left: -200px;
top: 0px;
-webkit-transition: left 0.25s ease;
-moz-transition: left 0.25s ease;
-ms-transition: left 0.25s ease;
-o-transition: left 0.25s ease;
transition: left 0.25s ease;
margin: 0;
border: 0;
border-radius: 0;
overflow-y: auto;
overflow-x: hidden;
height: 100%;
z-index: 105;
}
.nav-fostrap.visible {
left: 0px;
-webkit-transition: left 0.25s ease;
-moz-transition: left 0.25s ease;
-ms-transition: left 0.25s ease;
-o-transition: left 0.25s ease;
transition: left 0.25s ease;
z-index: 90;
}
.nav-bg-fostrap {
display: inline-block;
vertical-align: middle;
width: 100%;
height: 60px;
margin: 0;
position: absolute;
top: 0px;
left: 0px;
background: transperant;
padding: 12px 0 0 10px;
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
z-index: 100;
}
.navbar-fostrap {
display: inline-block;
vertical-align: middle;
height: 50px;
cursor: pointer;
margin-top: 5px;
position: absolute;
top: 0;
left: 0;
padding: 12px;
z-index: 102;
}
.navbar-fostrap span {
height: 2px;
background: #fff;
margin: 5px;
display: block;
width: 20px;
}
.navbar-fostrap span:nth-child(2) {
width: 20px;
}
.navbar-fostrap span:nth-child(3) {
width: 20px;
}
.nav-fostrap ul {
padding-top: 50px;
}
.nav-fostrap li {
display: block;
}
.nav-fostrap li a {
display: block;
color: #505050;
font-weight: 600;
}
.nav-fostrap li:first-child:hover a {
border-radius: 0;
}
.cover-bg {
background: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
}
<nav class="menu navbar navbar-default navbar-fixed-top">
<div class="headercontainer">
<a class="title" href="#seccao-inicio"><img src="img/logo.png" alt="logo" width="80" href="#" style="position: relative;margin-left: 12px; float:right; top:2.5px;position: relative;" /></a>
<div class='nav-fostrap'>
<ul class="menu">
<li><a class="menu" href="#seccao-historia" style="color: white;">História</a></li>
<li><a class="menu" href="#seccao-network" style="color: white;">Network</a></li>
<li><a class="menu" href="#seccao-fundadores" style="color: white;">Fundadores</a></li>
<li><a class="menu" href="contacto.html" style="color: white;">Contacto</a></li>
</ul>
</div>
<div class='nav-bg-fostrap'>
<div class='navbar-fostrap'> <span></span> <span></span> <span></span> </div>
</div>
</div>
</nav>
I am developing this site for a professional aptitude project of my course so any help was welcome. If anyone could help me I was very grateful, thank you.

You can use this part of code and also add any other logic you want.
$(document).click(function(e) {
var target = e.target;
if (
!$(target).is(".navbar-fostrap") &&
!$(target).parents(".navbar-fostrap").length &&
!$(target).parents(".nav-fostrap").length
) {
$(".nav-fostrap").removeClass("visible");
$("body").removeClass("cover-bg");
}
});
Full code here
$(document).ready(function() {
$(".navbar-fostrap").click(function() {
$(".nav-fostrap").toggleClass("visible");
$("body").toggleClass("cover-bg");
});
$(document).click(function(e) {
var target = e.target;
if (!$(target).is(".navbar-fostrap") &&
!$(target).parents(".navbar-fostrap").length &&
!$(target).parents(".nav-fostrap").length
) {
$(".nav-fostrap").removeClass("visible");
$("body").removeClass("cover-bg");
}
});
});
body {
background-color: red;
}
nav {
height: 60px;
text-align: center;
position: relative;
width: width:100%;
margin: auto;
z-index: 100000;
}
.navbar-default {
transition: 500ms ease;
background: transparent;
}
.navbar-default.scrolled {
background: rgba(28, 28, 28, 0.8);
}
a.title {
float: left;
font-size: 25px;
color: white;
font-family: quantum;
height: 55px;
padding-top: 2px;
}
.title {
float: left;
display: inline-block;
padding: 0;
margin-top: 5px;
list-style: none;
height: 55px;
}
.nav-fostrap ul {
list-style-type: none;
margin-top: 5px;
padding: 0;
display: block;
float: right;
width: auto;
}
.nav-fostrap ul li {
display: inline-block;
font-weight: bold;
text-transform: uppercase;
text-align: center;
padding-left: 15px;
padding-right: 15px;
margin-top: 0;
list-style: none;
height: 60px;
}
a.menu {
font-family: Montserrat, Arial;
font-weight: 700;
position: relative;
display: inline-block;
cursor: pointer;
padding: 8px 0;
margin-top: 14.5px;
margin-bottom: 10.5px;
color: #fff;
text-decoration: none;
height: 40px;
top: -10px;
}
a:hover.menu {
color: #fff;
text-decoration: none;
}
.menu a:before,
a:after {
content: '';
position: absolute;
width: 0%;
height: 2px;
bottom: -2px;
background: #fff;
}
.menu a:before {
left: 0;
}
.menu a:after {
right: 0;
background: #fff;
transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.menu a:hover:before {
background: #fff;
width: 100%;
transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.menu a:hover:after {
background: transparent;
width: 100%;
transition: 0s;
}
.title-on-mobile {
display: none;
}
#media only screen and (max-width:768px) {
a.title {
float: none;
font-size: 25px;
color: white;
font-family: quantum;
height: 55px;
padding-top: 2px;
width: 100%;
text-align: center;
position: fixed;
left: -50px;
}
.nav-fostrap {
background: #1c1c1c;
width: 200px;
height: 100%;
display: block;
position: fixed;
left: -200px;
top: 0px;
-webkit-transition: left 0.25s ease;
-moz-transition: left 0.25s ease;
-ms-transition: left 0.25s ease;
-o-transition: left 0.25s ease;
transition: left 0.25s ease;
margin: 0;
border: 0;
border-radius: 0;
overflow-y: auto;
overflow-x: hidden;
height: 100%;
z-index: 105;
}
.nav-fostrap.visible {
left: 0px;
-webkit-transition: left 0.25s ease;
-moz-transition: left 0.25s ease;
-ms-transition: left 0.25s ease;
-o-transition: left 0.25s ease;
transition: left 0.25s ease;
z-index: 90;
}
.nav-bg-fostrap {
display: inline-block;
vertical-align: middle;
width: 100%;
height: 60px;
margin: 0;
position: absolute;
top: 0px;
left: 0px;
background: transperant;
padding: 12px 0 0 10px;
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
z-index: 100;
}
.navbar-fostrap {
display: inline-block;
vertical-align: middle;
height: 50px;
cursor: pointer;
margin-top: 5px;
position: absolute;
top: 0;
left: 0;
padding: 12px;
z-index: 102;
}
.navbar-fostrap span {
height: 2px;
background: #fff;
margin: 5px;
display: block;
width: 20px;
}
.navbar-fostrap span:nth-child(2) {
width: 20px;
}
.navbar-fostrap span:nth-child(3) {
width: 20px;
}
.nav-fostrap ul {
padding-top: 50px;
}
.nav-fostrap li {
display: block;
}
.nav-fostrap li a {
display: block;
color: #505050;
font-weight: 600;
}
.nav-fostrap li:first-child:hover a {
border-radius: 0;
}
.cover-bg {
background: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="menu navbar navbar-default navbar-fixed-top">
<div class="headercontainer">
<a class="title" href="#seccao-inicio"><img src="img/logo.png" alt="logo" width="80" href="#" style="position: relative;margin-left: 12px; float:right; top:2.5px;position: relative;" /></a>
<div class='nav-fostrap'>
<ul class="menu">
<li><a class="menu" href="#seccao-historia" style="color: white;">História</a></li>
<li><a class="menu" href="#seccao-network" style="color: white;">Network</a></li>
<li><a class="menu" href="#seccao-fundadores" style="color: white;">Fundadores</a></li>
<li><a class="menu" href="contacto.html" style="color: white;">Contacto</a></li>
</ul>
</div>
<div class='nav-bg-fostrap'>
<div class='navbar-fostrap'> <span></span> <span></span> <span></span> </div>
</div>
</div>
</nav>
Hope it helps.

Centre drop down menu below parent div regardless of width

I'm trying to centre an absolute positioned drop down menu below the parent div which is of unknown width. I've attempted to use margin-left, left, and transform with no luck.
How it looks versus how I want it to look
JSFiddle
HTML
<div id="heads">
<div class="contain">
<div id="heads-menu">
<div id="heads-menu-name">
<img src="../resources/profile-icon.svg" />
<div>John Smith</div>
</div>
<div id="heads-menu-nav">
<div></div>
View Profile
Options
Help
Close Session
</div>
</div>
</div>
</div>
CSS
#heads-menu {
float: left;
}
#heads-menu-name {
border-bottom: 2px solid transparent;
cursor: pointer;
padding: 22px 0 20px 0;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
#heads-menu-name img {
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
float: left;
height: 26px;
margin-right: 10px;
width: 26px;
}
#heads-menu-name div {
color: #666;
float: left;
font: 600 normal normal 12px/16px Source Sans Pro, Arial, Helvetica, sans-serif;
margin: 5px 0;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
#heads-menu-name:hover {
border-bottom: 2px solid #5098BB;
}
#heads-menu-name:hover div {
color: #5098BB;
}
#heads-menu-nav {
background: rgba(0,0,0,.8);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
display: none;
overflow: visible;
padding: 5px 0;
position: absolute;
width: 140px;
}
#heads-menu-nav div {
border-bottom: 8px solid rgba(0,0,0,.8);
border-left: 8px solid transparent;
border-right: 8px solid transparent;
height: 0;
margin: 0 62px;
position: absolute;
top: -8px;
width: 0;
}
#heads-menu-nav a {
color: #CCC;
font: 600 normal normal 12px/16px Source Sans Pro, Arial, Helvetica, sans-serif;
padding: 10px 20px;
text-decoration: none;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
#heads-menu-nav a:hover {
background: rgba(255,255,255,.2);
color: #FFF;
}

You can try this :
$("#heads-menu-name").click(function(e) {
var linkWidth = $(this).width();
$("#heads-menu-nav").css('marginLeft', function() {
return '-' + (($(this).width()/2)-(linkWidth/2)) + 'px';
}).toggle();
e.stopPropagation();
});
Demo: https://jsfiddle.net/iRbouh/ataamc72/