I want the dropdown on the right.
In such a way it doesn't clip the right side of the browser.
No matter what something goes wrong.
Why can't things not just work in css? (sry i'm really frustrated)
There is always some special case why things have to be done different.
Anyway, how can I get the dropdown to the right side?
<div id="footer">
<div class="share">
<ul class="nav nav-pills">
<li class="nav-item dropup">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Share</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Facebook</a>
<a class="dropdown-item" href="#">Twitter</a>
</div>
</li>
</ul>
</div>
</div>
#footer {
position: fixed;
bottom: 0;
}
.share {
float: right;
}
add a width to your footer. The dropdown is floating right, the footer just isnt as wide as you think it is by default.
#footer {
position: fixed;
bottom: 0;
width: 100%;
}
stuff like this can easily be diagnosed using dev tools that chrome or firefox provide :)
Related
New to Bootstrap 4 and making a dummy/mockup page with a header to get use to the navbar system.
I created this jsFiddle (full code) here, but the gist of my page is:
index.html
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="javascript:void(0)">
<img src="https://raw.githubusercontent.com/bitbythecron/bootstrap-troubleshooting/main/dummy-logo.png" class="img-fluid mainlogo" alt="Responsive image">
</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navb">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navb">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="javascript:void(0)" id="aboutMenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
About
</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="javascript:void(0)" id="fizzMenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Fizz
</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="javascript:void(0)" id="buzzMenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Buzz
</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="javascript:void(0)" id="foobarMenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Foobar
</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="javascript:void(0)" id="resourcesMenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Resources
</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="javascript:void(0)" id="helpMenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Help
</a>
</li>
<li class="nav-item">
<a class="nav-link red-button" href="javascript:void(0)">WATCH DEMO</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Sign In</a>
</li>
<li class="nav-item">
<a class="nav-link bordered" href="javascript:void(0)">Sign Up</a>
</li>
</ul>
</div>
</nav>
main.css
html, body {
height: 100%;
font-family: 'Lato';
}
.bordered {
border-radius: 5px;
border: 1px solid white;
}
.navbar {
background-color: #00142e;
}
.red-button {
border-radius: 5px;
border: 1px solid #A81E30;
background-color: #A81E30;
color: beige;
}
.mainlogo {
width: 35%;
}
When this runs I get:
The main problem here is the thickness of the padding around the navbar. How do I make it so that there is no padding, and that the height of the navbar is either the same as that of the logo and menu links, or at most just a pixel or two greater than? I did try adding padding: 0px; to the navbar style but that did not affect anything.
Also I would like to center all the navbar content (logo + menu items)...any ideas there? I did try adding d-flex justify-content-center to navbar-collapse but that also did nothing. Thanks in advance!
Update
I updated my jsFiddle with the suggested changes from below and now I'm seeing:
So I'm still not seeing the navbar (again: logo + links) content centered and I'm seeing undesired padding, meaning the blue bar is a little too tall for what I'm looking for (I want something shorter and hugging the logo + links a little tighter).
To fix the centering, add align-item: center to your unordered list. That should be the child element of your navbar-collapse element, and it will center all your links vertically.
As for the padding, I think that it would be better to remove class="img-fluid mainlogo" alt="Responsive image" and instead just give your image a height property that you like. When I did just that, it also looked like it fixed your centering problem as well.
Let me know if that worked for you!
edited to add code snippet
/*old selector for mainlogo*/
.mainlogo {
width: 35%;
}
/*new selector for mainlogo*/
.mainlogo {
height: 50px;
}
/*added selector. targets ul elements that are descendents of element with id "navb"*/
#navb ul {
align-items: center;
}
Navbar after changes
I forked your work in JSFiddle, see what I did.
In fact, I wrapped your <nav> whithin an <header>, then I have added the bootstrap class container to get the content centered depending on the screen size with media-queries.
Also, I have changed your content class container-fluid to container in order to have the same sizing results between the navbar and the rest of your page.
I removed the img-fluid on your image, in order to avoid stretching the image if the page is resized.
Also, as your question in an other post where I answered, I have changed the navbar background to fit your brand-logo background color ;)
And in bonus I added the class navbar-dark, now you can see your burger menu when nav items are collapse. Because since bootstrap 4 :
.navbar-default is now .navbar-light, though .navbar-dark remains the same. One of these is required on each navbar. However, these classes no longer set background-colors; instead they essentially only affect color.
Bonus 2 : I removed your red-button class, and changed it to btn btn-danger which is quite the same, but with hover rules. And for your sign-up button, I added btn btn-success. I did that to let you learn on those classes too, because it is not necessary to reinvent the wheel :)
Then, you can use in your questions / answers in StackOverflow, the built-in JSFiddle Javascript/HTML/CSS snippet CTRL-M as below :
html, body {
height: 100%;
font-family: 'Lato';
}
.bordered {
border-radius: 5px;
border: 1px solid white;
}
header#nav-container{
background-color: #001a31;
}
#navb ul {
align-items: center;
}
.mainlogo {
height: 50px;
}
<!DOCTYPE html>
<html>
<head>
<title>Special Nonprofit</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,300;1,300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<header id="nav-container">
<nav class="navbar navbar-dark navbar-expand-lg container">
<a class="navbar-brand" href="javascript:void(0)">
<img src="https://raw.githubusercontent.com/bitbythecron/bootstrap-troubleshooting/main/dummy-logo.png" class="mainlogo" alt="Responsive image">
</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navb">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navb">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="javascript:void(0)" id="aboutMenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
About
</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="javascript:void(0)" id="fizzMenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Fizz
</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="javascript:void(0)" id="buzzMenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Buzz
</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="javascript:void(0)" id="foobarMenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Foobar
</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="javascript:void(0)" id="resourcesMenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Resources
</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="javascript:void(0)" id="helpMenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Help
</a>
</li>
<li class="nav-item">
<a class="nav-link btn btn-danger" href="javascript:void(0)">WATCH DEMO</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Sign In</a>
</li>
<li class="nav-item">
<a class="nav-link btn btn-success" href="javascript:void(0)">Sign Up</a>
</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
Try This!
.sidebar {
height: 100%;
width: 0;
position: fixed;
/*Stays in place */
background-color: #303630;
/*Grey*/
overflow-x: hidden;
color:white;
z-index: 12;
/*for Disabling horizontal scroll */
}
/* Position and style for the sidebar links */
.sidebar a {
padding: 10px 10px 10px;
font-size: 25px;
color: #ffffff;
display: block;
transition: 0.3s;
}
/* the links change color when mouse hovers upon them*/
.sidebar a:hover {
color: #ffffff;
}
/* Position and style the for cross button */
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
}
/* Style for the sidebar button */
.openbtn {
font-size: 25px;
background-color: #000000;
color: #ffffff;
padding: 10px 10px 10px;
border: none;
position: fixed;
z-index: 12;
}
/* the sidebar button changes
color when mouse hovers upon it */
.openbtn:hover {
color: #FFFFFF;
}
/* pushes the page content to the right
when you open the side navigation */
#main {
transition: margin-left .5s;
/* If you want a transition effect */
padding: 10px;
}
<div id="sidebar" class="sidebar">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">
×
</a>
Placeholder 1
Placeholder 2
Placeholder 3
Placeholder 4
Placeholder 5
Placeholder 6
</div>
<div id="main">
<button class="openbtn" onclick="openNav()">
Hello
</button>
</div>
<script>
/* Sets the width of the sidebar
to 250 and the left margin of the
page content to 250 */
function openNav() {
document.getElementById(
"sidebar").style.width = "250px";
document.getElementById(
"main").style.marginLeft = "250px";
}
/* Set the width of the sidebar
to 0 and the left margin of the
page content to 0 */
function closeNav() {
document.getElementById(
"sidebar").style.width = "0";
document.getElementById(
"main").style.marginLeft = "0";
}
</script>
I have moved all the navbar content to the center with mx-auto class. removed the padding for top and bottom with py-0 class. this equal to padding-top: 0; padding-bottom: 0; then with media queries. I'm switching between main and secondary logo.
Here's the code:
https://codepen.io/lachiweb/pen/dyXBGvd
I'm having an issue with the CSS of my Bootstrap dropdown menu for my web app. It is too far to the right edge of the page for my liking, and I would simply like it to be shifted to the left a bit more. I have tried to style the menu with a margin-right in order to get it off the edge of the screen, but still no luck even though if I do the same with margin-left, it moves the menu even farther off the right edge of the screen. I need some assistance with the CSS on this issue. Below is what the menu looks like:
I simply have given an ID "dropdownMenu" to the dropdown, and it is being applied to the correct HTML element, but the margin-right is simply not working. Here is the accompanying HTML:
<ul class="navbar-nav ml-auto">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
More <span class="caret"></span>
</a>
<ul class="dropdown-menu" id="dropdownMenu">
<li class="nav-item">
<a class="nav-link" href="${contextRoot}/profile">
Account
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:$('#logoutForm').submit();">
Sign Out
</a>
</li>
<sec:authorize access="hasRole('ROLE_ADMIN')">
<li class="nav-item">
<a class="nav-link" href="${contextRoot}/register">
Register
</a>
</li>
</sec:authorize>
</ul>
</li>
</ul>
#dropdownMenu {
margin-right: 2% !important;
position: relative;
}
You can try for example margin-right: 20px !important.
!important will gonna apply the margin right to your element because it will gonna override the old value.
The original CSS for Bootstrap dropdown-menu class has property left:0. I altered this, and the final placement I liked was left:-10px; You see in the image the menu is no longer on the edge.
So, here is the website I've built using bootstrap 4.
I have a big issue with the logo, as it keeps the same size on all devices.
I've tried adding img-fluid, but if I add this class, the logo shrinks so much on mobile phones, that it looks like a tiny dot. So I've removed this class. Now, on mobile, the hamburger moved on the second line and on the first line of the navbar is the 310 px logo that doesn't even show completly. I want to keep this spacing between the navbar elements as it now, but I think the problem that may be actually comes from my css:
.navbar .navbar-brand {
padding: 5px 200px;
}
.navbar-nav>li {
padding-left: 5px;
padding-right: 5px;
}
.navbar-nav>li {
margin-left: 5px;
margin-right: 5px;
}
This is my html:
<nav class="navbar navbar-light navbar-expand-xl fixed-top ">
<!-- Brand/logo -->
<a class="navbar-brand "> <img src="x" alt="logo" style="width: 310px"></a>
<button class="navbar-toggler" data-target="#collapsingNavbarLg" data- toggle="collapse" type="button">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="collapsingNavbarLg">
<!-- Links -->
<ul class="navbar-nav float-right text-right pr-3">
<li class="nav-item">
<a class="nav-link py-0" href="/" style="font-size: 130%;">Home</a>
</li>
<li class="nav-item">
<a class="nav-link py-0" href="ChiSono" style="font-size:130%;">Chi Sono</a>
</li>
<li class="nav-item">
<a class="nav-link py-0" href="Servizi" style="font-size:130%;">Servizi</a>
</li>
<li class="nav-item">
<a class="nav-link py-0" href="Contattaci" style="font-size:130%;">Contattaci</a>
</li>
<li class="nav-item">
<a class="nav-link py-0" href="AreaClienti" style="font-size:130%;"> Area Clienti</a>
</li>
</ul>
</div>
</nav>
That 200px from padding also keeps the same, and maybe this is why I get all this issue. I am not sure. Also the space between the li elements, as I shrink the page until the point it becomes hamburger. But is there a way to still keep this spacing for my navbar elements, that also resizes? Or is there another way to fix this? Thank you!
I moved everything into a container so that you do not have to use 200px padding to move your logo. This lets the navigation sit similarly to the dimensions/look you had in your code without forcing the position of the elements.
This will let allow you to position your nav items to the right using a css class I added called .navbar-right.
But, because of the new positioning I added another media query to move the hamburger menu. (You may not need this in your coding environment because I was working straight off my desktop with just the CSS, also JS is not added to the example.)
Hope this helps.
.navbar-right {
position: absolute;
right: 0;
}
.relative {
position: relative;
}
#media only screen and (max-width:768px) {
.navbar-brand {
max-width: 100px;
}
/* below is for the demo but might help you position
the hamburger menu on mobile */
.navbar-toggler {
right: 0;
position: absolute;
margin: 10px;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container relative">
<div class="row">
<a class="navbar-brand" href="#">
<img class="img-fluid" src="http://www.studiopirrera.com/Images/ui.png" alt=" ">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav navbar-right">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</nav>
The best option would be to create diffenrent images files for different view port sizes.
With the srcset attribute, you can select which image should show in which case.
Here an example:
<img src="small.jpg" srcset="small.jpg 320w, medium.jpg 600w, large.jpg 900w" alt="my company">
You give the name/location of the image file, followed by a space and the view port size, when the image should show. It describes until which width (that's why it's w) the image should show. The example above translates to:
the small.jpg is shown until a view port width of 320px
the medium.jpg is shown until a view port width of 600px
the large.jpg is shown until a view port width of 900px
More detailed information can be found here: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
The positioning can be archieved by the information form brooksrelyt's answer
I solved this problem using an vw units width of image.
This allows the element's aspect ratio to be preserved, based on the viewport width
.navbar-brand img {
max-width: 11vw; /* find suitable value for you */
display: block;
width: 100%;
}
Right now my navigation drop down can open on click.
I want it to open upon hover. How do I do this?
simply add following css
.dropdown:hover>.dropdown-menu {
display: block;
}
fiddle
.dropdown:hover>.dropdown-menu {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</nav>
The css from Znaneswar works great but I would add this line as well.
.dropdown-menu {
margin: -0.125rem 0 0;
}
The dropdown is spaced 0.125rem away from the element that spawns the dropdown. So you'll have a hard time navigating from the link to the dropdown without it disappearing when you mouse over that gap.
And if you want the dropdown link to actually be a link as well, just remove this attribute from the a tag
data-toggle="dropdown"
Below css works fine
.dropdown:hover>.dropdown-menu {
display: block;
}
.dropdown>.dropdown-toggle:active {
pointer-events: none; // Add this, to prevent clicking dropdown's default click function
}
<div class="dropdown">
...
</div>
You could try this with jQuery:
$(".dropdown").hover(function(){
$(this).addClass("show");
});
I got this solution using Angular with ng-bootstrap and bootstratp:
CSS:
.dropdown:hover>.dropdown-menu {
display: block;}
HTML:
<li class="nav-item dropdown" ngbDropdown>
<a class="nav-link h5 dropdown-toggle" id="navbarDropdown" ngbDropdownToggle>
Parent</a>
<div ngbDropdownMenu class="dropdown-menu">
<a class="dropdown-item" href="#" ngbDropdownItem>Child1</a>
<a class="dropdown-item" href="#" ngbDropdownItem>Child2</a>
</div>
</li>
So, if don't use the CSS property, the dropdown will happens only when click on parent link.
While I appreciate the answers to this question, the answers given are seemingly not the best. This is because these answers are disregarding accessibility.
Notice that, when using only CSS to make the dropdown show on .nav-link hover, the aria-expanded parameter on the .nav-link element does not change to true.
You must use some JS then in order to have the full range of accessibility functionality.
Below is what I have come up with to combat this.
// header_scripts.js
$('body').on('hover', '.nav-item.dropdown', function() {
$(this).find('.dropdown-toggle').dropdown('toggle');
});
/* header.css */
.dropdown-menu {
margin: 0 0 0 0;
}
The above code should provide the same functionality that you are seeing in the other answers to this question, but with full accessibility concerns.
The CSS I gave is very general and has pretty low specificity so work with that as you see fit.
I'm reworking a WHMCS menu to be responsive and touch sensitive. Everything is fine except for one thing. I can't get the proper elements to display/toggle properly.
What the jQuery script does is add "open" class to parent element onclick. So
<div id="menu-icon"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu</a></div>
Becomes:
<div id="menu-icon" class="open"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu</a></div>
When the "Menu" link is clicked.
I need the "#nav" to "display:none" by default, and "display:block" when Menu is clicked. I can't quite capture it via CSS.
My HTML
<nav id="nav-wrap">
<div id="menu-icon"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu</a></div>
<ul id="nav">
My CSS
#nav-wrap #nav {
display: none;
}
#nav-wrap #menu-icon.open #nav {
display: block;
}
With the code above, I can hide the #nav by default, but that's it. Any pointers on how to capture #nav?
Boss, there is fundamental mistake you have done.
You have given this code:
<nav id="nav-wrap">
<div id="menu-icon">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu</a>
</div>
<ul id="nav">
See, the #nav doesn't come under #menu-icon. Change the code to:
<nav id="nav-wrap">
<div id="menu-icon">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu</a>
<ul id="nav">
</div>
And it works!
Demo here: http://jsfiddle.net/qqbUY/
Screenshot