This question already has answers here:
Does UL have default margin or padding [duplicate]
(2 answers)
Closed 7 months ago.
For some reason, my nav bar is slightly set to the right. I've tried configuring everything to do with position but it doesn't seem to be working. I'm not sure if it's a CSS property or I just messed up with the configuration but it's a few pixels off-center no matter what. It might not be visible instantly (in the image) but I checked it with a virtual ruler and it is off.
header {
margin: 0 auto;
width: 100%;
height: 70px;
display: flex;
align-items: center;
justify-content: space-around;
background: transparent;
position: fixed;
top: 0;
transition: 0.3s;
z-index: 5;
}
.nav-show {
opacity: 0;
}
header:hover {
opacity: 1;
background: var(--main-header-background);
}
.nav-bar {
list-style: none;
position: relative;
display: inline-flex;
}
a.nav-link {
margin: 2px;
padding: 5px 10px;
text-decoration: none;
color: var(--main-fonts-color);
font-family: var(--main-font-family);
cursor: pointer;
text-transform: uppercase;
}
.active {
background: var(--main-decor-color);
}
.nav-link:hover {
color: #000000;
background: var(--main-decor-color);
}
<header>
<nav>
<ul class="nav-bar">
<div class="bg"></div>
<li>
<a class="nav-link" href=""></a>
</li>
<li>
<a class="nav-link" href=""></a>
</li>
<li><a class="nav-link" href="">Test</a></li>
<li><a class="nav-link" href="">Test</a></li>
</ul>
</nav>
</header>
Just as a note it's about 50px off based on what I see in photoshop.
Add these properties to your CSS
* {
margin: 0;
padding: 0;
}
Sometimes the browser will apply its default margin and padding to the elements, which happened in your case, where the header has an unusual left margin. Thus, we set margin and padding of every element to 0.
* {
margin: 0;
padding: 0;
}
header {
margin: 0 auto;
width: 100%;
height: 70px;
display: flex;
align-items: center;
justify-content: space-around;
background: transparent;
position: fixed;
top: 0;
transition: 0.3s;
z-index: 5;
}
.nav-show {
opacity: 0;
}
header:hover {
opacity: 1;
background: var(--main-header-background);
}
.nav-bar {
list-style: none;
position: relative;
display: inline-flex;
}
a.nav-link {
margin: 2px;
padding: 5px 10px;
text-decoration: none;
color: var(--main-fonts-color);
font-family: var(--main-font-family);
cursor: pointer;
text-transform: uppercase;
}
.active {
background: var(--main-decor-color);
}
.nav-link:hover {
color: #000000;
background: var(--main-decor-color);
}
<header>
<nav>
<ul class="nav-bar">
<div class="bg"></div>
<li>
<a class="nav-link" href="">Test</a>
</li>
<li>
<a class="nav-link" href="">Test</a>
</li>
<li><a class="nav-link" href="">Test</a></li>
<li><a class="nav-link" href="">Test</a></li>
</ul>
</nav>
</header>
nav {
display:block;
padding:10px;
margin:5px 55px 5px 55px;
}
Related
I'm trying to give my self some extra space to work with at the bottom of the site by adding bottom-padding: 50px; to the body in CSS but for some reason it does not add anything. I've seen people do this to make the page to a scrollable length but for me it literally does nothing no matter what.
This is the code so far:
body {
margin: 0px;
padding-bottom: 500px;
}
header {
height: 60px;
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: white;
}
.nav-list {
display: flex;
justify-content: flex-end;
align-items: center;
}
.nav-item {
list-style: none;
margin-right: 25px;
}
.nav-item a {
font-family: poppins, arial;
text-decoration: none;
color: black;
}
.nav-item:first-child {
margin-right: auto;
font-size: 16px;
}
.project-button {
height: 40px;
width: 100px;
border: none;
border-radius: 20px;
background-color: #86c232;
}
.projects-link {
font-size: 16px;
}
<body>
<header>
<nav>
<ul class="nav-list">
<li class="nav-item">
<strong> Tiam Nazari </strong>
</li>
<li class="nav-item">
Home
</li>
<li class="nav-item">
Contact
</li>
<li class="nav-item">
<button class="project-button">
<a class="projects-link" href="">Projects</a>
</button>
</li>
</ul>
</nav>
</header>
</body>
The padding is working, you just don't have any content. Height controls the actual height of the element (basically the distance from the outermost edges of the container) whereas padding controls the distance between the content and the edges.
If you want space, add a static height and then remove it once all of your content is in. If you still want white space vertically or horizontally once the content is in, then use padding.
body {
margin: 0px;
}
section.first {
height: 800px;
background-color: orange;
padding-top: 4em;
}
section:not(.first) {
background-color: pink;
height: 600px;
}
header {
height: 60px;
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: white;
}
.nav-list {
display: flex;
justify-content: flex-end;
align-items: center;
}
.nav-item {
list-style: none;
margin-right: 25px;
}
.nav-item a {
font-family: poppins, arial;
text-decoration: none;
color: black;
}
.nav-item:first-child {
margin-right: auto;
font-size: 16px;
}
.project-button {
height: 40px;
width: 100px;
border: none;
border-radius: 20px;
background-color: #86c232;
}
.projects-link {
font-size: 16px;
}
<body>
<header>
<nav>
<ul class="nav-list">
<li class="nav-item">
<strong> Tiam Nazari </strong>
</li>
<li class="nav-item">
Home
</li>
<li class="nav-item">
Contact
</li>
<li class="nav-item">
<button class="project-button">
<a class="projects-link" href="">Projects</a>
</button>
</li>
</ul>
</nav>
</header>
<section class="first">section 1</section>
<section>section 2</section>
</body>
It is working for me. Use background-color: red; to see how the body grows. Make sure you're connecting the documents correctly.
I'm having trouble figuring out why the dropdown menu goes horizontal. I made a horizontal menu to start with and tried adding a dropdown to it. However, it goes horizontal and I can't figure out why.
I've been racking my brain over this for hours but I don't know what to do.
Please help me.
nav li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
li:last-child {
border-right: none;
}
.navbar {
display: flex;
align-items: center;
width: 100%;
background-color: #ffffff;
}
#menu-container {
display: flex;
width: 100%;
justify-self: center;
justify-content: center;
}
.nav-menu {
display: flex;
justify-content: space-between;
align-items: center;
}
.dropdown {
position: relative;
z-index: 100;
}
.dropdown {
display: inline-block;
margin-left: 10px;
}
.dropdown:hover .dropdown-menu {
height: auto;
opacity: 1;
}
.dropdown-menu {
position: absolute;
z-index: 90;
align-items: stretch;
background-color: rgb(68, 68, 68);
list-style: none;
overflow: hidden;
height: auto;
opacity: 0;
transition: opacity 0.5s;
}
nav ul {
display: flex;
justify-content: space-between;
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: relative;
top: 0;
}
<nav class="navbar">
<div id="menu-container">
<ul class="nav-menu">
<li class="nav-item">
<a class="nav-link" href="#">Men</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link-dropdown" href="#">Women</a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="#">New</a></li>
<li><a class="nav-link" href="#">Tops</a></li>
<li><a class="nav-link" href="#">Bottoms</a></li>
<li><a class="nav-link" href="#">Accessories</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Kids</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</nav>
if you write flex instead of block your navbar is shown as vertical because you can style the element on n the vertical side with flex
in CSS in the .new-menu write flex instead of block in display property
.nav-menu {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction:column
;
}
In nav-menu class you need to add the property flex-direction and give it the value column.
This will make the cross axis go horizontally and main axis go vertically.
.nav-menu {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction:column;
}
More about it in detail here Flex-direction
Dear you have a lot of errors in CSS Try this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrapper">
<ul>
<li>home</li>
<li>About</li>
<li>Services
<ul>
<li>Marketing</li>
<li>Design
<ul>
<li>Web</li>
<li>Graphics</li>
<li>Interior</li>
</ul>
</li>
<li>Branding</li>
</ul>
</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
CSS Code
*{
margin: 0;
padding: 0;
}
body{
background-image: url(1.jpg);
-webkit-background-size:cover;
background-size:cover;
background-position: center center;
height: 100vh;
}
.wrapper{
width: 860px;
margin: 0 auto;
}
.wrapper ul{
list-style: none;
margin-top: 2%;
}
.wrapper ul li {
background: #262626;
width: 170px;
border: 1px solid #fff;
height: 50px;
line-height: 50px;
text-align: center;
float: left;
color: #fff;
font-size: 16px;
position: relative;
font-family: poppins;
text-transform: uppercase;
font-weight: bold;
}
.wrapper ul li:hover{
background: crimson;
}
.wrapper ul ul{
display: none;
}
.wrapper ul li:hover > ul{
display: block;
}
.wrapper ul ul ul{
margin-left: 170px;
top: 0;
position: absolute;
}
In your css you've provided the selector nav ul. Now what this does, it applies the style to every ul descendent of parent nav. This means it is getting applied even to the dropdown-menu. Hence to specify that it is applicable only to the child we use the child combinator selector nav > div > ul
nav > div > ul {
display: flex;
justify-content: space-between;
list-style: none;
margin: 0;
padding: 0;
background-color: #333;
position: relative;
top: 0;
}
I can't seem to find a great way of sizing my logo to fit within the header, I am trying to get a result with the logo on the left side of the header and the naviagtion on the right side. I've tried this and it seems to work but I don't know if there's a better way to approach this. If anyone could give some tips it would be greatly appreciated.
My CSS and HTML
a {
text-align: center;
color: #232323;
text-decoration: none;
transition: .1s;
}
button {
border: none;
outline: none;
color: #f3f3f3;
cursor: pointer;
transition: .3s;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
position: fixed;
top: 0;
padding: 1em 2em;
max-height: 20%;
width: 100%;
z-index: 2;
background-color: #ffffff;
}
.logo-wrapper {
display: inline-block;
overflow: hidden;
}
.logo-wrapper img {
height: auto;
width: auto;
max-width: 150px;
}
nav {
display: inline-block;
}
.nav-item {
display: inline-block;
margin: 0 1.5em;
}
.get-started {
background-color: #f27649;
padding: 1em 2em;
border-radius: 3em;
}
.get-started:hover {
filter: brightness(85%);
}
<header>
<div class="logo-wrapper">
<a href="/">
<img src="images/devchat.png" alt="DevTalk Logo">
</a>
</div>
<nav>
<ul>
<li class="nav-item">Learning</li>
<li class="nav-item">About</li>
<li class="nav-item">Blog</li>
<li class="nav-item">Explore</li>
<li class="nav-item">Contact</li>
<li class="nav-item">Login</li>
<li class="nav-item"><button class="get-started" href="#">Get Started <i class="fas fa-angle-right"></i></button></li>
</ul>
</nav>
</header>
I am new to CSS and I was trying to create a very basic navigation bar.
My HTML and CSS are given below.
The problem is when I hover over my FEATURES tab nothing happens even though I have changed the feature-menu displays to flex from none upon hovering.
I am not able to find any mistake in my code. Could anyone please tell where I have gone wrong?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
display: flex;
justify-content: space-between;
background: #D6E9FE;
position: fixed;
width: 100%;
padding: 50px;
}
.menu {
display: flex;
justify-content: space-between;
}
.menu li {
padding: 20px;
margin-right: 15px;
}
body {
height: 1200px;
font-size: 18px;
font-family: sans-serif;
color: #5D6063;
}
.dropdown span:hover .features-menu {
display: flex;
flex-direction: column;
background: #B2D6FF;
border-radius: 5px;
padding-top: 60px;
position: absolute;
top: 50px;
left: 990px;
}
.features-menu li {
list-style: none;
border-bottom: 1px solid #FFF;
padding: 0 40px 10px 20px;
margin: 10px;
}
.dropdown>span {
z-index: 2;
position: relative;
cursor: pointer;
}
.features-menu {
z-index: 1;
display: none;
}
<div class='header'>
<div class='logo'><img src='...' /></div>
<ul type="none" class='menu'>
<li class='dropdown'><span>Features ▾</span></li>
<ul class='features-menu'>
<li><a href='#'>Harder</a></li>
<li><a href='#'>Better</a></li>
<li><a href='#'>Faster</a></li>
<li><a href='#'>Stronger</a></li>
</ul>
<li><a href='#'>Blog</a></li>
<li><a href='#'>Subscribe</a></li>
<li><a href='#'>About</a></li>
</ul>
</div>
Let's review your HTML structure.
Here's the relevant part:
<ul type="none" class='menu'>
<li class='dropdown'><span>Features ▾</span></li>
<ul class='features-menu'>
<li><a href='#'>Harder</a></li>
<li><a href='#'>Better</a></li>
<li><a href='#'>Faster</a></li>
<li><a href='#'>Stronger</a></li>
</ul>
<li><a href='#'>Blog</a></li>
.
.
.
Here's the CSS selector you're applying:
.dropdown span:hover .features-menu
So the problem is clear.
You're going from one level (.dropdown), down a level (to the span), then back up a level (to the .features-menu).
You're trying to target the .features-menu from an element positioned lower in the HTML structure. CSS doesn't work that way.
CSS can only target downward or forward. It cannot target upward or backward.
These concepts are explained in detail in these posts:
Is there a CSS parent selector?
Is there a "previous sibling" CSS selector?
You can make your hovering work by targeting "forward" (using your original – malformed – HTML), using sibling combinators (+ or ~).
.dropdown:hover + .features-menu
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
display: flex;
justify-content: space-between;
background: #D6E9FE;
position: fixed;
width: 100%;
padding: 50px;
}
.menu {
display: flex;
justify-content: space-between;
}
.menu li {
padding: 20px;
margin-right: 15px;
}
body {
height: 1200px;
font-size: 18px;
font-family: sans-serif;
color: #5D6063;
}
.dropdown:hover + .features-menu {
display: flex;
flex-direction: column;
background: #B2D6FF;
border-radius: 5px;
padding-top: 60px;
position: absolute;
top: 50px;
/* left: 990px; */
}
.features-menu li {
list-style: none;
border-bottom: 1px solid #FFF;
padding: 0 40px 10px 20px;
margin: 10px;
}
.dropdown>span {
z-index: 2;
position: relative;
cursor: pointer;
}
.features-menu {
z-index: 1;
display: none;
}
<div class='header'>
<div class='logo'><img src='...' /></div>
<ul type="none" class='menu'>
<li class='dropdown'><span>Features ▾</span></li><!-- closing tag doesn't go here -->
<ul class='features-menu'>
<li><a href='#'>Harder</a></li>
<li><a href='#'>Better</a></li>
<li><a href='#'>Faster</a></li>
<li><a href='#'>Stronger</a></li>
</ul>
<li><a href='#'>Blog</a></li>
<li><a href='#'>Subscribe</a></li>
<li><a href='#'>About</a></li>
</ul>
</div>
Or, you can make your hovering behavior work by targeting "downward" (using correctly formed HTML), using descendant selectors (> or [space]).
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
display: flex;
justify-content: space-between;
background: #D6E9FE;
position: fixed;
width: 100%;
padding: 50px;
}
.menu {
display: flex;
justify-content: space-between;
}
.menu li {
padding: 20px;
margin-right: 15px;
}
body {
height: 1200px;
font-size: 18px;
font-family: sans-serif;
color: #5D6063;
}
.dropdown:hover > .features-menu {
display: flex;
flex-direction: column;
background: #B2D6FF;
border-radius: 5px;
padding-top: 60px;
position: absolute;
top: 50px;
/* left: 990px; */
}
.features-menu li {
list-style: none;
border-bottom: 1px solid #FFF;
padding: 0 40px 10px 20px;
margin: 10px;
}
.dropdown>span {
z-index: 2;
position: relative;
cursor: pointer;
}
.features-menu {
z-index: 1;
display: none;
}
<div class='header'>
<div class='logo'><img src='...' /></div>
<ul type="none" class='menu'>
<li class='dropdown'><span>Features ▾</span>
<ul class='features-menu'>
<li><a href='#'>Harder</a></li>
<li><a href='#'>Better</a></li>
<li><a href='#'>Faster</a></li>
<li><a href='#'>Stronger</a></li>
</ul>
</li><!-- closing tag goes here -->
<li><a href='#'>Blog</a></li>
<li><a href='#'>Subscribe</a></li>
<li><a href='#'>About</a></li>
</ul>
</div>
I have a navbar that is not re-sizing correctly when my logo image gets shrunk. Here is a link to the Codepen page for the complete code:
https://codepen.io/gabor-szekely/pen/JeMqQz
Basically, I am trying to re-size the "Sino Medical" logo image in the top left corner to 80% of it's original size, but when I do so, the entire navbar is not shrinking along with it, and is therefore too tall.
Can anyone help?
Here is the HTML:
<div class="navWrapper">
<nav class="flex-wrapper">
<div class="top-row-logo">
<img class="logo-img" src="https://img1.wsimg.com/isteam/ip/7bf494f1-7493-4549-b272-842b0d021577/logo/345e441d-0495-4f5b-bd62-f6413ac9b7a5.png/:/rs=h:71" alt="Sino Medical Institute">
</div>
<div class="top-row-links">
<ul>
<li>
Home
</li>
<li>
About Us
</li>
<li>
Services
</li>
<li>
Register
</li>
<li>
Contact Us
</li>
<li>
FAQ
</li>
</ul>
</div>
<div class="login-links">
<ul>
<li>
Login
</li>
</ul>
</div>
</nav>
</div>
And here is the relevant CSS:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
text-align: center;
padding: 0 1.5em;
color: #333;
}
.navWrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.flex-wrapper {
display: flex;
flex-flow: row nowrap;
background-color: white;
border-bottom: 1px solid #c8c8dc;
}
.top-row-logo {
flex: 1;
}
.logo-img {
margin-left: 3.2rem;
height: 80%; /* THIS IS THE ISSUE! */
}
.top-row-links, .login-links {
margin: auto 0;
}
.top-row-links {
flex: 1.5;
margin-right: 3.2rem;
}
.login-links {
margin-right: 4rem;
}
Thanks!
You could set the .top-row-logo to align-self: center instead of having it set to stretch which it inherits from the parent elements align-items declaration and set the .logo-img to display: block to get rid of the white space below the image.
In regards to setting the height of the element as a percentage value, this isn't possible unless you explicitly set the height of the imgelement's containing block. So for your case, you could do something like below:
.top-row-logo {
flex: 1;
align-self: center;
height: calc(71px * 0.8);
}
.logo-img {
margin-left: 3.2rem;
height: 100%;
display: block;
}
Or, if you want to be more dynamic you could use some javascript to set the height so even if the height of the image is over 71px it will always render at 80% of its original value.
See below for a demo:
// get the img
let img = document.querySelector(".logo-img");
// retrieve it's height
let imgCSS = window.getComputedStyle(img);
let imgHeight = imgCSS.getPropertyValue("height");
imgHeight = parseInt(imgHeight);
// set the height to 80% of it's original value
let newHeight = imgHeight * 0.8;
// set the height of img element to the new height
img.style.height = newHeight + "px";
*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: "Open Sans";
margin: 0;
padding: 0;
font-size: 0.8em;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
text-decoration: none;
padding: 0 1.5em;
color: #333;
transition: color 400ms ease;
}
li a:hover {
color: #6dacd5;
}
.navWrapper {
position: fixed;
top: 0;
left: 0;
z-index: 3;
width: 100%;
}
.flex-wrapper {
display: flex;
flex-flow: row nowrap;
background-color: white;
border-bottom: 1px solid #c8c8dc;
}
.top-row-logo {
flex: 1;
align-self: center;
}
.logo-img {
margin-left: 3.2rem;
display: block;
}
.top-row-links, .login-links {
margin: auto 0;
}
.top-row-links {
flex: 1.5;
margin-right: 3.2rem;
}
.login-links {
float: right;
margin-right: 4rem;
}
.login-button {
display: inline-block;
color: #008fe1;
font-size: 0.9em;
font-family: "Roboto", sans-serif;
font-weight: 700;
text-align: center;
text-decoration: none;
text-transform: uppercase;
background-color: white;
padding: .8em 1.6em;
border: 2px solid #008fe1;
border-radius: 4px;
cursor: pointer;
transition: all 400ms ease;
}
.login-button:hover {
background-color: #008fe1;
color: #fff;
}
<div class="navWrapper">
<nav id="flex-wrapper" class="flex-wrapper">
<div class="top-row-logo" id="top-row-logo">
<img class="logo-img" src="https://img1.wsimg.com/isteam/ip/7bf494f1-7493-4549-b272-842b0d021577/logo/345e441d-0495-4f5b-bd62-f6413ac9b7a5.png/:/rs=h:71" alt="Sino Medical Institute">
</div>
<div class="top-row-links">
<ul class="navbar">
<li>
Home
</li>
<li>
About Us
</li>
<li>
Services
</li>
<li>
<a href="#">
Register
</a>
</li>
<li>
Contact Us
</li>
<li>
FAQ
</li>
</ul>
</div>
<div class="login-links">
<ul>
<li>
Login
</li>
</ul>
</div>
</nav>
</div>
use auto height...
.navWrapper {
position: fixed;
top: 0;
left: 0;
z-index: 3;
width: 100%;
height:auto;
}