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.
Related
i'm here to beg for your help! the problem is regarding Navigation bar, and the text/links for it.
The issue is that the last list item is all the way to the right of the header, i want to move everything to the left, not to center it completly, just to be able to move it bit by bit to fit it for my purpose!
Thanks on beforehand
/* CSS below: */
body {
margin: 0;
background: #222;
font-family: 'work sans', sans-serif;
font-weight: 400;
}
.container {
width: 80% margin: 0 auto;
}
header {
background: #55d6aa;
}
header::after {
content: '';
display: table;
clear: both;
}
nav {
float: right;
}
nav ul {
margin 0;
padding 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding-top: 20px;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 15px;
}
nav a:hover {
color: #000;
}
.logo {
float: left;
padding: 10px 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>navbar</title>
<link href="https://fonts.googleapis.com/css2?family=Work+Sans&display=swap" rel="stylesheet">
<link href="stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="container">
<img src="logo1.png" alt="Logo" class="logo">
<nav>
<ul>
<li>Deals</li>
<li>Radiostyrt</li>
<li>El-fordon</li>
<li>Kontakta oss</li>
<li>Media Galleri</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
try putting a margin-right: 50px or something on your nav tag
Please see the code snippets on CSS parts for the change. I hope this is your expected output.
/* CSS below: */
body {
margin: 0;
background: #222;
font-family: 'work sans', sans-serif;
font-weight: 400;
}
.container {
width: 80%;
}
header {
background: #55d6aa;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
padding: 10px 0;
}
nav {
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding-top: 10px;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 15px;
}
nav a:hover {
color: #000;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>navbar</title>
<link href="https://fonts.googleapis.com/css2?family=Work+Sans&display=swap" rel="stylesheet">
<link href="stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="container">
<img src="logo1.png" alt="Logo" class="logo">
<nav>
<ul>
<li>Deals</li>
<li>Radiostyrt</li>
<li>El-fordon</li>
<li>Kontakta oss</li>
<li>Media Galleri</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
put margin-right: how much you want px on your nav tag, and don't forget to create a div to the logo, because if you put the margin-right the logo will go togheter to the left.
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>
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 am trying to use CSS so when you hover on something it changes background colors. The code I am using does not work though. I can't seem to find out why though. It should work, right?
body {
margin: 0;
font-family: Arial;
font-size: 1em;
}
.navbar-ul, a {
margin: 0;
color: white;
overflow: hidden;
}
li, a {
text-decoration: none;
display: inline-block;
padding: 10px;
background: black;
}
li a :hover {
background-color: blue;
}
li {
list-style-type: none;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dark Website Template by Jordan Baron</title>
<link rel="stylesheet" href="styles-main.css">
</head>
<body>
<div class="navbar">
<ul class="navbar-ul">
<li>HOME</li>
<li>CONTACT</li>
<li>ABOUT</li>
</ul>
</div>
</body>
</html>
Please help!
Adjust your on-hover rule slightly and consider the a element as well:
li:hover, li:hover a {
background: blue;
}
body {
margin: 0;
font-family: Arial;
font-size: 1em;
}
.navbar-ul, a {
margin: 0;
color: white;
overflow: hidden;
}
li, a {
text-decoration: none;
display: inline-block;
padding: 10px;
background: black;
transition: .7s;
}
li:hover, li:hover a {
background: blue;
}
li {
list-style-type: none;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dark Website Template by Jordan Baron</title>
<link rel="stylesheet" href="styles-main.css">
</head>
<body>
<div class="navbar">
<ul class="navbar-ul">
<li>HOME</li>
<li>CONTACT</li>
<li>ABOUT</li>
</ul>
</div>
</body>
</html>
You have a VERY simple mistake.
When you have this code...
li a: hover
remove the space between a and :hover and see the magic.
Now, it should look like this.
li a:hover
#Joseph Young mentioned this, don't forget to upvote his comment.
body {
margin: 0;
font-family: Arial;
font-size: 1em;
}
.navbar-ul, a {
margin: 0;
color: white;
overflow: hidden;
}
li, a {
text-decoration: none;
display: inline-block;
padding: 10px;
background: black;
}
li a:hover {
background-color: blue;
}
li {
list-style-type: none;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dark Website Template by Jordan Baron</title>
<link rel="stylesheet" href="styles-main.css">
</head>
<body>
<div class="navbar">
<ul class="navbar-ul">
<li>HOME</li>
<li>CONTACT</li>
<li>ABOUT</li>
</ul>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
.wrapper {
padding-top: 10px;
width: 320px;
margin: 0 auto;
overflow: hidden;
}
.menu {
background: #093;
}
.menu ul {
margin-left: 0;
list-style: none;
text-align: center;
}
.menu ul li {
display: inline-block;
}
.menu ul li a {
display: block;
padding: 10px;
color: #CC0;
text-decoration: none;
}
.menu ul li a:hover {
background: #C30;
color: #FFF;
}
<div class="wrapper">
<div class="menu">
<ul>
<li>HOME
</li>
<li>CONTACT
</li>
<li>ABOUT
</li>
</ul>
</div>
whenever i hover over the currently selected menu item its color changes i want to prevent that. here my code.
<html>
<head>
<title> Another Page </title>
<link rel="stylesheet" href="style4.css" type="text/css" />
<head>
<body>
<div id="title">
<ul>
<li class="current">Home</li>
<li>Content</li>
<li>Search</li>
</ul>
<div id="clear">
</div>
</div>
<div id="wrapper">
<div id="header">
</div>
</div>
</body>
</html>
and here's the css
body
{
padding: 0;
margin: 0;
background-color: rgb(24,205,20);
}
h1,h2,h3
{
padding: 0;
margin: 0;
}
p
{
padding: 0;
margin: 0;
}
.current
{
background-color: black;
}
#title
{
background-color: orange;
}
#title ul
{
list-style: none;
padding: 0;
margin: 0;
}
#title li
{
float: left;
}
#title a
{
text-transform: uppercase;
text-align: center;
text-decoration: none;
display: block;
width: 120px;
font-weight: bold;
color: #ffffff;
padding: 4px;
}
#title a:hover
{
background-color: rgb(180,138,18);
}
#clear
{
clear: both;
}
need some urgent suggestions on solving this issue.
Thank you.
Add this line to the end of your CSS file:
#title .current a:hover {
background-color: inherit;
}