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%;
}
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>
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
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 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>
I am trying to vertically position the "Distance" and "Duration" text in the center of their respective divs using flexbox, I can't seem to get it to work. I will also apply this to the "Calories" and "Share" text aswell.
I am also want to use flexbox to evenly space my 4x links vertaically in the middle column.
Codepen demo
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Runna - Track your run!</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,900' rel='stylesheet' type='text/css'>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/js.js"></script>
</head>
<body>
<div id="main-wrapper">
<div id="head-bar">
<img class="logo" src="imgs/logo-blue.png">
</div>
<div id="map-container">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d11564.804405086046!2d172.59430635!3d-43.56069255!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2snz!4v1418977732755" width="100%" height="100%" frameborder="0" style="border:0"></iframe>
</div>
<div id="control-container">
<div class="left-col">
<div class="distance-wrapper">
<div class="distance-title bold-title">DISTANCE:</div>
<div class="distance-figure">1.7KM</div>
</div>
<div class="duration-wrapper">
<div class="duration-title bold-title">DURATION</div>
<div class="duration-figure">10.42MINS</div>
</div>
</div> <!-- End of left col -->
<div class="middle-col">
<ul>
<li class="arrow"><i class="fa fa-chevron-down"></i></li>
<li>START</li>
<li>STOP</li>
<li>PAUSE</li>
</ul>
</div>
<div class="right-col">
<div class="calorie-wrapper">
<div class="calories bold-title">CALORIES</div>
<div class="calories-result">100 cal's</div>
</div>
<div class="share-wrapper">
<div class="share bold-title">SHARE</div>
<div class="share-icons">FB or Twitter</div>
</div>
</div> <!-- End of right col -->
</div>
</div>
</body>
</html>
CSS:
html {
box-sizing: border-box;
height: 100%;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
height: 100%;
font-family: 'Lato', sans-serif;
}
#main-wrapper {
height: 100vh;
}
#media all and (max-width: 40em) {
#head-bar {
background: black;
width: 100%;
height: 5vh;
}
.logo {
display: block;
margin: 0 auto;
height: 85%;
}
#map-container {
background: yellow;
height: 65vh;
width: 100%;
}
}
/***Control columns***/
#control-container {
width: 100%;
height: 30vh;
color: white;
font-family: 'Lato', sans-serif;
text-align: center;
background: #1b1b1b;
position: relative;
}
.left-col {
display: flex;
flex-direction: column;
width: 33.3%;
height: 100%;
/*height: 60px;*/
float: left;
}
.middle-col {
background: #151515;
width: 33.3%;
height: 100%;
float: left;
/*box-shadow: 0 0 8px 2px #000;*/
}
.right-col {
width: 33.3%;
float: left;
}
.distance-wrapper, .duration-wrapper {
flex: 1;
/*background: #ddd;*/
border-bottom: 1px solid yellow;
justify-content: center;
}
.calorie-wrapper, .share-wrapper {
display: block;
width: 100%;
}
.bold-title {
font-weight: 900;
font-family: 'Lato', sans-serif;
}
/***Middle Navigation***/
.middle-col {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.middle-col ul {
margin: 0;
padding: 0;
display: table;
width: 100%;
}
.middle-col li {
list-style-type: none;
}
.middle-col a {
color: white;
text-decoration: none;
display: block;
padding: 20px;
}
.middle-col a:hover {
background: green;
display: block;
}
#control-container:after {
content: "";
display: block;
height: 0;
clear: both;
}
I created this example with a smaller amount of HTML and, hopefully, greater semantic meaning.
Let's make this:
The HTML
The <section> element for the flex container
The <nav> element is a good container for the actions.
The description list element — <dl> — is a good wrapper for the stats. They have two children:
The Description Term element — <dt> — is used for the stat headings
The Description element — <dd> — is used for the stat value
<section class="control-container">
<dl class="distance">
<dt>Distance</dt>
<dd>1.7KM</dd>
</dl>
<dl class="duration">
<dt>Duration</dt>
<dd>10.42 Mins</dd>
</dl>
<dl class="calories">
<dt>Calories</dt>
<dd>100</dd>
</dl>
<nav class="actions">
Down
Start
Stop
Pause
</nav>
<div class="share">
<h2>Share</h2>
Facebook
Twitter
</div>
</section>
The Flex
The flex <section> container has display: flex and flex-flow: column wrap so its children will layout in columns and wrap when pushed outside.
The flex items are also given display: flex, flex-flow: column wrap and justify-content: center; so that the text is vertically centered. The nav is given flex-direction: row so that its links can be evenly centered vertically with align-items: center
The 4 sections which take up half of the height are given flex: 1 1 50%; they will each get half of a column height
The navigation is given flex: 1 1 100% so it will take up an entire column on its own
.control-container {
display: flex;
flex-flow: column wrap;
}
.control-container > * {
display: flex;
flex-flow: column wrap;
justify-content: center;
flex: 1 1 50%;
width: 33.33%;
text-align: center;
}
.control-container > nav {
flex-direction: row;
align-items: center;
flex: 1 1 100%;
}
.control-container > nav a {
flex: 1 1 100%;
}
Complete Example
* {
margin: 0;
padding: 0;
font: 100% arial;
}
.control-container {
display: flex;
flex-flow: column wrap;
height: 40vh;
min-height: 250px;
min-width: 300px;
margin: 0 auto;
}
.control-container > * { /* target all direct children */
display: flex;
flex-flow: column wrap;
justify-content: center;
flex: 1 1 50%;
width: 33.33%;
text-align: center;
background: #333;
color: #FFF;
}
.control-container > nav {
flex-direction: row; /* allows vertical centering with align-items: center; */
align-items: center;
flex: 1 1 100%; /* take up entire column */
background: #000;
}
.control-container > nav a {
flex: 1 1 100%; /* 100% pushes each link so they wrap */
}
/*Change the order of the flex items so the stats can be kept together in the HTML*/
.distance,
.duration,
.actions {
order: 1;
}
.calories {
order: 3;
}
.share {
order: 4;
}
.wrapper {
max-width: 1200px;
margin: 0 auto;
}
.control-container dt,
.control-container h2 {
font-weight: bold;
}
.share h2 {
margin-top: calc(1em + 15px); /*push "share" down so it aligns with "duration" 1em accounts for the extra line of text */
}
.control-container a {
color: #FFF;
text-decoration: none;
}
dt,
dd,
.share * {
padding: 5px;
}
iframe {
width: 100%;
height: calc(60vh - 104px);
/* viewport height minus flex container height and header height ( + there is a stray 4px somewhere)*/
min-height: 300px;
}
header {
height: 100px;
text-align: center;
background: #000;
}
<div class="wrapper">
<header>
<img src="http://www.placehold.it/100" />
</header>
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d11564.804405086046!2d172.59430635!3d-43.56069255!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2snz!4v1418977732755" frameborder="0" style="border:0"></iframe>
<section class="control-container">
<dl class="distance">
<dt>Distance</dt>
<dd>1.7KM</dd>
</dl>
<dl class="duration">
<dt>Duration</dt>
<dd>10.42 Mins</dd>
</dl>
<dl class="calories">
<dt>Calories</dt>
<dd>100</dd>
</dl>
<nav class="actions">
Down
Start
Stop
Pause
</nav>
<div class="share">
<h2>Share</h2>
Facebook
Twitter
</div>
</section>
</div>
So i ended up working it out, I didnt realise you can add the display: flex and flex-direction: column; etc properties again if you have already added them to the main container. Anyway I added the following code to my wrappers and it works:
.distance-wrapper, .duration-wrapper {
flex: 1;
border-bottom: 1px solid yellow;
display: flex; // Important
flex-direction: column; // Important
align-items: center;// Important
justify-content: center; // Important
}