I have currently added a navigation bar to a webpage I'm coding. The problem is, the links within the bar are unresponsive. I'm pretty sure it has to do with the display: flex;
in the CSS for the nav links; however, I can't get rid of it as I need the nav links to be in a straight line. This is what it currently looks like (image) . I have a navigation bar with a link in the home button but the link isn't responsive. When I take out the display: flex;, the link becomes responsive however the list ends up looking like this (image). They become stacked one atop the other. I would really appreciate it if someone could take a look at my code and point me in the right direction
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.title {
height: 20vh;
display: flex;
justify-content: center;
align-items: center;
position: relative;
top: -60px;
left: 400px;
}
.image-container {
height: 768px;
width: 768px;
border: 10px solid black;
position: relative;
top: -165px;
}
.image-container img {
width: 100%;
height: 100%;
}
.transition-image {
position: absolute;
top: 0px;
left: 0px;
opacity: 0;
transition: opacity 0.5s ease;
}
.transition-image:hover {
opacity: 1;
}
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #5d4954;
font-family: 'Poppins', sans-serif;
}
.logo {
color: rgb(226, 226, 226);
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 30%;
}
.nav-links li {
list-style: none;
}
.nav-links a {
color: rgb(226, 226, 226);
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="./styles.css">
<title>Document</title>
</head>
<body>
<nav>
<div class="logo">
<h4>[Ayanfe]:)</h4>
</div>
<ul class="nav-links">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Next</li>
</ul>
</nav>
<h1 class="title">Example Text</h1>
<div class="image-container">
<img src="./Images/Image.jpg" alt="">
<img class="transition-image" src="./Images/Gif.gif" alt="">
</div>
</body>
</html>
Related
I'm a beginner Web Developer who is currently working on my first responsive website. I’ve run into an issue with my dropdown menu where the width (which I want to cover the whole screen) begins to reduce when the screen size passes a certain threshold (484 pixels or less). I had a similar issue in other areas of my site that after some research I was able to fix by adding “mid-width: fit-content;” to my HTML ruleset, but it doesn’t seem to be helping the dropdown. Any idea what could be causing this? I’ve been unable to find a cause or solution so any advice would be greatly appreciated.
Below is a simplified version of my code:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="UTF-8">
<title>A Website</title>
<link rel="stylesheet" href="./styles/MenuTestCSS.css">
<meta name="viewport" content="width=device-width">
</head>
<body>
<header>
<div class="flexContainer">
<div id="logoBox">
<h2 id="logo">Website</h2>
</div>
<nav>
<ul id="menu" class="flexContainer">
<li class = "navLink"><a href="" >Link</a></li>
<li class = "navLink">Link</li>
<li class = "navLink">Link</li>
<li class = "navLink">Link</li>
</ul>
<div class="flexContainer">
<div id="menuToggle">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
</div>
</nav>
</div>
</header>
</body>
</html>
/* GENERAL STYLES */
html {
box-sizing: border-box;
min-width: fit-content;
}
body {
width: 100%;
}
*, *::before, *::after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
.flexContainer{
display: flex;
flex-flow: row wrap;
}
/* HEADER STYLES */
header {
color: white;
background-color: #485696;
height: auto;
}
header .flexContainer {
align-items: center;
height: 100%;
width: 100%;
}
header h2 {
font-size: 48px;
margin: 20px 0;
padding-left: 25px;
}
nav {
align-self: stretch;
width: 485px;
}
nav .flexContainer {
justify-content: space-around;
}
header a, header a:visited {
color: white;
text-decoration: none;
font-size: 26px;
}
header li {
display: inline-block;
}
#menuToggle {
width: 45px;
height: 50px;
display: none;
}
.square{
width: 45px;
background-color: white;
height: 5px;
}
.square + .square {
margin-top: 10px;
}
nav {
flex: 1 0 0;
}
nav .flexContainer {
justify-content: flex-end;
}
#menuToggle {
margin-right: 3em;
width: 30px;
height: 30px;
display: block;
}
#menu {
background-color:#485696;
position: absolute;
top: 92px;
left: 0%;
height: auto;
padding: 10px 25px;
display: block;
border-top: 4px solid white;
}
.navLink + .navLink {
margin-top: 1em;
}
#menu li {
display: block;
}
.navLink + .navLink {
margin-left: 0px;
}
You've got this issue because you set nav{ width: 485px }
so it's logically will be shrinked when the with is lower than 485px, I notice you to learn about relative lengths such as "%", "rem", "em", "vh"...
so in your case you'll just change the nav { width: 485px } by width: 100%
I can't seem to find a way to center the images inside the div.. any tips ? Pretty basic stuff I know, just recently got into it again. I hope anybody gets what I'm trying to do here ?
I can't seem to find a way to center the images inside the div.. any tips ? Pretty basic stuff I know, just recently got into it again. I hope anybody gets what I'm trying to do here ?
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
width: 100%;
}
body {
padding: 0;
margin: 0;
border: 0;
background-color: grey;
background-attachment: fixed;
background-size: 100% auto;
}
ul#horizontal-list {
list-style: none;
}
ul#horizontal-list li {
display: inline;
}
ul {
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: center;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: red;
}
.navbar {
position: fixed;
top: 0;
height: 50px;
width: 100%;
background-color: black;
color: white;
text-align: center;
left: 0;
right: 0;
z-index: 1;
}
.navbar ul {
display: flex;
align-items: center;
justify-content: center;
list-style-type: none;
margin-top: 0px;
}
.header {
width: 100%;
height: 100%;
background-image: url("img/bg/background1.png");
background-color: grey;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.body {
/*height: 100%;*/
width: 100%;
background-color: white;
color: black;
padding-left: 5%;
padding-right: 5%;
overflow: hidden;
}
.content {
margin: auto;
width: 100%;
background-color: white;
color: black;
border-right: double;
border-left: double;
text-align: justify;
font-size: 20px;
font-family: arial;
padding-top: 10%;
padding-bottom: 10%;
padding-left: 5%;
padding-right: 5%;
}
.social {
margin: auto;
position: absolute;
}
.social a {
}
.footer {
height: 50px;
width: 100%;
background-color: black;
color: white;
margin: auto;
vertical-align: middle;
}
#copyright {
display: table;
}
#cpy{
display: table-cell;
vertical-align: middle;
}
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link rel="icon" type="image/x-icon" href="img/favicon.ico"/>
<meta name="description" content="My Personal Portfolio">
<title>John's Work</title>
</head>
<body>
<div class="navbar">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</div>
<div class="header">
</div>
<div class="body">
<div class="content">
<div class="social">
<a href="https://www.facebook.com/" style="color:black; text-decoration:none">
<img src="img/fb.png" alt="Facebook">
</a>
<a href="http://www.instagram.com/" style="color:black; text-decoration:none" >
<img src="img/ig.png" alt="Instagram">
</a>
<a href="http://www.snapchat.com/" style="color:black; text-decoration:none" >
<img src="img/snapchat.png" alt="Snapchat">
</a>
</div>
</div>
</div>
<div class="footer" id="copyright" style="text-align:center">
<div id="cpy">©)</div>
</div>
</body>
</html>
As I understand the main trouble is an absolute position of .social block. If this position is really necessary use:
left: 50%;
transform: translateX(-50%);
In other case you can remove position: absolute; and add
display: flex;
justify-content: center;
hey guys i want to move the .mission-banner to the vertical centre of the .mission div. but margin: auto 0; wont work and also flex-box isnt. so what am i not seeing here ?
html {
font-family: Helvetica;
font-size: 22px;
color: seashell;
background-color: black;
opacity: 0.9;
text-align: center;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
height: 69px;
border-bottom: 1px solid seashell;
position: fixed;
width: 100%;
}
img {
height: 50px;
padding-left: 10px;
}
nav span {
color: seashell;
padding-right: 30px;
}
.mission-banner {
background-color: black;
}
.mission-banner h4 {
padding-bottom: 10px;
}
a {
cursor: pointer;
text-decoration-color: seashell;
}
.mission {
background-image: url(../images/img-mission-background.jpg);
position: relative;
margin: 0 auto;
top: 70px;
width: 1200px;
height: 700px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Tea Cozy | Home</title>
<link rel="stylesheet" href="./resources/css/style.css">
</head>
<body>
<header>
<img src="./resources/images/img-tea-cozy-logo.png" alt="our logo">
<nav>
<span>Mission</span>
<span>Featured Tea</span>
<span>Locations</span>
</nav>
</header>
<!-- main-content -->
<div class="mission">
<div class="mission-banner">
<h2>Our Mission</h2>
<h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
</div>
</div>
</body>
</html>
this is what it looks like rn:
The issue is you have fixed height/width for the mission and relative positioning. You'll also need a fixed height set for the mission-banner to position it in the center of the page.
There is probably a more technical explanation for all this but playing around with quickly I was able to achieve what I believe you're looking for with the following css. You might need to fiddle a bit to get it exactly how you need, particularly the height of the mission banner when you add more content:
.mission {
background-image: url(../images/img-mission-background.jpg);
position: absolute;
top: 70px;
width: 100%;
height: 100%;
}
.mission-banner {
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
height: 200px;
background-color: black;
}
margin:auto will center the div horizontally, use flex box
.mission{
display: flex;
justify-content: center;
flex-direction: column;
}
flex-direction lets you decide whether to align your content vertically with column or horizontally with row
https://www.w3schools.com/css/css3_flexbox.asp
i added background:red so it will be more clear that the div ( mission-banner ) is in the center vertically
html {
font-family: Helvetica;
font-size: 22px;
color: seashell;
background-color: black;
opacity: 0.9;
text-align: center;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
height: 69px;
border-bottom: 1px solid seashell;
position: fixed;
width: 100%;
}
img {
height: 50px;
padding-left: 10px;
}
nav span {
color: seashell;
padding-right: 30px;
}
.mission-banner {
background-color: black;
height: 180px;
}
.mission-banner h4 {
padding-bottom: 10px;
}
a {
cursor: pointer;
text-decoration-color: seashell;
}
.mission {
background-image: url(../images/img-mission-background.jpg);
position: relative;
margin: 0 auto;
top: 70px;
width: 100%;
height: 400px;
display: flex;
background: red;
display: flex;
justify-content: center;
flex-direction: column;
}
<header>
<img src="./resources/images/img-tea-cozy-logo.png" alt="our logo">
<nav>
<span>Mission</span>
<span>Featured Tea</span>
<span>Locations</span>
</nav>
</header>
<!-- main-content -->
<div class="mission">
<div class="mission-banner">
<h2>Our Mission</h2>
<h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
</div>
</div>
Could not yet find this exact issue that I am having addressed, so it here goes:
I am trying to create a nav bar with a heading on the left-hand side, and some nav items on the right. I also want the nav to be centered on the page, with a width of 960px. I am trying to accomplish 2 additional things:
1.) The nav bar should be fixed to the top so that it does not disappear when you scroll.
2.) The spacing between the heading and the nav items should be the first to disappear when you minimize the screen. Currently, the items do not flex at all.
I am able to get one of these two things accomplished at a time, but not both at the same time. Any help would be most welcome, thank you.
html {
font-family: helvetica;
font-size: 18px;
}
.container {
max-width: 960px;
margin: 0 auto;
}
.banner {
background-color: aqua;
opacity: .5;
border-radius: 10px;
position: fixed;
}
.header {
display: flex;
justify-content: space-between;
height: 4rem;
align-items: center;
width: 960px;
}
.container .banner .header h1 {
margin-left: 2.5rem;
}
.container .banner .header .nav ul {
display: flex;
width: 200px;
justify-content: space-between;
text-decoration: none;
margin-right: 2.5rem;
}
.container .banner .header .nav ul a {
color: black;
list-style-type: none;
text-decoration: none;
}
<div class="container">
<div class="banner">
<div class="header">
<h1>My Sweet Sweet Georgia</h1>
<div class="nav">
<ul>
<li>doggy</li>
<li>puppy</li>
<li>toys</li>
</ul>
</div>
</div>
</div>
</div>
You can use align-items: left for your heading and align-items: right instead of using margin
* {
padding: 0;
margin: 0;
}
html {
font-family: helvetica;
font-size: 18px;
}
.container .header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex-direction: row;
height: 4rem;
align-items: center;
width: 100%;
position: fixed;
background: aqua;
opacity: .7;
border-radius: 10px;
}
.container .header .nav ul li {
display: inline-flex;
}
<!DOCTYPE html>
<html>
<head>
<title>My Puppy</title>
<link href="./resources/reset.css" type="text/css" rel="stylesheet">
<link href="./resources/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="header">
<h1>My Sweet Sweet Georgia</h1>
<div class="nav">
<ul>
<li>doggy</li>
<li>puppy</li>
<li>toys</li>
</ul>
</div>
</div>
</div>
</body>
In your css file:
remove in .header
.header {
width: 960px;
}
add in .banner
.banner {
max-width: 960px;
width: 100%;
}
I built this site and I can't get the navbar or my image in the middle. I tried a lot like making flex boxes, setting margins, ... .I just can't find the problem. I hope it isn't a problem that you can't see the pictures etc. because it looks messy.
Here is a part of my code:
body {
background-color: #333333;
}
.navBar {
display: flex;
justify-content: space-between;
padding: 10px;
background-color: #9D9C9C;
opacity: 0.8;
width: 95%;
position: fixed;
align-items: center;
}
.logo {
width: 200px;
}
ul {
list-style-type: none;
width: 40%;
white-space: nowrap;
}
a {
padding-left: 30px;
padding-right: 30px;
padding-bottom: 10px;
}
.voorPagina {
width: 95%;
}
<!DOCTYPE html>
<html>
<head>
<title>Dia architecten</title>
</head>
<body>
<div class="navBar">
<img class="logo" src="/Images/LogoDIA.png" />
<ul>
Projecten
Over
Contact
</ul>
</div>
<img class="voorPagina" src="Images/VPDia.png" />
</body>
</html>
Thank you!
Something like this?
You were using justify-content: space-between; for the div with .navBar class, instead if you go for justify-content: center;, it will center all the child elements of the div! Also I added a placeholder image for checking purposes!
Note: Please click on the link full page to view the proper centered navbar!
body {
background-color: #333333;
}
.navBar {
display: flex;
justify-content: center;
padding: 10px;
background-color: #9D9C9C;
opacity: 0.8;
width: 95%;
position: fixed;
align-items: center;
}
.logo {
width: 200px;
}
ul {
list-style-type: none;
width: 40%;
white-space: nowrap;
}
a {
padding-left: 30px;
padding-right: 30px;
padding-bottom: 10px;
}
.voorPagina {
width: 95%;
}
<!DOCTYPE html>
<html>
<head>
<title>Dia architecten</title>
</head>
<body>
<div class="navBar">
<img class="logo" src="http://lorempixel.com/100/25/" />
<ul>
Projecten
Over
Contact
</ul>
</div>
<img class="voorPagina" src="Images/VPDia.png" />
</body>
</html>