I was following along the tutorial on youtube link and I got stuck in this part that's using margin-top: auto in a flexbox to push the last child to bottom. Can you please point out what's not working here?
.navbar {
width: 5rem;
height: 100vh;
position: fixed;
background-color: var(--bg-primary);
}
.navbar-nav {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
}
.nav-item:last-child {
margin-top: auto;
}
<nav class="navbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="" >
<span class="link-text">Cats</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="" >
<span class="link-text">Cats</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="" >
<span class="link-text">Cats</span>
</a>
</li>
</ul>
</nav>
This works as expected, the last <li> is pushed to the bottom of the parent, but since the parent (.navbar-nav) has the same height, you don't see the element moving.
Increasing the .navbar-nav height will enable the <li> to move down:
.navbar-nav {
...
height: 100vh;
}
.navbar {
width: 5rem;
height: 100vh;
position: fixed;
background-color: var(--bg-primary);
}
.navbar-nav {
height: 100vh;
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
}
.nav-item:last-child {
margin-top: auto;
}
<nav class="navbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="" >
<span class="link-text">Cats</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="" >
<span class="link-text">Cats</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="" >
<span class="link-text">Cats</span>
</a>
</li>
</ul>
</nav>
you should add height: 100%; either
.navbar {
width: 5rem;
height: 100%;
position: fixed;
background-color: var(--bg-primary);
}
.navbar-nav {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
height:100%;
}
.nav-item:last-child {
margin-top: auto;
}
<nav class="navbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="" >
<span class="link-text">Cats</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="" >
<span class="link-text">Cats</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="" >
<span class="link-text">Cats</span>
</a>
</li>
</ul>
</nav>
After setting the height of 100vh to .navbar-nav, you can use flex:1 on 2nd child to make sure it takes the free space around. This will automatically push the last child to the bottom. In this case you even don't need to bother about using margin's to place elements inside the flex-container at different positions. flexbox properties and flex-item properties takes care of positioning our flex-items.
Code Modifications:
.navbar-nav{
height:100vh;
}
.nav-item:nth-child(2) {
flex:1;
}
.navbar {
width: 5rem;
height: 100vh;
position: fixed;
background-color: teal;
}
.navbar-nav {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
height:98vh;
}
.nav-item:nth-child(2) {
flex:1;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<nav class="navbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="" >
<span class="link-text">Cats</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="" >
<span class="link-text">Cats</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="" >
<span class="link-text">Cats</span>
</a>
</li>
</ul>
</nav>
</body>
</html>
Note: The fundamental issue with margin-top not working is already covered in the above answers. Obviously the height issue with flex-container .navbar-nav div
Related
I am new to CSS and trying to enable a responsive centered/navbar menu to my page with a logo positioned to left of navigation menu. Everything visually and functionally appears OK however the image logo link is not working (will not hyperlink) and I cannot figure out why. Any help or guidance to what I might be missing? Thanks so much in advancce. Here is my HTML/CSS.
<nav class="navbar navbar-default">
<div class="container">
<a class="navbar-brand" href="https://www.mytestorganization.com">
<img src="/logo/content/items/925f35a5b1cb48379a2e2c416b4f03e4/data"
width="120" alt="myOrgLogo" />
</a>
<!-- This is optional and can be removed. -->
<div class="container-fluid">
<!-- This is what generates your burger menu icon on mobile -->
<div class="navbar-header">
<button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span> </button>
</div>
<!-- This is what gets hidden behind the burger menu icon -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
Nav1
<ul class="dropdown-menu">
<li>
Menu1
</li>
</ul>
</li>
<li class="dropdown">
Nav2
<ul class="dropdown-menu">
<li>
menu2
</li>
</ul>
</li>
<li class="dropdown">
Nav3
<ul class="dropdown-menu">
<li>
menu3
</li>
</ul>
</li>
<li class="dropdown">
nav4
<ul class="dropdown-menu">
<li>
Menu4
</li>
</ul>
</li>
<li class="dropdown">
nav5
<ul class="dropdown-menu">
<li>
menu5
</li>
</ul>
</li>
<li class="dropdown">
nav6
<ul class="dropdown-menu">
<li>
menu6
</li>
</ul>
</li>
<li class="dropdown">
nav7
<ul class="dropdown-menu">
<li>
Menu7
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
</div>
<!-- /.container-fluid -->
</nav>
.navbar-brand {
float: left;
padding:0;
padding-left: 0px;
}
.navbar{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
.navbar-nav {
position: absolute;
left: 0%;
top: 0%;
right: 0%;
bottom: 0%;
z-index: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
#media screen and (max-width: 768px) {
.header-container .navbar-header {
width: 100%;
}
.navbar-default .navbar-toggle {
margin-top: 18px;
}
.navbar .container-fluid {
display: block !important;
}
.navbar.navbar-default .navbar-collapse.collapse {
overflow: hidden;
display: none !important;
}
.navbar.navbar-default .navbar-collapse.collapse.in {
display: block !important;
}
.navbar.navbar-default .navbar-nav {
display: inherit;
padding: 0 0 1rem 0;
}
.navbar.navbar-default .navbar-nav > li {
display: block;
}
}
the link in href="https://www.mytestorganization.com" is not working. There is no webpage with this url. But if you are looking for a cursor change when you hover over your logo or click on logo image then you can apply this style.
.navbar-brand {
float: left;
padding:0;
padding-left: 0px;
cursor:pointer;
}
.navbar-brand:hover{
cursor:pointer;
}
I am new to css. I will like to center brand logo and also the links in the navbar.
HTML
<nav class="navbar navbar-expand-md center">
<a class="navbar-brand" href="http://www.dimsum.dk" target="_blank">
<img src={% static 'media/HIDDEN DIMSUM logo final.png'%} width="100" alt="">
</a>
<button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#main-navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main-navigation">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Book Table</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://www.dimsumbox.dk" target="_blank">
Order Dimsum Box</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://www.dimsumshop.dk" target="_blank">
Order Takeaway</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" target="_blank">
About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" target="_blank">
Contact</a>
</li>
</ul>
</div>
</nav>
CSS
.navbar {
background: #d48498;
}
.nav-link {
color: black;
font-size: 24px;
font-weight: bold;
}
.navbar.center .nav-item {
text-align: center;
display: inline-block;
vertical-align: middle;
}
This is how the navbar looks right now
I want to have the logo centered and the links appearing in a new line also centered so it looks like
Logo
Link 1 Link 2 Link 3 Link 4
I have tried justify center in css but it doesn't work.
Add this bit to your css
#media (min-width: 768px) {
.navbar {
flex-flow: wrap;
}
.navbar-brand {
width: 100%;
text-align: center;
}
.navbar-brand img {
height: 50px; /*Set a logo size*/
width: auto;
}
.navbar-collapse {
justify-content: center;
}
}
use justify content: center and display: flex in css
display: flex;
justify-content: center;
for reference https://www.w3schools.com/cssref/css3_pr_justify-content.asp
add this css after bootstrap.css:
.navbar-brand {
display: flex;
width: 100%;
justify-content: center !important;
}
.navbar {
flex-wrap: wrap !important;
justify-content: center !important;
}
.navbar-nav{
width:100%;
justify-content:center !important
}
I am using Bootstrap 4, and have created a navigation that has a large dropdown menu, using animate.css for the dropdown CSS animation and a CSS transition on the main navigation element (underline).
Is it possible to keep the main navigation underlined when a user hovers over the sub-menu/dropdown? In this case, keep the "Services" main nav element underlined when mousing over the dropdown. I'd like to keep it pure CSS if possible, but if not, open to using jQuery.
Here's the HTML of my navigation:
<nav class="navbar navbar-expand-lg navbar-light" role="navigation">
<div class="navbar-brand">
Logo
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#global-navbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="global-navbar">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link main-nav-link" href="#" #*role="button" data-toggle="dropdown"*#>
Services
<span class="navigation-underline animated slideInLeft"></span>
</a>
<div class="dropdown-menu animated fadeIn">
<div class="container">
<div class="row">
<div class="col-md-3">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Service 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Service 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Service 3</a>
</li>
</ul>
</div>
<div class="col-md-3">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Service 4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Service 5</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Service 6</a>
</li>
</ul>
</div>
<div class="col-md-3">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Service 7</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Service 8</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Service 9</a>
</li>
</ul>
</div>
<div class="col-md-3 border-right-0">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Service 10</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Service 11</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Service 12</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<!-- more <li>s -->
</ul>
</div>
</nav>
Here's my CSS:
#media screen and (min-width: 992px) {
/* Link column styling */
.navbar .dropdown-menu div[class*="col"] { margin-top: 1em; margin-bottom: 1em; border-right: 1px solid #ffffff; }
.navbar .dropdown-menu { border: none; background-color: #e5e5e5 !important; }
.navbar { font-size: .9em; padding-top: 0px; padding-bottom: 0px; }
.navbar .navbar-brand { padding-top: 0; padding-bottom: 0; }
/* Add padding to keep hover working when mousing to menu */
.navbar .nav-item { padding: .75em .5em 0 .5em; margin: 0 .25em; }
/* Dropdown full width */
.navbar .dropdown { position: static; }
.navbar .dropdown-menu { width: 100%; left: 0; right: 0; /* Height of nav-item --> */ top: 67px; border-radius: 0; }
.navbar .dropdown-menu .dropdown-menu-heading { padding-left: .5em; text-transform: uppercase; font-weight: 700; color: #424242; }
/* Show dropdown menu on hover */
.navbar .dropdown:hover .dropdown-menu,
.navbar .dropdown .dropdown-menu:hover { -webkit-animation-duration: .3s; animation-duration: .3s; -webkit-animation-delay: .3s; animation-delay: .3s; display: block; }
/* Less padding on dropdown menu items and links */
.navbar .navbar-nav .nav.flex-column .nav-link { padding-top: 2px; }
.navbar .dropdown .dropdown-menu .flex-column li.nav-item { padding: 0; }
/* Animate border-bottom for links */
.navbar .navbar-nav .nav-link.main-nav-link::after { content: ''; display: block; width: 0%; height: 2px; background: #eb2b2c; transition: width .3s; }
.navbar .navbar-nav .nav-link.main-nav-link:hover::after { width: 100%; }
}
Since the .nav-item .dropdown element gets an additional .show class when is clicked, you can maintain the underlined effect with the following css:
.nav-item.dropdown.show > .nav-link::after {
width: 100%;
}
Alternatively, you could also use this one:
.nav-item.dropdown:hover > .nav-link::after {
width: 100%;
}
However, as there is a gap between the .nav-link and the .dropdown-menu, the :hover state is not set while the cursor is moving between the menu item and the dropdown.
I want to style my unordered list like this one below
Link to what i want to achive
My structure looks like:
<div class="tabs">
<ul class="tabs__labels">
<li class="0">
<a class="active" href="#">
<img/>
<div>something</div>
</a>
</li>
<li class="1">
<a class="" href="#">
<img/>
<div>something1</div>
</a>
</li>
...
</ul>
</div>
Is it a good idea to name the list classes like 0,1 etc. and style them separately to somehow achive this effect? How to use flexbox to get similar effect? Should i group them into rows?
Would this be a start?
.tabs__labels {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
list-style: none;
margin: 0;
padding: 0;
}
.tabs__labels li {
flex-basis: 45%;
margin: 20px 0;
padding: 0;
}
.tabs__labels li:nth-child(odd) {
display: flex;
justify-content: flex-end;
}
.tabs__labels li:nth-child(even) {
display: flex;
}
.tabs__labels li:nth-child(3),
.tabs__labels li:nth-child(4) {
flex-basis: 35%;
}
.tabs__labels li a {
display: flex;
justify-content: center;
align-items: center;
height: 40px;
width: 40px;
border-radius: 50%;
border: 1px solid red;
text-decoration: none;
}
.tabs__labels li:nth-child(1)::before {
content: 'some text';
text-decoration: underline;
margin-right: 10px;
}
.tabs__labels li:nth-child(2)::after {
content: 'some text';
text-decoration: underline;
margin-left: 10px;
}
<div class="tabs">
<ul class="tabs__labels">
<li>
<a class="active" href="#">S
</a>
</li>
<li>
<a class="" href="#">S
</a>
</li>
<li>
<a class="" href="#">S
</a>
</li>
<li>
<a class="" href="#">S
</a>
</li>
<li>
<a class="" href="#">S
</a>
</li>
<li>
<a class="" href="#">S
</a>
</li>
</ul>
</div>
I'm upgrading a website from bootstrap 3 to 4 (beta). The css I used to underline active navbar links is no longer working. Instead of underlining the item, it underlines the full width of the page. How can I underline active nav items in bootstrap 4?
Bootstrap 3 css
.navbar-default .navbar-nav > .active:after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
content: " ";
border-bottom: 5px solid #5BC0EB;
}
Attempted Bootstrap 4 css
.navbar-light .navbar-nav .active::after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
content: " ";
border-bottom: 5px solid #5BC0EB;
}
HTML
<nav class="navbar fixed-top navbar-light bg-light navbar-expand-md">
<div class="container">
<a class="navbar-brand" href="#">My Website</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="main-nav-collapse">
<ul class="navbar-nav">
<li class="nav-item active"><a class="nav-link" href="#about">About</a></li>
<li class="nav-item"><a class="nav-link" href="#classes">Classes</a></li>
<li class="nav-item"><a class="nav-link" href="#gallery">Gallery</a></li>
<li class="nav-item"><a class="nav-link" href="#events">Events</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
<li class="nav-item"><a class="nav-link" href="#offers">Offers</a></li>
</ul>
</div>
</div>
</nav>
This happened because of your positioning.
Try to set relative position to your li and set after to a tag inside li which will be absolute positioned like below
.navbar-nav > li {
float: left;
position: relative;
}
.navbar-light .navbar-nav .active a::after {
border-bottom: 5px solid #5bc0eb;
bottom: -10px;
content: " ";
left: 0;
position: absolute;
right: 0;
}
Hope it helps.