How to adjust dropdown position in bootstrap 4?
0
I want to adjust my dropdown position because on my desktop and in mobile the dropdown not showing properly. It is showing half. Kindly check the image below:
Kindly check my code what I am doing:
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light" style="padding-top: 0.15rem"> <!-- style="padding-top: 2.8rem" -->
<a class="navbar-brand" href="index.php">Admin Panel</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navb" aria-expanded="true">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navb" class="navbar-collapse collapse hide">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.php">My Dashboard</a> <!-- style="color:#007bff;" -->
</li>
</ul>
<ul class="nav navbar-nav ml-auto">
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">Hello rimi!</a>
<div class="dropdown-menu" style="margin-left:-50px;">
<a class="dropdown-item" href="sp.php">My Profile</a>
<a class="dropdown-item" href="cp.php">Change Password</a>
<a class="dropdown-item" href="logout.php">Logout</a>
</div>
</li>
</ul>
</div>
</nav>
My problem is if I add margin-left:30px; then dropdown not visible on mobile. If I add padding-left:30px; same thing happen. In this case padding and margin not working. Also text link also not properly align. And not fixing by margin and padding.
Any idea or suggestion would be welcome.
html css html5 css3 bootstrap-4
edited Jan 26 at 7:32
marc_s
576k12911111258
asked Nov 18 '18 at 20:04
SarahSarah
1486
add a comment |
0
I want to adjust my dropdown position because on my desktop and in mobile the dropdown not showing properly. It is showing half. Kindly check the image below:
Kindly check my code what I am doing:
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light" style="padding-top: 0.15rem"> <!-- style="padding-top: 2.8rem" -->
<a class="navbar-brand" href="index.php">Admin Panel</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navb" aria-expanded="true">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navb" class="navbar-collapse collapse hide">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.php">My Dashboard</a> <!-- style="color:#007bff;" -->
</li>
</ul>
<ul class="nav navbar-nav ml-auto">
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">Hello rimi!</a>
<div class="dropdown-menu" style="margin-left:-50px;">
<a class="dropdown-item" href="sp.php">My Profile</a>
<a class="dropdown-item" href="cp.php">Change Password</a>
<a class="dropdown-item" href="logout.php">Logout</a>
</div>
</li>
</ul>
</div>
</nav>
My problem is if I add margin-left:30px; then dropdown not visible on mobile. If I add padding-left:30px; same thing happen. In this case padding and margin not working. Also text link also not properly align. And not fixing by margin and padding.
Any idea or suggestion would be welcome.
html css html5 css3 bootstrap-4
edited Jan 26 at 7:32
marc_s
576k12911111258
asked Nov 18 '18 at 20:04
SarahSarah
1486
1
I suspect your problem arises from a) your use of inline styles and b) this line of code here:<div class="dropdown-menu" style="margin-left:-50px;">which appears to be pulling your dropdown menu to the left as it is a negative margin. If you're able to show the relevant styles from your stylesheet, or provide a working demo, that would be great.
– Frish
Nov 18 '18 at 21:27
add a comment |
0
0
0
I want to adjust my dropdown position because on my desktop and in mobile the dropdown not showing properly. It is showing half. Kindly check the image below:
Kindly check my code what I am doing:
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light" style="padding-top: 0.15rem"> <!-- style="padding-top: 2.8rem" -->
<a class="navbar-brand" href="index.php">Admin Panel</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navb" aria-expanded="true">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navb" class="navbar-collapse collapse hide">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.php">My Dashboard</a> <!-- style="color:#007bff;" -->
</li>
</ul>
<ul class="nav navbar-nav ml-auto">
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">Hello rimi!</a>
<div class="dropdown-menu" style="margin-left:-50px;">
<a class="dropdown-item" href="sp.php">My Profile</a>
<a class="dropdown-item" href="cp.php">Change Password</a>
<a class="dropdown-item" href="logout.php">Logout</a>
</div>
</li>
</ul>
</div>
</nav>
My problem is if I add margin-left:30px; then dropdown not visible on mobile. If I add padding-left:30px; same thing happen. In this case padding and margin not working. Also text link also not properly align. And not fixing by margin and padding.
Any idea or suggestion would be welcome.
html css html5 css3 bootstrap-4
edited Jan 26 at 7:32
marc_s
576k12911111258
asked Nov 18 '18 at 20:04
SarahSarah
1486
I want to adjust my dropdown position because on my desktop and in mobile the dropdown not showing properly. It is showing half. Kindly check the image below:
Kindly check my code what I am doing:
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light" style="padding-top: 0.15rem"> <!-- style="padding-top: 2.8rem" -->
<a class="navbar-brand" href="index.php">Admin Panel</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navb" aria-expanded="true">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navb" class="navbar-collapse collapse hide">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.php">My Dashboard</a> <!-- style="color:#007bff;" -->
</li>
</ul>
<ul class="nav navbar-nav ml-auto">
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">Hello rimi!</a>
<div class="dropdown-menu" style="margin-left:-50px;">
<a class="dropdown-item" href="sp.php">My Profile</a>
<a class="dropdown-item" href="cp.php">Change Password</a>
<a class="dropdown-item" href="logout.php">Logout</a>
</div>
</li>
</ul>
</div>
</nav>
My problem is if I add margin-left:30px; then dropdown not visible on mobile. If I add padding-left:30px; same thing happen. In this case padding and margin not working. Also text link also not properly align. And not fixing by margin and padding.
Any idea or suggestion would be welcome.
html css html5 css3 bootstrap-4
html css html5 css3 bootstrap-4
edited Jan 26 at 7:32
marc_s
576k12911111258
asked Nov 18 '18 at 20:04
SarahSarah
1486
edited Jan 26 at 7:32
marc_s
576k12911111258
asked Nov 18 '18 at 20:04
SarahSarah
1486
edited Jan 26 at 7:32
marc_s
576k12911111258
edited Jan 26 at 7:32
marc_s
576k12911111258
edited Jan 26 at 7:32
marc_s
576k12911111258
576k12911111258
asked Nov 18 '18 at 20:04
SarahSarah
1486
asked Nov 18 '18 at 20:04
SarahSarah
1486
asked Nov 18 '18 at 20:04
SarahSarah
1486
1486
1
I suspect your problem arises from a) your use of inline styles and b) this line of code here:<div class="dropdown-menu" style="margin-left:-50px;">which appears to be pulling your dropdown menu to the left as it is a negative margin. If you're able to show the relevant styles from your stylesheet, or provide a working demo, that would be great.
– Frish
Nov 18 '18 at 21:27
add a comment |
1
I suspect your problem arises from a) your use of inline styles and b) this line of code here:<div class="dropdown-menu" style="margin-left:-50px;">which appears to be pulling your dropdown menu to the left as it is a negative margin. If you're able to show the relevant styles from your stylesheet, or provide a working demo, that would be great.
– Frish
Nov 18 '18 at 21:27
1
1
I suspect your problem arises from a) your use of inline styles and b) this line of code here:
<div class="dropdown-menu" style="margin-left:-50px;"> which appears to be pulling your dropdown menu to the left as it is a negative margin. If you're able to show the relevant styles from your stylesheet, or provide a working demo, that would be great.– Frish
Nov 18 '18 at 21:27
I suspect your problem arises from a) your use of inline styles and b) this line of code here:
<div class="dropdown-menu" style="margin-left:-50px;"> which appears to be pulling your dropdown menu to the left as it is a negative margin. If you're able to show the relevant styles from your stylesheet, or provide a working demo, that would be great.– Frish
Nov 18 '18 at 21:27
add a comment |
2 Answers
2
active
oldest
votes
0
You'll need to remove the style="margin-left:-50px;" from your dropdown-menu class, and then change ml-auto to mr-auto (margin-left vs margin-right, which is where your menu is defaulting).
Here's a codepen if that works better for you.
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light" style="padding-top: 0.15rem"> <!-- style="padding-top: 2.8rem" -->
<a class="navbar-brand" href="index.php">Admin Panel</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navb" aria-expanded="true">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navb" class="navbar-collapse collapse hide">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.php">My Dashboard</a> <!-- style="color:#007bff;" -->
</li>
</ul>
<ul class="nav navbar-nav mr-auto">
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">Hello rimi!</a>
<div class="dropdown-menu" style="margin-left:-50px;">
<a class="dropdown-item" href="sp.php">My Profile</a>
<a class="dropdown-item" href="cp.php">Change Password</a>
<a class="dropdown-item" href="logout.php">Logout</a>
</div>
</li>
</ul>
</div>
</nav>answered Nov 19 '18 at 6:35
webfrogswebfrogs
1,16832447
add a comment |
0
Please overwrite bootstrap css in your css file.
.dropdown-menu {
left: -90px;
}
Default is left: 0; in Bootstrap.css file. Add negative value what you need.
answered Nov 21 '18 at 11:52
Shahriyar AhmedShahriyar Ahmed
8114
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53364919%2fhow-to-adjust-dropdown-position-in-bootstrap-4%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
You'll need to remove the style="margin-left:-50px;" from your dropdown-menu class, and then change ml-auto to mr-auto (margin-left vs margin-right, which is where your menu is defaulting).
Here's a codepen if that works better for you.
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light" style="padding-top: 0.15rem"> <!-- style="padding-top: 2.8rem" -->
<a class="navbar-brand" href="index.php">Admin Panel</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navb" aria-expanded="true">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navb" class="navbar-collapse collapse hide">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.php">My Dashboard</a> <!-- style="color:#007bff;" -->
</li>
</ul>
<ul class="nav navbar-nav mr-auto">
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">Hello rimi!</a>
<div class="dropdown-menu" style="margin-left:-50px;">
<a class="dropdown-item" href="sp.php">My Profile</a>
<a class="dropdown-item" href="cp.php">Change Password</a>
<a class="dropdown-item" href="logout.php">Logout</a>
</div>
</li>
</ul>
</div>
</nav>answered Nov 19 '18 at 6:35
webfrogswebfrogs
1,16832447
add a comment |
0
You'll need to remove the style="margin-left:-50px;" from your dropdown-menu class, and then change ml-auto to mr-auto (margin-left vs margin-right, which is where your menu is defaulting).
Here's a codepen if that works better for you.
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light" style="padding-top: 0.15rem"> <!-- style="padding-top: 2.8rem" -->
<a class="navbar-brand" href="index.php">Admin Panel</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navb" aria-expanded="true">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navb" class="navbar-collapse collapse hide">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.php">My Dashboard</a> <!-- style="color:#007bff;" -->
</li>
</ul>
<ul class="nav navbar-nav mr-auto">
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">Hello rimi!</a>
<div class="dropdown-menu" style="margin-left:-50px;">
<a class="dropdown-item" href="sp.php">My Profile</a>
<a class="dropdown-item" href="cp.php">Change Password</a>
<a class="dropdown-item" href="logout.php">Logout</a>
</div>
</li>
</ul>
</div>
</nav>answered Nov 19 '18 at 6:35
webfrogswebfrogs
1,16832447
add a comment |
0
0
0
You'll need to remove the style="margin-left:-50px;" from your dropdown-menu class, and then change ml-auto to mr-auto (margin-left vs margin-right, which is where your menu is defaulting).
Here's a codepen if that works better for you.
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light" style="padding-top: 0.15rem"> <!-- style="padding-top: 2.8rem" -->
<a class="navbar-brand" href="index.php">Admin Panel</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navb" aria-expanded="true">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navb" class="navbar-collapse collapse hide">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.php">My Dashboard</a> <!-- style="color:#007bff;" -->
</li>
</ul>
<ul class="nav navbar-nav mr-auto">
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">Hello rimi!</a>
<div class="dropdown-menu" style="margin-left:-50px;">
<a class="dropdown-item" href="sp.php">My Profile</a>
<a class="dropdown-item" href="cp.php">Change Password</a>
<a class="dropdown-item" href="logout.php">Logout</a>
</div>
</li>
</ul>
</div>
</nav>answered Nov 19 '18 at 6:35
webfrogswebfrogs
1,16832447
You'll need to remove the style="margin-left:-50px;" from your dropdown-menu class, and then change ml-auto to mr-auto (margin-left vs margin-right, which is where your menu is defaulting).
Here's a codepen if that works better for you.
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light" style="padding-top: 0.15rem"> <!-- style="padding-top: 2.8rem" -->
<a class="navbar-brand" href="index.php">Admin Panel</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navb" aria-expanded="true">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navb" class="navbar-collapse collapse hide">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.php">My Dashboard</a> <!-- style="color:#007bff;" -->
</li>
</ul>
<ul class="nav navbar-nav mr-auto">
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">Hello rimi!</a>
<div class="dropdown-menu" style="margin-left:-50px;">
<a class="dropdown-item" href="sp.php">My Profile</a>
<a class="dropdown-item" href="cp.php">Change Password</a>
<a class="dropdown-item" href="logout.php">Logout</a>
</div>
</li>
</ul>
</div>
</nav><link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light" style="padding-top: 0.15rem"> <!-- style="padding-top: 2.8rem" -->
<a class="navbar-brand" href="index.php">Admin Panel</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navb" aria-expanded="true">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navb" class="navbar-collapse collapse hide">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.php">My Dashboard</a> <!-- style="color:#007bff;" -->
</li>
</ul>
<ul class="nav navbar-nav mr-auto">
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">Hello rimi!</a>
<div class="dropdown-menu" style="margin-left:-50px;">
<a class="dropdown-item" href="sp.php">My Profile</a>
<a class="dropdown-item" href="cp.php">Change Password</a>
<a class="dropdown-item" href="logout.php">Logout</a>
</div>
</li>
</ul>
</div>
</nav><link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light" style="padding-top: 0.15rem"> <!-- style="padding-top: 2.8rem" -->
<a class="navbar-brand" href="index.php">Admin Panel</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navb" aria-expanded="true">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navb" class="navbar-collapse collapse hide">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.php">My Dashboard</a> <!-- style="color:#007bff;" -->
</li>
</ul>
<ul class="nav navbar-nav mr-auto">
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">Hello rimi!</a>
<div class="dropdown-menu" style="margin-left:-50px;">
<a class="dropdown-item" href="sp.php">My Profile</a>
<a class="dropdown-item" href="cp.php">Change Password</a>
<a class="dropdown-item" href="logout.php">Logout</a>
</div>
</li>
</ul>
</div>
</nav>answered Nov 19 '18 at 6:35
webfrogswebfrogs
1,16832447
answered Nov 19 '18 at 6:35
webfrogswebfrogs
1,16832447
answered Nov 19 '18 at 6:35
webfrogswebfrogs
1,16832447
answered Nov 19 '18 at 6:35
webfrogswebfrogs
1,16832447
1,16832447
add a comment |
add a comment |
0
Please overwrite bootstrap css in your css file.
.dropdown-menu {
left: -90px;
}
Default is left: 0; in Bootstrap.css file. Add negative value what you need.
answered Nov 21 '18 at 11:52
Shahriyar AhmedShahriyar Ahmed
8114
add a comment |
0
Please overwrite bootstrap css in your css file.
.dropdown-menu {
left: -90px;
}
Default is left: 0; in Bootstrap.css file. Add negative value what you need.
answered Nov 21 '18 at 11:52
Shahriyar AhmedShahriyar Ahmed
8114
add a comment |
0
0
0
Please overwrite bootstrap css in your css file.
.dropdown-menu {
left: -90px;
}
Default is left: 0; in Bootstrap.css file. Add negative value what you need.
answered Nov 21 '18 at 11:52
Shahriyar AhmedShahriyar Ahmed
8114
Please overwrite bootstrap css in your css file.
.dropdown-menu {
left: -90px;
}
Default is left: 0; in Bootstrap.css file. Add negative value what you need.
answered Nov 21 '18 at 11:52
Shahriyar AhmedShahriyar Ahmed
8114
answered Nov 21 '18 at 11:52
Shahriyar AhmedShahriyar Ahmed
8114
answered Nov 21 '18 at 11:52
Shahriyar AhmedShahriyar Ahmed
8114
answered Nov 21 '18 at 11:52
Shahriyar AhmedShahriyar Ahmed
8114
8114
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53364919%2fhow-to-adjust-dropdown-position-in-bootstrap-4%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
I suspect your problem arises from a) your use of inline styles and b) this line of code here:
<div class="dropdown-menu" style="margin-left:-50px;">which appears to be pulling your dropdown menu to the left as it is a negative margin. If you're able to show the relevant styles from your stylesheet, or provide a working demo, that would be great.– Frish
Nov 18 '18 at 21:27