Please help me... I don't know why it's doing it, but I cant find anything why this isn't working. I assume it got something to do with the used libraries, but - to be honest - I don't know what is causing the issue.
Oh, the issue (almost forgot to say what it is that I can't fix): If you open it up, you can see that the dropdown isn't centered. But, it should be. The question is: Why isn't it centered? I tried different things like the standard "margin: 0 auto;" and played around with the flexbox, but without any success...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>
.btn.btn-secondary.dropdown-toggle {
background-color: #cacaca;
color: white;
padding: 16px;
margin-top: 5%;
font-size: 16px;
border:none;
width: 100%;
font-family: 'Noto Sans JP', sans-serif;
}
.dropdown {
position: relative;
text-align: center;
padding-bottom: 10%;
padding: 20px;
}
.dropdown-menu {
text-align: center!important;
background-color: #f1f1f1;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1000;
display: absolute;
width: 50%;
margin: 0 auto!important;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-item {
padding: 12px 16px!important;
}
.aktiv a{
text-decoration: underline #3555ff;
color: #3555ff!important;
}
</style>
<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">
</head>
<body>
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Portfolio
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<div class="aktiv">
<a class="dropdown-item" href="#">Button 1</a>
</div>
<a class="dropdown-item" href="#">Button 2</a>
<a class="dropdown-item" href="#">Button 3</a>
<a class="dropdown-item" href="#">Button 4</a>
<a class="dropdown-item" href="#">Button 5</a>
<a class="dropdown-item" href="#">Button 6</a>
</div>
</div>
<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></body>
</html>In this particular case, adding transform: translate3d(50%, 109px, 0) !important; to the .dropdown-menu class CSS rule (and removing the margin) will help.
This will overwrite a setting that is added by one of your JS scripts on click - the one essential setting that is changed is the first parameter of translate3d, which should be 50% for horizontal centering. The rest remains as it was.
But for a "real", lasting solution you should change that value in that javascript.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>
.btn.btn-secondary.dropdown-toggle {
background-color: #cacaca;
color: white;
padding: 16px;
margin-top: 5%;
font-size: 16px;
border:none;
width: 100%;
font-family: 'Noto Sans JP', sans-serif;
}
.dropdown {
position: relative;
text-align: center;
padding-bottom: 10%;
padding: 20px;
}
.dropdown-menu {
text-align: center!important;
background-color: #f1f1f1;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1000;
display: absolute;
width: 50%;
transform: translate3d(50%, 109px, 0) !important;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-item {
padding: 12px 16px!important;
}
.aktiv a{
text-decoration: underline #3555ff;
color: #3555ff!important;
}
</style>
<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">
</head>
<body>
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Portfolio
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<div class="aktiv">
<a class="dropdown-item" href="#">Button 1</a>
</div>
<a class="dropdown-item" href="#">Button 2</a>
<a class="dropdown-item" href="#">Button 3</a>
<a class="dropdown-item" href="#">Button 4</a>
<a class="dropdown-item" href="#">Button 5</a>
<a class="dropdown-item" href="#">Button 6</a>
</div>
</div>
<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></body>
</html>