It's unclear what you mean by "not sure why," but this element is positioned from the left of the window.
To align the div to the same position, ensure it's positioned from the left at the exact same spot:
var position = $('#creators-toggle').position();
$('.creator-dropdown').css('left', position.left);
Here is an example:
$(document).ready(function() {
var position = $('#creators-toggle').position();
$('#offset').html(position.top);
$('#offset-left').html(position.left);
$('.creator-dropdown').css('left', position.left);
$('.creator-dropdown').hide(0);
$('#creators-toggle').click(function() {
if($('.creator-dropdown').is(':visible')) {
$('.creator-dropdown').slideUp(250);
}
if($('.creator-dropdown').is(':hidden')) {
$('.creator-dropdown').slideDown(250);
}
});
});
@import 'https://fonts.googleapis.com/css?family=Lato:100,300,400';
html {
font-family: "Lato", sans-serif;
}
// CSS code omitted for brevity
<html>
<head>
// External script references
</head>
<body>
<div class="navbar">
// Navbar content
</div>
<div class="creator-dropdown">
// Dropdown content
</div>
<h1 id="offset"></h1>
<h1 id="offset-left"></h1>
</body>
</html>
Changes in window width may disrupt positioning, requiring re-adjustment of the element.
You can update the position dynamically like this:
$('#creators-toggle').click(function() {
if($('.creator-dropdown').is(':visible')) {
$('.creator-dropdown').slideUp(250);
}
if($('.creator-dropdown').is(':hidden')) {
var position = $(this).position();
$('.creator-dropdown').css('left', position.left);
$('.creator-dropdown').slideDown(250);
}
});