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>
Related
So, right now my header doesn´t look good on mobile. - The words overlap. They should remain in the same order... I tried to use line-height, which did not really change anything. Maybe you have some suggestions on how I can fix this problem. I am thankful for every suggestion!
[enter
.header {
width: 100%;
height: 7vh;
padding: 0 5%;
color: white;
font-size: larger;
background-color: black;
z-index:100;
position: sticky;
top: 0;
display: flex;
justify-content: space-between;
overflow: hidden;
line-height: 10px;
}
nav {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 0;
}
nav ul li {
display: inline-block;
list-style: none;
margin: 10px 30px;
}
nav ul li a {
text-decoration: none;
color: white;
}
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.Menü {
color: white;
text-decoration: none;
margin-left: 40px;
}
<div class="header" >
<nav>
<div>
<Button class="ImageButton"> <input class="ImageButton" type="image" src="/Images/Camellion Logo Website.png"></Button>
</div>
<ul>
<a class="Menü" href="/Galerie/Galerie.html">Galerie</a>
<a class="Menü" href="#Leistungen">Leistungen</a>
<a class="Menü" href="#Kontakt">Kontakt & Standort <i class="fa-solid fa-location-dot"></i></a>
</ul>
</nav>
</div>
There is a thing in CSS called media queries. With media queries you can write for example CSS that only takes effect if screen is certain size.
For example
#media only screen and (min-width: 360px) and (max-width: 800px) {
.header {
height: 60px;
}
}
Will set header height to 60px if the device that the page is opened on has screen width more then 360px and less then 800px.
Here is your code with couple adjustments
* { padding: 0; margin: 0; box-sizing: border-box; }
.header {
width: 100%;
padding: 0 20px;
color: white;
background-color: black;
position: sticky;
z-index:100;
top: 0;
}
.navigation {
margin: auto;
max-width: 1200px;
height: 80px;
display: flex;
align-items: center;
justify-content: space-between;
}
.menu-icon { /* CSS to just to simulate Icon */
height: 40px;
width: 40px;
background-color: white;
border-radius: 10px;
}
.menu {
display: flex;
align-items: center;
gap: 40px;
}
.menu-item {
color: white;
text-decoration: none;
white-space: nowrap; /* Will not let words to break to next line */
font-size: 20px;
font-weight: 700;
}
#media(max-width: 600px) {
.header { padding: 0 10px; }
.navigation { height: 60px; }
.menu { gap: 20px;}
.menu-item { font-size: 14px; }
}
#media(max-width: 400px) {
.menu { gap: 10px;}
.menu-item { font-size: 12px; }
}
<header class="header" >
<nav class="navigation">
<div class="menu-icon" title="Menu icon / hamburger icon"></div>
<div class="menu">
<a class="menu-item" href="/Galerie/Galerie.html">Galerie</a>
<a class="menu-item" href="#Leistungen">Leistungen</a>
<a class="menu-item" href="#Kontakt">Kontakt & Standort <i class="fa-solid fa-location-dot"></i></a>
</div>
</nav>
</header>
You can adjust your css even further. It's very popular to have icons with menu elements and on mobile view they become a bottom navigation bar with big icons and tiny text.
#media (max-width:767px) {
* {
box-sizing: border-box;
}
nav {
flex-direction: column;
}
nav .Menu {
margin-inline: 9px
}
}
good luck
I'm trying to create a flex header with nav. However, my image doesn't seem to be responsive. As I'm minimizing the width the menu seems to act responsive but my logo image doesn't.
The image is a dummy one, when i set an image with these certain width and height (without adding any dimensions in property i have the same issue)
How can i solve this?
body {
margin: 0;
margin: 0;
width: 100%;
display: flex;
}
header {
width: 100%;
height: 91px;
background-color: #222222;
position: relative;
}
a {
text-decoration: none;
color: #fff;
font-size: 15px;
line-height: 17.22px;
}
ul {
list-style: none;
}
nav {
display: flex;
justify-content: space-between;
}
nav ul {
display: flex;
justify-content: center;
align-items: center;
margin-right: 280px;
}
li {
margin-left: 35px;
}
nav img {
display: flex;
margin-left: 254px;
position: relative;
}
<body>
<header>
<nav>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ee/Logo_brand_Adidas.png/800px-Logo_brand_Adidas.png" alt="Digital Wise Logo" width="404" height="91">
<ul>
<li style="margin-left:0;">Hompage</li>
<li>About us</li>
<li>Our Services</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</nav>
</header>
</body>
Preserve aspect ratio:
img {
height: 91px;
width: auto;
}
please check the code you need to add height: 91px; object-fit: contain; in logo image and set max-width for responsive you need to add media query I have mention in code so you can check it.
body {
margin: 0;
margin: 0;
width: 100%;
display: flex;
flex-direction:column;
}
header {
width: 100%;
padding: 10px 0;
background-color: #d2d2d2;
position: relative;
}
a {
text-decoration: none;
color: #000;
font-size: 15px;
}
ul {
list-style: none;
padding:0;
margin:0;
}
nav {
display: flex;
justify-content: space-between;
padding:0 5%;
}
nav ul {
display: flex;
justify-content: center;
align-items: center;
}
li {
margin-right: 35px;
}
li:last-child {
margin-right:0px;
}
nav img {
display: flex;
position: relative;
height: 91px;
object-fit: contain;
width: 100%;
max-width: 100px;
}
#media screen and (max-width:575px){
nav{flex-direction:column;}
nav ul {
display: flex;
justify-content: left;
align-items: center;
margin-top: 20px;
flex-wrap: wrap;
}
}
<body>
<header>
<nav>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ee/Logo_brand_Adidas.png/800px-Logo_brand_Adidas.png" alt="Digital Wise Logo" width="404" height="91">
<ul>
<li style="margin-left:0;">Hompage</li>
<li>About us</li>
<li>Our Services</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</nav>
</header>
</body>
I'm creating navigation bars using flexbox and ran into this particular issue when trying to create buttons out of anchor tags (i.e. link in the centre of a box).
I have the li set to display flex so I can centre the a, but as soon as I give the a some height, the a aligns to the top-left. Is there any way of getting the a centred?
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
font: sans-serif;
}
#top-nav {
border-bottom: 4px solid blue;
}
#center-section {
display: flex;
width: 1000px;
margin: auto;
}
#center-section>* {
flex: 1 1 0;
}
header section {
background: blue;
height: 90px;
width: 500px;
}
.navbar {
display: flex;
}
.navbar ul {
list-style-type: none;
padding: 0;
display: flex;
flex-direction: row;
width: 100%;
height: 100%;
align-self: center;
border: 1px solid red;
}
.navbar ul li {
display: flex;
flex: 1 1 100%;
}
.navbar ul li a {
background-color: yellow;
align-self: center;
width: 100%;
height: 100%;
}
.navbar ul li a:hover {
background-color: green;
}
<header>
<div id="top-nav">
<div id="center-section">
<section id="logo">
Home
</section>
<div class="navbar">
<ul>
<li>About</li>
<li>Store</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</header>
When you set height:100% to a you make it stretch all the li and thus you can no more control it as all the alignment are equivalent in this case. What you need is to align the content inside the a. For this you can make it a flex container and use align-items and/or justify-content:
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
font: sans-serif;
}
#top-nav {
border-bottom: 4px solid blue;
}
#center-section {
display: flex;
width: 1000px;
margin: auto;
}
#center-section>* {
flex: 1 1 0;
}
header section {
background: blue;
height: 90px;
width: 500px;
}
.navbar {
display: flex;
}
.navbar ul {
list-style-type: none;
padding: 0;
display: flex;
flex-direction: row;
width: 100%;
height: 100%;
align-self: center;
border: 1px solid red;
}
.navbar ul li {
display: flex;
flex: 1 1 100%;
}
.navbar ul li a {
background-color: yellow;
display:inline-flex;
align-items: center;
justify-content:center;
width: 100%;
height: 100%;
}
.navbar ul li a:hover {
background-color: green;
}
<header>
<div id="top-nav">
<div id="center-section">
<section id="logo">
Home
</section>
<div class="navbar">
<ul>
<li>About</li>
<li>Store</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</header>
I am using an inline list as a nav menu, and I would like the hyperlink/list item to take up the full height of the container with the label vertically positioned in the center of the container. Here is what I have:
#top-nav-container {
font-size: 14px;
width: 100%;
height: 50px;
overflow: hidden;
top: 0;
left: 0;
position: fixed;
z-index: 500;
background: #3498db;
}
#top-nav-container .nav-contents {
height: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
}
#top-nav-container .nav-left {
width: 175px;
}
#top-nav-container .nav-mid {} #top-nav-container .nav-right {
margin-left: auto;
text-align: right;
width: 250px;
}
#top-nav-container .top-nav-logo {
max-height: 35px;
float: left;
}
#top-nav-container ul {
margin: 0 0 0 30px;
padding: 0;
float: left;
list-style: none;
display: flex;
/* Removes whitespace between li elements */
flex-direction: row;
align-items: center;
}
#top-nav-container ul li {} #top-nav-container li a {
text-decoration: none;
background: red;
border-right: 1px solid #fff;
color: #fff;
padding: 0 12px;
}
<header id="top-nav-container">
<div class="container nav-contents">
<div class="nav-left">
<a href="#" title="Home">
<img src="http://coneyislandpark.com/imgUploader/logos/Pepsi_logo_2008.png" alt="Home" class="top-nav-logo" />
</a>
</div>
<div class="nav-mid">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
<div class="nav-right">
Stuff here...
</div>
</div>
</header>
Any other suggestions you have with any of this is greatly appreciated.
You need to add both height and line-height to the links, and also make sure they are either display: block or display: inline-block. Note that inline-block would be preferred:
#top-nav-container li a {
height: 50px;
line-height: 50px;
display: inline-block;
}
Note that on small screens, the Stuff Here... div would get cut off due to having a current width of 250px. Simply turn this down to say 50px (or however wide your container would actually be):
#top-nav-container .nav-right {
width: 50px;
}
I've created a fiddle showing this here.
Hope this helps! :)
You need to modify your CSS a little, see the following snippet:
#top-nav-container {
font-size: 14px;
width: 100%;
height: 50px;
overflow: hidden;
top: 0;
left: 0;
position: fixed;
z-index: 500;
background: #3498db;
}
#top-nav-container .nav-contents {
height: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
}
#top-nav-container .nav-left {
width: 175px;
}
#top-nav-container .nav-mid {
/* all below rules were added*/
position: absolute;
line-height: 50px;
height: 100%;
left: 50%;
transform: translateX(-50%);
}
#top-nav-container .nav-right {
margin-left: auto;
text-align: right;
width: 250px;
}
#top-nav-container .top-nav-logo {
max-height: 35px;
float: left;
}
#top-nav-container ul {
margin: 0 0 0 30px;
padding: 0;
float: left;
list-style: none;
display: flex;
/* Removes whitespace between li elements */
flex-direction: row;
align-items: center;
}
#top-nav-container ul li {} #top-nav-container li a {
text-decoration: none;
background: red;
border-right: 1px solid #fff;
color: #fff;
padding: 0 12px;
/* all below rules were added*/
height: 50px;
line-height: 50px;
display: inline-block;
}
<header id="top-nav-container">
<div class="container nav-contents">
<div class="nav-left">
<a href="#" title="Home">
<img src="http://coneyislandpark.com/imgUploader/logos/Pepsi_logo_2008.png" alt="Home" class="top-nav-logo" />
</a>
</div>
<div class="nav-mid">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
<div class="nav-right">
Stuff here...
</div>
</div>
</header>
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/