I am starting to learn basic webdesign, I am kinda stuck with my Navbar for the last few days.
I am trying to produce a structure based on a CSS Grid. The Dropdown menu should unfold in a column below the navbar itself while being aligned with the menu point on the left side and overflow with the content towards the right side.
My navbar is currently a flexbox, but no matter what I do the dropdown menu either doesn't show at all or is bugged like in the version below.
I think it has something to do with the navbar itself being placed in a grid zone, but I just can't figure out a solution or even an alternative.
This is my current CodePen: https://codepen.io/gisbert12843/pen/pobJbyQ
And this is the Code:
<body>
<div class="the_grid">
<nav class="navbar">
<ul>
<li class="active"><i class="fas fa-home"></i> Home</li>
<li class="dropdown"><i class="fas fa-cut"></i> Leistungen
<ul class="dropdown-content">
<li>Herren</li>
<li>Damen</li>
<li>Farben und Strähnen</li>
<li>Wellen und Glätten</li>
<li>Extension | Perücken | Toupets</li>
<li>Kuren</li>
<li>Brautservice</li>
<li>Kosmetik</li>
</ul>
</li>
<li><i class="fas fa-hands-wash"></i> Covid-19</li>
<li><i class="fas fa-images"></i> Inspiration</li>
<li><i class="fas fa-user-graduate"></i> Jobs</li>
<li class="dropdown"><i class="fas fa-chevron-right"></i> Mehr
<ul class="dropdown-content">
<li> Impressum</li>
<li> Datenschutz</li>
</ul>
</li>
</ul>
</nav>
<div class="sidebar">
</div>
<div class="content1">
</div>
<div class="content2">
</div>
</div>
</body>
And this is the CSS:
*,
*::before,
*::after {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html {
height: 100vh;
width: 100vw;
font-size: 100%;
box-sizing: border-box;
padding: 0;
margin: 0;
background: url(/images/background2.jpg) no-repeat center center fixed;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 0px 3.5rem;
z-index: 0;
}
body {
margin: 0;
padding: 0;
min-height: 100vh;
max-width: 100vw;
}
.the_grid {
display: grid;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100vw;
height: 100vh;
grid-template-columns: 0.6fr 1fr 1fr 1fr;
grid-template-rows: 0.22fr 1fr 1.5fr 0.5fr;
grid-template-areas: "navb navb navb navb"
"sb c1 c1 c1"
"sb c1 c1 c1"
"sb c2 c2 c2";
}
.navbar {
grid-area: navb;
display: flex;
position: relative;
min-width: 100%;
max-width: 100%;
background-color: #ff1a4f;
justify-content: center;
align-items: center;
}
.active {
background-color: #ff573a;
}
.navbar ul {
list-style: none;
display: flex;
color: transparent;
position: relative;
}
.navbar ul li {
position: relative;
}
.navbar ul li a {
font-size: 1.5rem;
padding: 23px;
display: block;
position: relative;
z-index: 1;
color: #e4e4e4;
text-decoration: none;
}
.navbar ul li a:hover {
background-color: #ff8c00;
transition: 0.08s;
}
.dropdown-content {
display: flex;
flex-direction: column;
position: absolute;
width: 100%;
}
.the_grid .navbar .dropdown-content li {
display: none;
position: absolute;
top: 40px;
}
.navbar ul li:hover .dropdown-content li {
display: block;
top: 0px;
}
.sidebar {
grid-area: sb;
overflow: hidden;
min-width: 100%;
max-width: 100%;
border-style: dashed;
border-color: green;
}
.content1 {
grid-area: c1;
overflow: hidden;
min-width: 100%;
max-width: 100%;
border-style: dashed;
border-color: yellow;
}
.content2 {
grid-area: c2;
overflow: hidden;
min-width: 100%;
max-width: 100%;
border-style: dashed;
border-color: red;
}
I am grateful for any kind of suggestions and help! <3
--
P.S. This is my first 'contribution' here, please point me towards my mistakes regarding asking question etc.
The problem is, you give every <li> in the dropdown-content a position of relative and top of 0.
In order to solve your problem, remove the position: absolute; and top: 0; of the li-elements in your .dropdown-content and add this to your css:
.navbar ul li:hover ul.dropdown-content {
position: absolute;
width: auto;
top: 100%;
}
Explanation
You don't have to set the position of each li-element in the dropdown, just position the dropdown absolute to the li-element in your navbar (100% from the top) and give it a width of auto.
Your current code handles already the hover, so by default it's display property is set to none and if you hover over the parent li-element it's changed to block.
Related
I have a header with an image and navigation links.
For some reason the menu items are not vertically centered.
.header {
position: relative;
margin-top: 70px;
background: red;
height: 40px;
}
.logo {
position: absolute;
top: 50%;
transform: translateY(-50%);
max-width: 150px;
}
.nav {
list-style: none;
float: right;
}
.nav li {
display: inline-block;
}
<div class="header">
<img src="http://placehold.it/200" class="logo" />
<ul class="nav">
<li>Home</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
Live code: https://jsfiddle.net/f2u97o3m/
I tried to add vertical-align: middle to <ul> and <li> items, But it didn't work.
Why it's not centered and how to center it vertically?
.header {
position: relative;
margin-top: 70px;
background: red;
height: 40px;
}
.logo {
position: absolute;
top: 50%;
transform: translateY(-50%);
max-width: 150px;
}
.nav {
list-style: none;
float: right;
margin: 0;
padding: 0;
}
.nav li {
display: inline-block;
line-height: 40px;
}
<div class="header">
<img src="http://placehold.it/200" class="logo" />
<ul class="nav">
<li>Home</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
You need to add 'margin: 0; padding: 0;' to '.nav' and to specify 'line-height: 40px' to th e'li'. I suppose you'll put inside, be sure you add that to them.
Here is a solution to centering your ul it vertically. Instead of height: 40px; which doesn't account for the height of children, using padding: 10px 0; adds padding above and below the children. Also, instead of float: right; this solution uses text-align: right.
.header {
position: relative;
margin-top: 70px;
background: red;
/* height: 40px; */
padding: 10px 0;
}
.logo {
position: absolute;
top: 50%;
transform: translateY(-50%);
max-width: 150px;
}
.nav {
list-style: none;
/* float: right; */
text-align: right;
}
.nav li {
display: inline-block;
}
<div class="header">
<img src="http://placehold.it/200" class="logo" />
<ul class="nav">
<li>Home</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
One solution would be to convert your element to a flex container.
Your code would look like this:
.nav {
display: flex;
align-items: center;
height: 100%;
float: right;
}
To create a gap between your list items, you could just add some left and right margin:
.nav li {
margin: 0 0.5em;
}
One thing I noticed, too, is that you don't have any margin/padding resets.
At the top of your CSS, put:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
This helps reduce some of the unexpected complications that might arise from an element's default margin and padding.
You can use flexbox for alignment.
https://www.w3schools.com/css/css3_flexbox.asp
If you want to align then at the center and vertically then type like this
.nav {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
If you want it to align horizontally then you can replace the flex-direction with row like
flex-direction:row;
I'm absolute positioning a ul list (but could be any element) at the bottom center of a container.
When window or container is resized, the list shrinks as if it was some kind of margin or padding or max-width applied somewhere. See this fiddle.
Desired effect
I need the list to keep an auto width (depending on its content) and only shrinks when it takes more than 100% of the parent's width.
I've noticed this behavior only happens when transform: translateX(-50%).
EDIT
The wrapper div contains other elements. List acts as a navigation menu or toolbox.
HTML
<div id="wrapper">
<p>Whatever other content</p>
<ul id="list">
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
</ul>
</div>
CSS
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
#wrapper {
position: relative;
height: 100%;
width: 100%;
background: #fff;
}
#list {
list-style: none;
position: absolute;
padding: 2px;
bottom: 0;
left: 50%;
transform: translateX(-50%);
font-size: 0;
background: #555;
}
#list li {
display: inline-block;
margin: 1px;
}
#list span {
display: block;
height: 40px;
width: 40px;
background: #222;
}
You can use flexbox to replace the old absolute way of positioning.
#wrapper {
background: #fff;
height: 100%;
width: 100%;
position: relative;
display: flex;
}
#list {
margin: 0;
padding: 0;
list-style: none;
align-self: flex-end;
margin: 0 auto;
border: 1px solid #222;
}
I updated the fiddle http://jsfiddle.net/uLj5raoq/
I'm learning now CSS and i'm creating a portfolio page as part of it.
I've created this page: link to the codepen
The thing is, the footer is not sticks to the bottom of the page, can some one tell me how can i fix it? so it will be after the <div id="contact">
Iv'e noticed that when I do put it in the <div class="content"> it does work, I tried to figure out why and I didn't got it.
Thanks.
CSS & HTML are here:
html,
body,
main {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: "Alef";
}
header {
position: fixed;
top: 0;
width: 100%;
height: 70px;
background: #fff;
}
nav {
width: 960px;
height: 70px;
margin: 0 auto;
}
nav ul {
margin: 10px 0 0;
}
nav ul li {
display: inline-block;
margin: 0 40px 0 0;
}
a {
color: #4d4d4d;
line-height: 42px;
font-size: 18px;
padding: 10px;
text-decoration: none !important;
}
.active {
color: #004cc6;
font-weight: bold;
font-size: 20px;
background: #f9fafc;
}
.content {
margin-top: 70px;
width: 100%;
height: 100%;
}
.content > div {
width: 80%;
height: 50%;
margin-left: auto;
margin-right: auto;
color: white;
font-size: 25px;
}
#home {
background: #0f5fe0;
}
#portfolio {
background: #129906;
}
#about {
background-color: #a00411;
}
#contact {
background-color: black;
}
:target:before {
content: "";
display: block;
height: 70px; /* fixed header height*/
margin: -70px 0 0; /* negative fixed header height */
}
footer {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-items: flex-start;
background-color: #dbdbdb;
text-align: center;
height: 70px;
width: 100%;
}
<header>
<nav>
<ul>
<li><a class="active" href="#home">My Page</a></li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
</header>
<main>
<div class="content">
<div id="home">
<p>#home</p>
</div>
<div id="about">
<p>#about</p>
</div>
<div id="portfolio">
<p>#portfolio</p>
</div>
<div id="contact">
<p>#contact</p>
</div>
</div>
</main>
<footer>
Fotter
</footer>
Remove height: 50%; from .content > div if you want to put footer just after contact.
Codepen
If you want to stick footer to the bottom of the browser window, then add this to your css:
footer {
position: fixed;
bottom: 0px;
}
Codepen
Change footer value like below
footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 99;
background-color: #dbdbdb;
text-align: center;
height: 70px;
width: 100%;
}
you can use vh instead of percentage to set the min-height of main, then you need to remove the height
.main {
min-height: 100vh; // Change as per your requirement
}
I'm having an issue with keeping an image at the bottom of my sidebar. When I'm able to center it, it wants to join the higher-up links and won't come down, and when I force it to the bottom, I can't get it to center without dangerous margin hacks.
.sidebar {
height: 100vh;
max-width: 25%;
float: left;
font-family: 'Pontano Sans', sans-serif;
position: fixed;
}
.sidebar li:nth-of-type(1) {
padding-top: 10%;
}
.sidebar li {
color: #8B2500;
margin-top: 40px;
list-style: none;
text-align: center;
margin-left: -35px;
font-size: 20px;
}
#add {
display: block;
margin: 0 auto;
bottom: 0;
position: absolute;
width: 80px;
height: 80px;
}
The html :
<nav class="sidebar"><img class="logo" src="images/logo.png"></img>
<ul>
<li> About </li>
<li> Providers </li>
<li> Quality </li>
<li> Contact </li>
</ul>
<img id="add" src="images/phoner.png"></img>
</nav>
The image in question is the #add. Position: absolute; brings it to the bottom as desired, but floats it left, and position: relative; brings it center as desired, but pulls it from the bottom. Any input appreciated, thanks.
You are nearly there, the trick in positiong element at the center, when you are using position: absolute is by adding a left,top,right,bottom a 50% and substract the half of the size of the element you want to center.
In your case you just need to
CSS
#add {
display: block; // remove
margin: 0 auto; // remove
bottom: 0;
left: 50%; //added
margin-left: -40px; //added
position: absolute;
width: 80px;
height: 80px;
}
see my sample fiddle
try this it should work
<nav class="sidebar"><img class="logo" src="images/logo.png"></img>
<ul>
<li> About </li>
<li> Providers </li>
<li> Quality </li>
<li> Contact </li>
</ul>
<div class="clear"></div>
<img id="add" src="images/phoner.png"></img>
</nav>
.sidebar {
height: 100vh;
max-width: 25%;
float: left;
font-family: 'Pontano Sans', sans-serif;
position: fixed;
}
.sidebar li:nth-of-type(1) {
padding-top: 10%;
}
.sidebar li {
color: #8B2500;
margin-top: 40px;
list-style: none;
text-align: center;
margin-left: -35px;
font-size: 20px;
}
#add {
bottom: 0;
display: block;
margin: 0 auto;
bottom: 0;
position: absolute;
width: 80px;
height: 80px;
}
.clear{
clear: both;
}
.COOLelement{
position:fixed;
margin:0 auto;
bottom:0;
width: 100px;
height: 10px;
}
Can you add a container element? That would prevent you from needing explicit sizing or margins.
.sidebar {
height: 80vh;
max-width: 25%;
position: fixed;
background: pink;
min-width: 300px;
min-height: 150px;
}
.stuck-centered {
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
}
#add {
display: block;
margin: 0 auto;
}
body {
padding: 30px;
}
<nav class="sidebar">
<ul>
<li>About</li>
</ul>
<div class="stuck-centered">
<img id="add" src="http://placehold.it/80x80"></img>
</div>
</nav>
Full demo
I have a <header> element in my page, but I am failing when trying to show its contents. it is a really simple header at the top of the page, with a navigation section. But the text on each <li> keeps going out of the header area, which is a problem as I have a dark background, and the text is outside.
`
header {
display: block;
position: fixed;
top: 0px;
width: 100%;
}
nav {
display: inline-block;
overflow: auto;
position: absolute;
height: 100%;
right: 0px;
text-align: center;
}
nav li {
display: inline-block;
}
nav a {
color: #FFF;
}
a > span {
display: block;
}
`
<header id="header">
<div id="logo">
<img src="http://link/logo.png" alt="text">
</div>
<nav id="menu">
<ul>
<li id="menu_1">
Home<span>Text,text,text</span>
</li>
<li id="menu_2">
Contact<span>Text,text,text</span>
</li>
</ul>
</nav>
</header>
Any thoughts?
Change your CSS to this:
header {
display: block;
position: fixed;
top: 0px;
width: 100%;
background: rgba(0, 0, 0, 0.8);
}
nav {
display: inline-block;
overflow: auto;
height: 100%;
right: 0px;
text-align: center;
}
nav li {
display: inline-block;
}
position: absolute; in nav was creating a problem