I’m trying to practice my HTML5 and CSS3 skills by making a navbar for my page, but I’m having a lot of trouble. I'm trying to use HTML5 semantic tags to make it, but none of them are looking how I want them to and it is a huge positioning mess. Could someone please tell me how I could make a functional navbar?
Here’s my HTML code for the whole navbar and header:
body {
margin:0;
}
#nav-plus-head-wrapper {
background: blue;
height: 100px;
position: absolute;
top: 0px;
left:0px;
right:0px;
}
#topheader {
}
#topnav {
background: yellow;
position: relative;
top: 0px;
right: 0px;
}
.navli {
display: inline;
}
a:link {
text-decoration: none;
color: red;
}
a:hover {
text-decoration: none;
color: orange;
}
a:visited {
text-decoration: none;
color: white;
}
<section id="nav-plus-head-wrapper">
<!--CODE FOR WEBSITE NAME-->
<header id="topheader">
<h1>Site</h1>
</header>
<!--CODE FOR TOP NAVBAR-->
<nav id="topnav">
<ul id="topnav-ul">
<li class="navli">Home</li>
<li class="navli">About</li>
<li class="navli">Services</li>
<li class="navli">Contact</li>
</ul>
</nav>
</section>
There is more than one way to make a functional nav bar. you can buttons, divs, links, lists, or even a mix of them. I usually go with the simplest way.
here is a simple way with simple code that you can check and read to learn from it.
I hope this will help.
* {
scroll-behavior: smooth;
margin: 0;
padding: 0;
text-decoration-line: none;
scroll-padding-top: 100px;
}
.header {
width: 100%;
height: 100px;
position: fixed;
top: 0;
background: #666699;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
align-content: center;
}
.navbar {
width: 50%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
align-content: center;
}
.navBtn {
width: 80px;
height: 40px;
margin: 0 10px;
font-size: 20px;
background: white;
display: flex;
justify-content: center;
align-items: center;
}
.navBtn a {
color: #000;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.section {
width: 100%;
height: 90vh;
z-index: -1;
display: flex;
color: white;
font-size: 40px;
justify-content: center;
align-items: center;
align-content: center;
}
.homeSect {
background: #0066ff;
margin-top: 100px;
height: 100vh;
}
.workSect {
background: #33cc33;
}
.aboutSect {
background: #ffcc00;
}
</head>
<header class="header" id="header">
<nav class="navbar">
<button class="navBtn homeBtn" id="homeBtn">
Home
</button>
<button class="navBtn workBtn" id="workBtn">
Work
</button>
<button class="navBtn aboutBtn" id="aboutBtn">
About
</button>
</nav>
</header>
<body class="body">
<div class="onscrolldiv" id="onscrolldiv"></div>
<section class="homeSect section" id="homeSect">Home section</section>
<section class="workSect section" id="workSect">Work section</section>
<section class="aboutSect section" id="aboutSect">About section</section>
first you need to reset all your html like this:
*, *:after, *:before {
outline: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
then you float your <header id="topheader"> left maybe it s a logo
#topheader {
float:left;
color:white;
}
and you <nav id="topnav"> right the main nav
#topnav {
position: relative;
top: 20px;
float:right;
}
now you can set you items like this
.navli {
float:left;
list-style:none;
width:24%;
height:100%;
padding:20px;
margin:0 0 0 1%;
background-color:#ccc;
}
demo: http://jsfiddle.net/AvHKT/1/
Related
I have a navbar inside a header tag. the header tag is flex. the navbar too. in the navbar i have three a tags with the display value inline-block; and a padding in the height and width. So far so good. When i hover the links the hover effect is shown over the whole height.
The problem: If I add an image to the first link, I can't make the image higher than 10 px because the padding affects the entire navbar height. What I do not want.
Question: How can I add the image to the link without it affecting the height of the navbar?
My code
body {
margin: 0;
padding: 0;
}
header {
display:flex;
justify-content: space-between;
align-items: center;
background: green;
position: fixed;
top: 0;
overflow: hidden;
width:100%;
}
.logo {
background: yellow;
display: flex;
align-items: center;
}
.navbar {
background-color: #333;
display: flex;
align-items: center;
}
.navbar a:not(:first-child) {
display: inline-block;
}
.navbar a {
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 12px;
}
.navbar a:hover {
background: #ddd;
color: black;
}
.flex {
gap:10px;
display: flex;
align-items: center;
font-size: 12px;
}
.main {
margin-top: 180px;
color: color;
height:50vh;
background: black;
}
<div>
<header>
<div class="logo">
<img src="https://via.placeholder.com/40">Logo
</div>
<nav class="navbar">
<a href="#home">
<div class="flex">
<div>
<img src="https://via.placeholder.com/30">
</div>
<div>10000</div>
</div>
</a>
News
Contact
</nav>
</header>
<main class="main">
text
</main>
</div>
expected
body {
margin: 0;
pading: 0;
}
header {
display:flex;
justify-content: space-between;
align-items: center;
background: green;
position: fixed;
top: 0;
overflow: hidden;
width:100%;
}
.logo {
background: yellow;
display: flex;
align-items: center;
}
.navbar {
background-color: #333;
display: flex;
align-items: center;
}
.navbar a:not(:first-child) {
display: inline-block;
}
.navbar a {
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 12px;
}
.navbar a:hover {
background: #ddd;
color: black;
}
.flex {
gap:10px;
display: flex;
align-items: center;
font-size: 12px;
}
.main {
margin-top: 180px; /* Add a top margin to avoid content overlay */
color: color;
height:50vh;
background: black;
}
<div>
<header>
<div class="logo">
<img src="https://via.placeholder.com/40">Logo
</div>
<nav class="navbar">
<a href="#home">
10000
</a>
News
Contact
</nav>
</header>
<main class="main">
xca
</main>
</div>
Use flex behavior to align and stretch instead of additional markups
In the code snippet below, I removed the extra markup in the first a element that contains the img. Instead, I made all a tags display: inline-flex and removed vertical padding in the first one. Then, using the parent nav element's align-items property, I ensured each a tag has the same full height for consistent hover effect.
body {
margin: 0;
padding: 0;
}
header {
display:flex;
justify-content: space-between;
align-items: center;
background: green;
position: fixed;
top: 0;
overflow: hidden;
width:100%;
}
.logo {
background: yellow;
display: flex;
align-items: center;
}
.navbar {
background-color: #333;
display: flex;
align-items: stretch;
}
.navbar a {
display: inline-flex;
}
.navbar a {
color: #f2f2f2;
justify-content: center;
align-items: center;
padding: 14px 16px;
text-decoration: none;
font-size: 12px;
}
.navbar a:first-of-type {
padding-top:0;
padding-bottom:0;
}
.navbar a:hover {
background: #ddd;
color: black;
}
.flex {
gap:10px;
display: flex;
align-items: center;
font-size: 12px;
}
.main {
margin-top: 180px;
color: color;
height:50vh;
background: black;
}
<div>
<header>
<div class="logo">
<img src="https://via.placeholder.com/40">Logo
</div>
<nav class="navbar">
<a href="#home">
<img src="https://via.placeholder.com/30">
10000
</a>
News
Contact
</nav>
</header>
<main class="main">
text
</main>
</div>
I'm working on a project and my CSS doesn't seem to be cascading correctly.
I have set some styles (mainly the color property) at the HTML tag level. However it is not cascading to the rest of my elements, specifically the .logo class, but also some other classes. Can anyone help me understand why this is happening?
Here is my code:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-family: Helvetica, Arial, sans-serif;
color: seashell;
background-color: black;
text-align: center;
font-size: 22px;
opacity: 0.9;
}
/* Header and Nav Bar */
.header {
display: flex;
justify-content: space-between;
align-items: center;
height: 69px;
width: 100%;
position: fixed;
top: 0;
z-index: 10;
border-bottom: 1px solid seashell;
}
.logo {
margin-left: 10px;
max-height: 50px;
}
.navigation {
display: flex;
list-style: none;
}
.navigation a {
padding: 15px;
}
.navigation a:hover {
text-decoration: none;
}
/******* Hero *******/
#hero {
background-image: url(/Images/img-mission-background.webp);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
top: 70px;
height: 700px;
width: 1200px;
margin: auto;
opacity: 0.8;
}
#hero h2,
h4 {
padding: 12px;
}
/***** Content ******/
.content {
position: relative;
top: 100px;
}
<!--******* Header ******* -->
<header class="header">
<img src="/Images/img-tea-cozy-logo.webp" alt="Tea Cozy Logo" class="logo" />
<ul class="navigation">
<li>Mission</li>
<li>Featured Tea</li>
<li>Locations</li>
</ul>
</header>
<section id="hero">
<h2>Our Mission</h2>
<h4>
Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea
</h4>
</section>
<section class="content">
<h1>Tea of the Month</h1>
</section>
My header should be fixed on the page so i couldn't use float:right;. I'm %150 newbie around here. Logo should be on right side of the navbar and also responsive. I tried margin, float and other flex properties. I'm just going to be mad. Where is the mistake.
#import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
body {
margin: 0;
font-family: 'Trebuchet MS', sans-serif;
background-color: #efefef;
}
.wrapper {
position: relative;
}
.header-logo {
width: 20vw;
height: 20vw;
}
header {
width: 100%;
height: 4rem;
background: #609F92;
position: fixed;
display: flex;
font-family: Oswald, sans-serif;
font-size: 1.5rem;
}
#header-img {
width: 100%;
height: 100%;
border-radius: 50%;
box-shadow: 1px 1px 2px 1px;
}
#nav-bar {
display: flex;
flex-direction: row;
}
#nav-bar ul {
display: flex;
flex-direction: row;
align-items: center;
list-style: none;
}
#nav-bar li {
margin: 10px;
}
<div class="wrapper">
<header id="header">
<nav id="nav-bar">
<ul>
<li>Features</li>
<li>About Us</li>
<li>Contact</li>
</ul>
<div class="header-logo">
<img id="header-img" src="https://thumbnails-photos.amazon.com/v1/thumbnail/lFJOXJpuTKGgtJYa9-wScA?viewBox=943%2C943&ownerId=A4PYAHHROL8LR&groupShareToken=OSTx_M1GRRS1y_rPWtVfGA.8mpQdgJWAet53NrSPN2TyS">
</div>
</nav>
</header>
</div>
The issue is mainly caused because you nesting so many flexboxes within each other. As such the elements will not span the entire available width automatically.
Give the nav tag a width of 100% to fill out the entire containers width: #nav-bar { width: 100% }
to align the logo to the right within a flexbox use margin-left: auto: .header-logo { margin-left: auto; }
Also you could improve your code by removing the ID from the nav element and target the nav element directly. As semantically you should only have one nav element it would be unecessary to asign an id to it. Same rule also counts for the header element.
Then you could remove display: flex; from the header which has only one child element in the first place and as such is useless. IMHO it would be smarter though to close the nav with the ul as the logog is semantically not part of the navbar.
Last but not least you could remove flex-direction: row as it is the default value anyways.
#nav-bar {
width: 100%;
}
.header-logo {
margin-left: auto;
}
/* original CSS */
#import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
body {
margin: 0;
font-family: 'Trebuchet MS', sans-serif;
background-color: #efefef;
}
.wrapper {
position: relative;
}
.header-logo {
width: 20vw;
height: 20vw;
}
header {
width: 100%;
height: 4rem;
background: #609F92;
position: fixed;
display: flex;
font-family: Oswald, sans-serif;
font-size: 1.5rem;
}
#header-img {
width: 100%;
height: 100%;
border-radius: 50%;
box-shadow: 1px 1px 2px 1px;
}
#nav-bar {
display: flex;
flex-direction: row;
}
#nav-bar ul {
display: flex;
flex-direction: row;
align-items: center;
list-style: none;
}
#nav-bar li {
margin: 10px;
}
<div class="wrapper">
<header id="header">
<nav id="nav-bar">
<ul>
<li>Features</li>
<li>About Us</li>
<li>Contact</li>
</ul>
<div class="header-logo">
<img id="header-img" src="https://thumbnails-photos.amazon.com/v1/thumbnail/lFJOXJpuTKGgtJYa9-wScA?viewBox=943%2C943&ownerId=A4PYAHHROL8LR&groupShareToken=OSTx_M1GRRS1y_rPWtVfGA.8mpQdgJWAet53NrSPN2TyS">
</div>
</nav>
</header>
</div>
I also created a Codepen for you where I corrected the code to be semantically correct and to shroten it to the necessary lines: Codepen
So I have a code for a website that uses HTML and CSS but I have a problem with CSS.
HTML:
<html>
<head>
<title>Test</title>
</head>
<body>
<h2>TEST</h2>
<div class="navbar">
<div class="navbar-inner">
<img src="todo.png">
<img src="home.png">
<img src="info.png">
</div>
</div>
</body>
</html>
CSS:
body {
background-color: #222222;
width: 100%;
}
img {
width: 50px;
height: 50px;
}
a {
cursor: pointer;
}
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.navbar a {
color: #f2f2f2;
text-align: center;
display: inline-block;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
margin: 0px auto;
}
.navbar a:hover {
background: #222222;
color: black;
}
This is my result:
Result Image
It works and all, but if you look at the bottom left (at the menu), it isn't fully covered. I have tried many ways to cover it, but I can't seem to get it right.
Any ideas? Appreciated if you explain it to me as well.
Most major browsers apply a margin on the body, thus causing the footer not expanding to the viewport's full width.
To get rid of the margin, applying margin: 0 to body:
body {
background-color: #222222;
width: 100%;
margin:0;
}
img {
width: 50px;
height: 50px;
}
a {
cursor: pointer;
}
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.navbar a {
color: #f2f2f2;
text-align: center;
display: inline-block;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
margin: 0px auto;
}
.navbar a:hover {
background: #222222;
color: black;
}
<html>
<head>
<title>Test</title>
</head>
<body>
<h2>TEST</h2>
<div class="navbar">
<div class="navbar-inner">
<img src="todo.png">
<img src="home.png">
<img src="info.png">
</div>
</div>
</body>
</html>
Just add left : 0;
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
You can also reduce that type of error by just adding this code at the top.
*{
margin:0;
padding:0;
box-sizing:border-box;
}
I have this navigation bar that works really well. It is fixed so it follows you as you scroll through the website. However, I would like for the navbar to only start in the second section (#home) and for it to not be visible in the first section (#section0).
Could I please have some help?
#section0 {
width: 100%;
height: 100vh;
background-color: blue;
}
#home {
width: 100%;
height: 100vh;
background-color: white;
display: block;
margin: 0 auto;
}
#home ul {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
z-index: 9999;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
position: -webkit-fixed;
/* Safari */
position: fixed;
top: 0;
}
#home ul li.left-menu {
display: flex;
justify-content: flex-end;
}
#home ul li.right-menu {
display: flex;
justify-content: flex-start;
}
#home li a {
display: block;
color: white;
text-align: center;
padding: 13px 20px;
text-decoration: none;
font-family: Futura;
font-size: 8px;
}
#home li a:hover {
color: #00CFFF;
}
#home .active {
color: #00CFFF;
}
#secondpage {
height: 100vh;
width: 100%;
background-color: orange;
}
<section id="section0">
</section>
<section id="home">
<ul>
<li class="left-menu">
<a class="active" href="#home">HOME</a>
HOW IT WORKS
WHY CHOOSE US
</li>
</li>
<li class="right-menu">
SERVICES
OUR GALLERY
CONTACT US
</li>
</section>
<section id="secondpage">
</section>
Just set a higher z-index for the first section.
body {
margin: 0;
padding: 0;
}
#section0 {
width: 100%;
height: 100vh;
background-color: blue;
z-index: 99999;
position: relative;
}
#home {
width: 100%;
height: 100vh;
background-color: white;
display: block;
margin: 0 auto;
}
#home ul {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
z-index: 9999;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
position: -webkit-fixed;
/* Safari */
position: fixed;
top: 0;
}
#home ul li.left-menu {
display: flex;
justify-content: flex-end;
}
#home ul li.right-menu {
display: flex;
justify-content: flex-start;
}
#home li a {
display: block;
color: white;
text-align: center;
padding: 13px 20px;
text-decoration: none;
font-family: Futura;
font-size: 8px;
}
#home li a:hover {
color: #00CFFF;
}
#home .active {
color: #00CFFF;
}
#secondpage {
height: 100vh;
width: 100%;
background-color: orange;
}
<section id="section0">
</section>
<section id="home">
<ul>
<li class="left-menu">
<a class="active" href="#home">HOME</a>
HOW IT WORKS
WHY CHOOSE US
</li>
</li>
<li class="right-menu">
SERVICES
OUR GALLERY
CONTACT US
</li>
</section>
<section id="secondpage">
</section>
Note:
I have added position: relative to first section (.section0) for z-index to work.
I have remove margin and padding from <body> only to make this snippet clean.
Edit: As you said, the previous example makes the navigation bar slide out from under the first section, you can try this example using position: sticky.
I'll explain what I did here.
I took the navigation bar (<ul>) out of home section.
I have wrapped the element <ul>, home and secondpage in an element and gave it a class called wrapper.
The first section remains out of the wrapper.
I have applied position: sticky; to navigation (<ul>) and added a top value at which the navigation should stay fixed.
I have also added position: relative; to wrapper class for the sticky element to work.
This means the navigation bar (<ul>) stays fixed inside the wrapper class.
Working Example:
body {
margin: 0;
padding: 0;
}
#section0 {
width: 100%;
height: 100vh;
background-color: blue;
position: relative;
}
#home {
width: 100%;
height: 100vh;
background-color: white;
display: block;
margin: 0 auto;
}
ul {
background: #fff;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
z-index: 9999;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
position: -webkit-fixed;
/* Safari */
/*position: fixed;*/
position: sticky;
top: 0;
}
ul li.left-menu {
display: flex;
justify-content: flex-end;
}
ul li.right-menu {
display: flex;
justify-content: flex-start;
}
ul li a {
display: block;
color: white;
text-align: center;
padding: 13px 20px;
text-decoration: none;
font-family: Futura;
font-size: 8px;
}
li a:hover {
color: #00CFFF;
}
.active {
color: #00CFFF;
}
#secondpage {
height: 100vh;
width: 100%;
background-color: orange;
}
.wrapper {
position: relative;
}
<section id="section0">
</section>
<div class="wrapper">
<ul>
<li class="left-menu">
<a class="active" href="#home">HOME</a>
HOW IT WORKS
WHY CHOOSE US
</li>
<li class="right-menu">
SERVICES
OUR GALLERY
CONTACT US
</li>
</ul>
<section id="home">
</section>
<section id="secondpage">
</section>
</div>