I added a dropdown menu to my bootstrap4 navbar, but the dropdown menu exceeds the page by quite a bit (on the right side).
I tried applying a few things I saw on google like adding dropdown-menu-left or drop-left but both haven't worked for me. The only thing that works at the moment is applying margin-right to the element but that's not what I want since it ruins the format of my navbar.
https://imgur.com/a/jpCWi3e
My html
<!-- right side -->
<ul class="navbar-nav ml-auto">
#if (isset($_SESSION['user_data']))
<!-- Dropdown -->
<li class="nav-item dropdown" style="right: 0;">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
{{$_SESSION['user_data']->username}}
</a>
<div class="dropdown-menu dropleft">
<a class="dropdown-item" href="{{ url('/servers') }}">Manage servers</a>
<a class="dropdown-item" href="{{ url('/logout') }}">Logout</a>
</div>
</li>
#else
#endif
</ul>
Have you tried dropdown-menu-right on your dropdown-menu ?
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="{{ url('/servers') }}">Manage servers</a>
<a class="dropdown-item" href="{{ url('/logout') }}">Logout</a>
</div>
Here's a fiddle for that (try to enlarge the preview window if you see the mobile layout).
Is it what you're looking for?
See bootstrap4 documentation for more details on menu alignment
Related
I want to responsively align items on the bottom of a sidenav, made using Bootstrap 5. I incorporated an example of a sidebar from the official Bootstrap Examples, and the .offcanvas class.
In the example, there was a dropdown next to a user profile where the user can access a ton of settings –– aligned at the bottom of the sidebar. However, that just wouldn’t work for me in my version of the offcanvas sidebar. I have tried a multitude of ways, but none of them have worked responsively.
Below is my code, not first and foremost, but at a decent introductory point in this question.
<!DOCTYPE html>
<html lang="en">
<head>
<title>BS5 Offcanvas Sidenav</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.5.0/css/all.min.css" rel="stylesheet">
<style>
.dropup {
position: absolute;
bottom:0;
padding-bottom:2vh;
}
</style>
</head>
<body>
<main>
<nav class="navbar navbar-dark bg-dark d-md-none d-lg-none" aria-label="Dark offcanvas navbar">
<div class="container-fluid">
<a class="navbar-brand" href="#">Side Nav</a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbarDark" aria-controls="offcanvasNavbarDark">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-start text-bg-dark flex-column d-flex" tabindex="-1" id="offcanvasNavbarDark" aria-labelledby="offcanvasNavbarDarkLabel" style="min-width:160px;max-width:210px">
<div class="offcanvas-header">
<span class="fs-4">Offcanvas</span>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="text-bg-dark offcanvas-body" style="height:100%">
<hr>
<ul class="nav nav-pills flex-column mb-auto">
<li class="nav-item">
<a href="#" class="nav-link active" aria-current="page">
Home
</a>
</li>
<li>
<a href="#" class="nav-link text-white">
Option A
</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link align-items-center text-white text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Option B
</a>
<ul class="dropdown-menu dropdown-menu-dark text-small shadow">
<li><a class="dropdown-item" href="#">B. 1</a></li>
<li><a class="dropdown-item" href="#">B. 2</a></li>
<li><a class="dropdown-item" href="#">B. 3</a></li>
<li><a class="dropdown-item" href="#">B. 4</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">B. 5</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">B. 6</a></li>
</ul>
</li>
<li>
<a href="#" class="nav-link text-white">
Option C
</a>
</li>
<li>
<a href="#" class="nav-link text-white">
Option D
</a>
</li>
<li>
<a href="#" class="nav-link text-white">
Option E
</a>
</li>
</ul>
<hr class="mt-auto">
<div class="dropup">
<a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<img src="https://avatars.githubusercontent.com/u/0" alt="" width="32" height="32" class="rounded-circle me-2">
<strong>Jippy</strong>
</a>
<ul class="dropdown-menu dropdown-menu-dark text-small shadow">
<li><a class="dropdown-item" href="#">New Project...</a></li>
<li><a class="dropdown-item" href="#">Settings</a></li>
<li><a class="dropdown-item" href="#">Profile</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Sign out</a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="bg-light mx-auto">
<h1 class="display-5 fw-normal">Navbar with offcanvas</h1>
<p class="fs-5">This is a navbar that uses the <code>.offcanvas</code> Bootstrap class to work. I used a simple sidebar template from the official Bootstrap Examples along with the offcanvas class to make this work. The sidebar only shows on smaller screens.</p>
<p>However, I am facing a <b>problem</b>. The dropup that should be displayed at the bottom of the sidebar? It is made using <code>position: absolute</code>, thus it starts to overlay on top of the other sidebar components if the vertical height is too small. However, I can't figure out how else to put the dropup at the bottom, which is the core of my problem.</p>
<p>Sure, one could think that no one will probably ever go onto a website with a screen height of less than 400px, but with the age of smartwatches, I'm not too sure about that. So, I want to make this responsive. How can I do that?
<p>
<a class="btn btn-primary" href="https://getbootstrap.com" role="button">Made using Bootstrap 5.2.3</a>
</p>
</div>
</div>
</main>
</body>
</html>
As you can see above, I have incorporated some styling to try to get what I want to happen.
<style>
.dropup {
position: absolute;
bottom:0;
padding-bottom:2vh;
}
This works decently well, but does not work correctly on smaller screens.
I have some images to show to explain what’s wrong.
This image shows what the positioning of the dropup is on a standard phone, and I have no complaints here.
However...
When the screen height gets below 400px, the dropup continues to stay at the bottom of the sidenav, causing it to overlay on the other items
EDIT: I don’t have enough reputation to post the images directly, so please follow the links StackOverflow generated.
Citizen
Try using The code Below after changing class names
#media screen and ( max-height: 400px ) {
.logo{
reduce font size of text menu e.g- font-size:12px;
reduce height and width of image e.g- width: 100px; height:30px;
reduce top/bottom padding and margin e-g - margin-top:2px; margin-bottom:2px;
}
.search{
reduce font size of menu items
reduce gap between menu items
}
.main-menu{
reduce font size of menu items
reduce gap between menu items
}
}
I made a dropdown menu using bootstrap. It works perfectly fine when I load an HTML file in VScode. But it does not work when I use the same dropdown markup in .NET6 MVC app's .cshtml file. By "does not work" I mean when I click on dropdown arrow, dropdown menu does not appear.
Note: I have verified all required bootstrap files are linked.
Here is the markup below:
<div class="dropdown text-end ms-4 me-1">
<a href="#" class="d-block link-dark text-decoration-none dropdown-toggle" id="dropdownUser1"
data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-person-circle" style="font-size: 2rem;"></i>
</a>
<ul class="dropdown-menu text-small" aria-labelledby="dropdownUser1" style="">
<li><a class="dropdown-item" href="#">My Orders</a></li>
<li><a class="dropdown-item" href="#">Address</a></li>
<li><a class="dropdown-item" href="#">Settings</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Sign out</a></li>
</ul>
</div>
This problem was caused as the default link to local files of bootstrap was also added. Hence, my layout page was linking to both bootstrap CDN and defaulted bootstrap link when the MVC app is created. I removed the link to local bootstrap file that solved the problem.
For some reason this dropdown menu is not showing the listed elements when hovered. Using bootstrap.
Am I missing something here? Maybe it's something simple but I just cannot see it.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Services -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown">Services</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<h6 class="dropdown-header">Dropdown header</h6>
<a class="dropdown-item" href="#">Rewiring</a>
<a class="dropdown-item" href="#">Light Fixes</a>
<a class="dropdown-item" href="#">Showers</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Rewiring</a>
<a class="dropdown-item" href="#">Light Fixes</a>
<a class="dropdown-item" href="#">Showers</a>
</div>
</li>
In Bootstrap, dropdown runs by default on mouse click, if you want to show dropdown on mouse hover then you have to use css or js
I have used css
.dropdown:hover ul.dropdown-menu{ display: block; }
.dropdown:hover ul.dropdown-menu{ display: block; }
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/js/bootstrap.bundle.min.js"></script>
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
Services
</button>
<ul class="dropdown-menu">
<li><h6 class="dropdown-header">Dropdown header</h6></li>
<li><a class="dropdown-item" href="#">Rewiring</a></li>
<li><a class="dropdown-item" href="#">Light Fixes</a></li>
<li><a class="dropdown-item" href="#">Showers</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Rewiring</a></li>
<li><a class="dropdown-item" href="#">Light Fixes</a></li>
<li><a class="dropdown-item" href="#">Showers</a></li>
</ul>
</div>
More things to talk about here:
Opening dropdown in BS is done by Popper.js (which is not part of bootstrap.min.js). So in order to make dropdown working, you need to load Bootstrap JS via bundle, where Popper.js is included
https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js
Since you are using BS5, you need to change data-toggle="dropdown" to data-bs-toggle="dropdown". That is new markup from version 5 onwards.
As mentioned in another answer, opening dropdown on click (and not hover) is core part of BS philosophy (unfortunately). So in case you want to open submenu on hover, additional CSS has to be added.
Also be careful with the markup. It would be more clean to use the structure recommended by BS for the navigation (using <ul>, <li>, etc.)
change <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown">Services</a>
to
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"> Dropdown button </button>
Change it to a button then it shoud work!!
I have found the solution:
This was the line causing trouble.
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown">Services</a>
I simply just added the following via Bootstrap:
aria-haspopup="true" aria-expanded="false"
I created a search form with some nav-tabs and a button to let the user change the language.
My problem is that whenever I change the language the position of the button changes as well, for the lengths of the strings in the nav-items differ (e.g. if I translate "City" in Spanish, the string becomes "Ciudad" and the button moves to the right for the length of the string is greater).
In other terms, when the strings are longer the boxes of the nav-tabs are wider as well, therefore the button is moved to the right.
I want to fix its position to the right of the nav-items, independently of which is the length of the strings inside.
The button is a Bootstrap dropdown button and lives inside the same <div> where I put the nav-items. I also set its position to relative for I want to fix it in relation to the width of the screen ("translate" is the ID of the button):
#translate {
background-color: #d63040;
position: relative;
left: 100px;
}
<ul class="form-inline nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a lang="en" class="nav-link active" id="citta-tab" data-toggle="tab" href="#citta" role="tab" aria-controls="citta" aria-selected="true">CITY</a>
</li>
<li class="nav-item">
<a lang="en" class="nav-link" id="regione-tab" data-toggle="tab" href="#region" role="tab" aria-controls="region" aria-selected="false">REGION</a>
</li>
<li class="nav-item">
<a lang="en" class="nav-link" id="about-tab" data-toggle="tab" href="#about" role="tab" aria-controls="about" aria-selected="false">ABOUT</a>
</li>
<div class="btn-group">
<button id="translate" type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-language"></i>
</button>
<div class="dropdown-menu">
<a id="itButton" class="dropdown-item" href="#lang-en" onclick="window.lang.change('it');return false;">It</a>
<a id="frButton" class="dropdown-item" href="#lang-en" onclick="window.lang.change('fr');return false;">Fr</a>
<a id="enButton" class="dropdown-item" href="#lang-en" onclick="window.lang.change('en');return false;">En</a>
<a id="esButton" class="dropdown-item" href="#lang-en" onclick="window.lang.change('es');return false;">Es</a>
</div>
</div>
</ul>
Ideally, I would like to fix the position more to the right of the nav-items, as in the following image:
However, if I set a greater value (for instance, 300px) the button disappears when I resize the screen:
How may I fix the position of such a button regardless of the elements around? And how may I do that by keeping its position "relative" to the size of the window of the browser?
this might be a way to solve our problem
.navbar {
display: flex;
justify-content: space-between;
}
<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">
<nav class="navbar">
<ul class="form-inline nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a lang="en" class="nav-link active" id="citta-tab" data-toggle="tab" href="#citta" role="tab" aria-controls="citta" aria-selected="true">CITY</a>
</li>
<li class="nav-item">
<a lang="en" class="nav-link" id="regione-tab" data-toggle="tab" href="#region" role="tab" aria-controls="region" aria-selected="false">REGION</a>
</li>
<li class="nav-item">
<a lang="en" class="nav-link" id="about-tab" data-toggle="tab" href="#about" role="tab" aria-controls="about" aria-selected="false">ABOUT</a>
</li>
</ul>
<div class="btn-group">
<button id="translate" type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-language"></i>
</button>
<div class="dropdown-menu">
<a id="itButton" class="dropdown-item" href="#lang-en" onclick="window.lang.change('it');return false;">It</a>
<a id="frButton" class="dropdown-item" href="#lang-en" onclick="window.lang.change('fr');return false;">Fr</a>
<a id="enButton" class="dropdown-item" href="#lang-en" onclick="window.lang.change('en');return false;">En</a>
<a id="esButton" class="dropdown-item" href="#lang-en" onclick="window.lang.change('es');return false;">Es</a>
</div>
</div>
</nav>
position: static;
white-space: normal;
float: right;
Hopefully, this will do the trick for you.
I solved the problem by doing the following:
1) In the HTML file, I create a new <div> for the <h1> element and moved the <button> inside it:
<div class="form-inline">
<!-- h1 element -->
<a href="" class="link-home" id="buttonTitle"><h1 id="TitleH1" class="display-4"> Discover the Amazing
Route </h1></a>
<!-- Button -->
<div class="btn-group float-right">
<button id="translate" type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<i class="fas fa-language"></i>
</button>
<div class="dropdown-menu">
<a id="itButton" class="dropdown-item" href="#lang-en"
onclick="window.lang.change('it');return false;">It</a>
<a id="frButton" class="dropdown-item" href="#lang-en"
onclick="window.lang.change('fr');return false;">Fr</a>
<a id="enButton" class="dropdown-item" href="#lang-en"
onclick="window.lang.change('en');return false;">En</a>
<a id="esButton" class="dropdown-item" href="#lang-en"
onclick="window.lang.change('es');return false;">Es</a>
</div>
</div>
</div>
2) I assigned a margin-right to the <h1> element to place distance between the title and the button: by doing so, I can move the button horizontally (the wider is the margin of the <h1>, the more distant is the button):
h1 {
margin-right: 585px;
}
3) I assigned the Bootstrap class float-right to the button to float it to the right (see Boostrap documentation):
<div class="btn-group float-right">
<!-- ... -->
</div>
By doing so, I could place the button where I wanted; at the same time it doesn't disappear when the window of the browser is resized and made the smallest as possible.
I am pretty new to html/css/bootstrap 4 and am creating a navbar as of now. Basically I want a youtube logo that redirects to a yt channel on the left, spotify logo to spotify creator on the right and in the middle the name of the creator, which is a dropdown for navigating the site. Somehow I managed to do this with one exception - name of the creator isnt centered by viewport, so when I go to create a headline with they arent aligned horizonally - the name is a bit off center (to the right). How do I go about centering it? -
My messy code:
<nav class="navbar navbar-light bg-black">
<a class="nav-link" style="color:white" href="https://www.youtube.com/channel/UC_OvfkWfYRvdkazcOoeJd8Q"><img src="img/yt-logo-dark.png" alt="YouTube" height="25px"></a>
<ul class="nav justify-content-center">
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false" style="color:white"><h2>KJK Music</h2></a>
<div class="dropdown-menu">
<a class="dropdown-item disabled" href="about-me">O mně</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item disabled" href="about-site">O stránce</a>
</div>
</li>
</ul>
<a class="navbar-link" style="color: white" href="https://open.spotify.com/artist/7vlBedEBJhQlJCl1tpknhi"><img src="img/SpotifyIcon.png" alt="Spotify" height="50px" style="margin:12.5px"></a>
</nav>
(Had to do it as a snippet, otherwise the formatting would be even wierder)
If you want to make horizontal center "KJK Music", it is already centered because your tag have justify-content-center class. + You can user "text-center" class to make it horizontally centered or text-align:center CSS property.