I want to make my links hover only the available 50px (height: 50px), that are in my header but they are taking more space, what am I doing wrong?
/ Image /
Setting padding to 14px in #main-nav ul li a isn't a solution for me. It becomes the exact opposite with less content inside the link.
My HTML document:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/main.css">
<title>Document</title>
</head>
<body>
<header id="main-header">
<nav id="main-nav">
<img src="img/logo.png" alt="" class="logo">
<ul class="main-menu">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Blog</li>
<li>Contact</li>
</ul>
<ul class="right-menu">
<li>EN</li>
</ul>
</nav>
</header>
</body>
</html>
My CSS:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: #EEE;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#main-header {
background-color: #333;
height: 50px;
width: 100%;
}
#main-nav {
height: 50px;
width: 90%;
max-width: 1400px;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
}
#main-nav ul {
display: flex;
list-style: none;
}
#main-nav ul li {
}
#main-nav ul li a {
color: #C2C2C2;
text-decoration: none;
text-transform: uppercase;
font-weight: 600;
padding: 15px;
}
#main-nav ul li a:hover {
background-color: #4B4B4B;
color: #FFF;
}
#main-nav ul.main-menu {
flex: 1;
margin-left: 30px;
}
.logo {
width: 70px;
}
Because you have a set fixed on the outer parent, You need to let that height propagate down to the <a> then center the text within it vertically.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: #EEE;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#main-header {
background-color: #333;
height: 50px;
width: 100%;
}
#main-nav {
height: 50px;
width: 90%;
max-width: 1400px;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
}
#main-nav ul {
display: flex;
list-style: none;
height:100%;
}
#main-nav ul li {}
#main-nav ul li a {
color: #C2C2C2;
text-decoration: none;
text-transform: uppercase;
font-weight: 600;
padding: 15px;
}
#main-nav ul li a:hover {
background-color: #4B4B4B;
color: #FFF;
}
#main-nav ul.main-menu {
flex: 1;
margin-left: 30px;
}
.logo {
width: 70px;
}
/* Solution */
/* sinde the li is a flex item it will automatically take the height of it's parent */
#main-nav ul li a {
/* no need for top and bottom padding anymore */
padding: 0 15px;
height: 100%;
/* To center the text vertically with respect to the height */
display: flex;
align-items: center;
}
<header id="main-header">
<nav id="main-nav">
<img src="https://picsum.photos/50" alt="" class="logo">
<ul class="main-menu">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Blog</li>
<li>Contact</li>
</ul>
<ul class="right-menu">
<li>EN</li>
</ul>
</nav>
</header>
Related
My problem is that I have a header that is supposed to take up the whole top of the page but for some reason, there is a margin on both sides.I tried * margin :0 padding :0 but doesn't work.
when I add div.container margins appears. i added .container because when i grow the page i want my name and nav to stay in the middle withsome space from the sides.as the picture that i shared but without whitespace/that margins. i hope i could explained
appreciate your help
thanks.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
color: black
}
html {
font-family: 'Space Mono', monospace, sans-serif;
}
#navbar {
background-color: yellow;
color: black;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 2rem 0.75rem 1rem;
}
#navbar ul {
list-style-type: none;
display: flex;
align-items: center;
}
#navbar ul li a {
padding-left: 0.75rem;
}
.container {
max-width: 1100px;
margin: 0 auto;
<html>
<head>
</head>
<body>
<header>
<div class="container">
<nav id="navbar">
<h1 class="">Hayden Dominic Christiansen</h1>
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Bio</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
Add the color to the header. See below:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
color: black
}
html {
font-family: 'Space Mono', monospace, sans-serif;
}
header { background: yellow; }
#navbar {
color: black;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 2rem 0.75rem 1rem;
}
#navbar ul {
list-style-type: none;
display: flex;
align-items: center;
}
#navbar ul li a {
padding-left: 0.75rem;
}
.container {
max-width: 1100px;
margin: 0 auto;
<html>
<head>
</head>
<body>
<header>
<div class="container">
<nav id="navbar">
<h1 class="">Hayden Dominic Christiansen</h1>
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Bio</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
You might need to add margin and padding on the body tag.
body{
margin:0;
padding:0;
box-sizing: border-box;
}
a{
text-decoration: none;
color:black
}
header {
width: 100%;
}
html{
font-family: 'Space Mono', monospace,sans-serif;
}
#navbar{
background-color: yellow;
color: black;
display: flex;
justify-content: space-between;
align-items: center;
padding:0.75rem 2rem 0.75rem 1rem;
}
#navbar ul{
list-style-type: none;
display: flex;
align-items: center;
}
#navbar ul li a {
padding-left: 0.75rem;
}
</head>
<body>
<header>
<div class="container">
<nav id="navbar">
<h1 class="">Hayden Dominic Christiansen</h1>
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Bio</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
Remove the max-width attribute from the the .container selector as it is fixing the width of your navbar to a max of 1100px. Removing it will solve your problem.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
color: black
}
html {
font-family: 'Space Mono', monospace, sans-serif;
}
#navbar {
background-color: yellow;
color: black;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 2rem 0.75rem 1rem;
}
#navbar ul {
list-style-type: none;
display: flex;
align-items: center;
}
#navbar ul li a {
padding-left: 0.75rem;
}
.container {
/* max-width: 1100px; Remove this line as it is fixing the navbar to a max of 1100px */
margin: 0 auto;
}
<html>
<head>
</head>
<body>
<header>
<div class="container">
<nav id="navbar">
<h1 class="">Hayden Dominic Christiansen</h1>
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Bio</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
Then try this header.container {margin: 0 !important; padding: 0 >!important}
and lose your job for that xD
first, if you find yourself using important in your own styles, you are doing something wrong.
second, his container is a div, divs do not have any default margins or paddings - nothing to set to 0.
If you don't want margin on your container class, try adding
.container {
margin: 0;
padding: 0
}
I don't know how to align it with the logo. I'm trying to use padding but it won't work and even float maybe I would change the container size for it to work. Btw you won't be able to see the image and the li option due to overflow not allowing links so I have attached an image for more convenience
if possible maybe even tell some tips to be better in HTML
enter image description here
header {
height: 600px;
background-image:urlenter code here;
background-repeat: no-repeat;
background-size: cover;
}
.header-container {
height: 1240px;
width: 1240px;
padding-left: 3%;
}
.header-logo{
height: 150px;
width: 450px;
}
img.logo{
width: 400px;
height: 150px;
}
nav {
padding-top: 10px;
}
nav ul {
margin: 0;
padding:0;
}
nav ul li {
display: inline-flex;
margin-left: 50px;
list-style-type: none;
}
nav ul li a {
padding-bottom: 11px;
font-family: 'Raleway', sans-serif;
font-weight: bold;
font-size: 16px;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.1em;
color: #111111;
}
nav ul li a:hover {
border-bottom: 2px solid #f22222;
}
<html lang="en">
<head>
<link rel="stylesheet" href="./css/style.css">
<title>Katalyst Incorporation LLC.</title>
</head>
<body>
<header id="up">
<div class="header-container">
<nav>
<div class="header-logo">
<img class="logo" src="./img/katalyst incorporation logo.png" alt="logo">
</div>
<ul>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
If you want to make logo and menu in a line, you should add "float: left" style to your div. So your style will be this:
.header-logo {
height: 150px;
width: 450px;
float: left;
}
Then if you want change your menu vertical align you can add "margin-top: px" to your ul like this:
nav ul {
margin: 0;
padding: 0;
margin-top: 50px;
}
As logo div and ul are children of same parent,
you can make their parent i.e <nav> as display: flex to align it's children in a flex-row
Learn More on FlexBox
nav {
display: flex;
}
header {
height: 600px;
background-image: urlenter code here;
background-repeat: no-repeat;
background-size: cover;
}
.header-container {
height: 1240px;
width: 1240px;
padding-left: 3%;
}
.header-logo {
height: 150px;
width: 450px;
}
img.logo {
width: 400px;
height: 150px;
}
nav {
padding-top: 10px;
display: flex;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
display: inline-flex;
margin-left: 50px;
list-style-type: none;
}
nav ul li a {
padding-bottom: 11px;
font-family: 'Raleway', sans-serif;
font-weight: bold;
font-size: 16px;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.1em;
/* color: #ffffff; */
color: #000; /* changing this so that you can see color */
}
nav ul li a:hover {
border-bottom: 2px solid #f22222;
}
<html lang="en">
<head>
<link rel="stylesheet" href="./css/style.css">
<title>Katalyst Incorporation LLC.</title>
</head>
<body>
<header id="up">
<div class="header-container">
<nav>
<div class="header-logo">
<img class="logo" src="./img/katalyst incorporation logo.png" alt="logo">
</div>
<ul>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
I have changed the font color, so that you can see it working.
Hello,
I have been making a website recently and I was making a dropdown navigation bar. The thing is, whenever I insert text and hover over my navigation bar, it does not cover the text. I have searched along Stack Overflow for a little bit now, and everything I've tried hasn't worked. I have tried "position: absolute;", "z-index: 1000;" etc. I was wondering if I made my own forum, someone could possibly help me out. Internet Explorer, Google Chrome, and Microsoft Edge all do not work. Thank you for responding.
/*Title*/
html, body {
margin: 0;
padding: 0;
font-family: Cursive, Sans-Serif;
}
#header {
width: auto;
height: 10px;
padding: 1% 1% 1% 2%;
background-color: #5e0d0d;
box-shadow: 1px 1px 2px 2px #262626;
}
#header #title {
font-family: "Open Sans", "Segoe UI";
font-size: 150%;
font-weight: lighter;
color: #fff;
text-decoration: none;
float: left;
margin-top: -.65%;
}
/*Navigation Bar*/
ul {
font-family: Arial;
margin: 0px;
padding: 0px;
list-style: none;
}
ul li {
float: left;
width: 200px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 20px;
margin-top: -.60%
}
ul li a {
text-decoration: none;
color: white;
display: block;
}
ul li a:hover {
background-color: #911515;
z-index: 1000;
}
<!DOCTYPE html>
<html>
<head>
<title>Slasher Hub - Latest</title>
<meta name="viewport" content="width:device-width; initial-scale:1;">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header id="header">
Slasher Hub
<nav>
<ul>
<li style="margin-left: 40px;"><a>Home</a></li>
<li><a>About Me</a></li>
<li><a>Slasher Dev Team</a>
<ul>
<li><a>About Us</a></li>
<li><a>Contact</a></li>
<li><a>News</a></li>
<li><a>Recent</a></li>
</ul>
</li>
<li><a>Gallary</a></li>
</ul>
</nav>
</header>
<h3>Welcome to the Slasher Hub! This is the latest stuff going on with Slasher now!</h3>
</body>
</html>
To make z-index work you have to add position:absolute to the element.
ul li a:hover {
background-color: #911515;
z-index: 1000;
position: absolute; }
Overall, all you had to do was add position: relative to either your <nav> or <header> element.
/*Title*/
html,
body {
margin: 0;
padding: 0;
font-family: Cursive, Sans-Serif;
}
#header {
width: auto;
height: 10px;
padding: 1% 1% 1% 2%;
background-color: #5e0d0d;
box-shadow: 1px 1px 2px 2px #262626;
}
#header #title {
font-family: "Open Sans", "Segoe UI";
font-size: 150%;
font-weight: lighter;
color: #fff;
text-decoration: none;
float: left;
margin-top: -.65%;
}
/*Navigation Bar*/
ul {
font-family: Arial;
margin: 0px;
padding: 0px;
list-style: none;
}
ul li {
float: left;
width: 200px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 20px;
margin-top: -.60%
}
ul li a {
text-decoration: none;
color: white;
display: block;
}
ul li a:hover {
background-color: #911515;
z-index: 1000;
}
/* Here's the change */
header {
position: relative;
}
<!DOCTYPE html>
<html>
<head>
<title>Slasher Hub - Latest</title>
<meta name="viewport" content="width:device-width; initial-scale:1;">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header id="header">
Slasher Hub
<nav>
<ul>
<li style="margin-left: 40px;"><a>Home</a></li>
<li><a>About Me</a></li>
<li><a>Slasher Dev Team</a>
<ul>
<li><a>About Us</a></li>
<li><a>Contact</a></li>
<li><a>News</a></li>
<li><a>Recent</a></li>
</ul>
</li>
<li><a>Gallary</a></li>
</ul>
</nav>
</header>
<h3>Welcome to the Slasher Hub! This is the latest stuff going on with Slasher now!</h3>
</body>
</html>
I also modified your <nav> menu a bit to give you some ideas of an overall setup.
/*Title*/
html,
body {
margin: 0;
padding: 0;
font-family: Cursive, Sans-Serif;
}
#header {
width: auto;
/* height: 10px; Remove the height */
display: inline-block; /* Set the display */
padding: 1% 1% 1% 2%;
background-color: #5e0d0d;
box-shadow: 1px 1px 2px 2px #262626;
}
#header #title {
font-family: "Open Sans", "Segoe UI";
font-size: 150%;
font-weight: lighter;
color: #fff;
text-decoration: none;
float: left;
margin-top: -.65%;
}
/*Navigation Bar*/
/* Make the position of the container relative to have it sit above the content */
nav {
position: relative;
}
/* Add nav to each of the navigation bar selectors to be more specific */
nav ul {
font-family: Arial;
margin: 0px;
padding: 0px;
list-style: none;
}
nav ul li {
float: left;
width: 200px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 20px;
}
nav li a {
text-decoration: none;
color: white;
display: block;
}
nav li:not(.top-level) a {
background-color: #5e0d0d;
}
nav li:not(.top-level) a:hover {
background-color: #911515
}
nav li.top-level > ul {
display: none;
}
nav li.top-level:hover > ul {
display: block;
}
<header id="header">
Slasher Hub
<nav>
<ul>
<li class="top-level">Home</li>
<li class="top-level">About Me</li>
<li class="top-level">Slasher Dev Team
<ul>
<li>About Us</li>
<li>Contact</li>
<li>News</li>
<li>Recent</li>
</ul>
</li>
<li class="top-level">Gallary</li>
</ul>
</nav>
</header>
<h3>Welcome to the Slasher Hub! This is the latest stuff going on with Slasher now!</h3>
Let me know if you have any questions.
I've ran into a problem that I'm not sure how to fixed and I believe it may have to do with the position? I've tried to look up solutions but still can't figure out why this is happening.
So I am trying to put my header (name) in my fixed navigation bar. When I attempt to do this, the header is sitting behind the grey background colour...
How can I bring the header to be on top of the background? I want the header to be fixed with the navigation bar.. thanks so much in advance!
html {
margin: 0;
background: #ffffff;
}
body {
margin: 0;
background: #ffffff;
}
/*---font---*/
#font-face {
font-family: open-sans;
src: url('open-sans.regular.ttf');
}
#font-face {
font-family: Prata-Regular;
src: url('Prata-Regular.ttf');
}
#font-face {
font-family: Frontage-Outline;
src: url('Frontage-Outline.otf');
}
/*---nav bar---*/
h1 {
display: inline-block;
float: left;
position: fixed;
z-index: -1;
}
ul {
list-style-type: none;
background-color: #F5F5F5;
margin: 0;
padding: 0;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
display: inline-block;
}
li {
float: right;
}
li a {
display: block;
color: #000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: open-sans;
}
li a:hover:not(.active) {
color: #555555;
}
.active {
color: #000;
}
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<!--nav bar-->
<div class="navbar">
<div class="bar">
<h1>cindy le</h1>
<ul>
<li>about</li>
<li>work</li>
<li>contact</li>
</ul>
</div>
</div>
</body>
</html>
Change z-index of h1 to 1
html {
margin: 0;
background: #ffffff;
}
body {
margin: 0;
background: #ffffff;
}
/*---font---*/
#font-face {
font-family: open-sans;
src: url('open-sans.regular.ttf');
}
#font-face {
font-family: Prata-Regular;
src: url('Prata-Regular.ttf');
}
#font-face {
font-family: Frontage-Outline;
src: url('Frontage-Outline.otf');
}
/*---nav bar---*/
h1 {
display: inline-block;
float: left;
position: fixed;
z-index: 1; /* Change to 1*/
}
ul {
list-style-type: none;
background-color: #F5F5F5;
margin: 0;
padding: 0;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
display: inline-block;
}
li {
float: right;
}
li a {
display: block;
color: #000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: open-sans;
}
li a:hover:not(.active) {
color: #555555;
}
.active {
color: #000;
}
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<!--nav bar-->
<div class="navbar">
<div class="bar">
<h1>cindy le</h1>
<ul>
<li>about</li>
<li>work</li>
<li>contact</li>
</ul>
</div>
</div>
</body>
</html>
The best way to do this is to fix the navbar div and then float a div to the left and include the h1 tag and a div to the right and include the ul. I wouldn't float the h1 and the ul. Something like below:
.navbar{
position: fixed;
width: 100%;
top: 100%;
left: 100%;
background-color: #f5f5f5;
}
.navbar-left{
float left;
text-align: left;
}
.navbar-right{
float: right;
text-align: right;
}
.navbar ul{
display: inline-block;
list-style-type: none;
margin: 0px;
padding: 0px;
}
.navbar ul li{
float: left;
}
.navbar ul li a{
display: block;
padding: 14px 16px;
color: #555555;
font-family: open-sans;
}
.navbar ul li a:hover{
color: #000;
}
.clear{
clear: both;
}
<div class="navbar">
<div class="navbar-left">
<h1>header text</h1>
</div>
<div class="navbar-left">
<ul>
<li>about</li>
<li>work</li>
<li>contact</li>
</ul>
</div>
<div class="clear"></div>
</div>
Sorry about formatting. Used mobile phone to post.
So i'm currently working on building my own website but ran into some trouble when it came to centering my actual ul within my navigation bar. The nav bar is already centered and fine but i am trying to center the actual ul and still keep it left aligned. I am using Brackets text editor. Any Help ?
Thanks in advance and heres my CSS code:
body {
background-color: #333333;
margin: 100 0;
}
.mainimg {
border-style: solid;
width: 80%;
margin: 10 auto;
}
.mainimg img {}
.nav-bar {
text-align: center;
width: 85%;
margin: 0 auto;
}
.nav-bar ul {
width: 100%;
list-style-type: none;
margin: 0 auto;
padding: 0 auto;
overflow: hidden;
background-color: #333333;
}
.nav-bar li {
float: left;
width: 10%;
}
.nav-bar li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
.nav-bar li a:hover {
background-color: #111111;
}
<html>
<head>
<title>Satori</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="imageslider">
<img src="images/SATORI%20ARROW%20LEFT.png" width=100px alt="left">
<img class="mainimg" src="images/satori-for-web-background.png" alt="oauihgoiw">
<img src="images/SATORI%20ARROW%20RIGHT.png" width=100px alt="right">
</div>
<div class="nav-bar">
<ul>
<li>Station</li>
<li>Search</li>
<li>Shop</li>
<li>Films</li>
<li>Art</li>
<li>Podcast</li>
<li>Blog</li>
<li>Games</li>
<li>Music</li>
</ul>
</div>
</body>
</html>
Update below css part
.nav-bar li {
display:inline-flex; /* OR display:inline-block */
/* float:left; */
/* width: 10%; */
}
body {
background-color: #333333;
margin: 100 0;
}
.mainimg {
border-style: solid;
width: 80%;
margin: 10 auto;
}
.mainimg img {}
.nav-bar {
text-align: center;
width: 85%;
margin: 0 auto;
}
.nav-bar ul {
width: 100%;
list-style-type: none;
margin: 0 auto;
padding: 0 auto;
overflow: hidden;
background-color: #333333;
}
.nav-bar li {
display:inline-flex; /* OR display:inline-block */
/* float:left; */
/* width: 10%; */
}
.nav-bar li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
.nav-bar li a:hover {
background-color: #111111;
}
<div class="imageslider">
<img src="images/SATORI%20ARROW%20LEFT.png" width=100px alt="left">
<img class="mainimg" src="images/satori-for-web-background.png" alt="oauihgoiw">
<img src="images/SATORI%20ARROW%20RIGHT.png" width=100px alt="right">
</div>
<div class="nav-bar">
<ul>
<li>Station</li>
<li>Search</li>
<li>Shop</li>
<li>Films</li>
<li>Art</li>
<li>Podcast</li>
<li>Blog</li>
<li>Games</li>
<li>Music</li>
</ul>
</div>