i'm learning to build from scratch a website so i can learn properly how to build a nice website however i start with the navbar but its not responsive even using flexbox , would you like to appoint me to the right direction , i'm using media query however i didnt get it right
* {
margin: 0;
padding: 0;
}
nav {
display: flex;
align-items: center;
justify-content: space-around;
width: 100%;
height: 10vh;
background-color: aqua;
margin: 0;
padding: 0;
}
.logo {
list-style-type: none;
display: flex;
flex-wrap: wrap
}
.first {
list-style-type: none;
margin-right: 30rem;
padding: 0;
display: flex;
flex-wrap: wrap;
}
.second {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
}
.first li {
padding-left: 2rem;
}
.first li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
.first li:hover {}
.second li {
padding-left: 2rem;
}
nav ul li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
text-transform: uppercase;
}
#media all and (max-width: 500px) {
nav {
flex-direction: column;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="/css/style.css">
<title>Document</title>
</head>
<body>
<nav>
<ul class="logo">
<li> brand</li>
</ul>
<ul class="first">
<li> our products</li>
<li> Title2</li>
<li> Title3</li>
</ul>
<ul class="second">
<li> En</li>
<li> Login in</li>
</ul>
</nav>
</body>
</html>
The main thing here - you want to make sure and set flex-direction: row for desktop. I also set the height of nav to auto and the width to 100vw, mostly for the purposes of the code demo. For some reason the code demo doesn't look correct in the preview window, but appears correctly in full screen.
* {
margin: 0;
padding: 0;
}
nav {
display: flex;
align-items: center;
flex-direction: row;
justify-content: space-around;
width: 100vw;
height: auto;
background-color: aqua;
margin: 0;
padding: 0;
}
.logo {
list-style-type: none;
display: flex;
}
.first {
list-style-type: none;
margin-right: 30rem;
padding: 0;
display: flex;
}
.second {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
}
.first li {
padding-left: 2rem;
}
.first li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
.first li:hover {}
.second li {
padding-left: 2rem;
}
nav ul li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
text-transform: uppercase;
}
#media all and (max-width: 500px) {
nav {
flex-direction: column;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="/css/style.css">
<title>Document</title>
</head>
<body>
<nav>
<ul class="logo">
<li> brand</li>
</ul>
<ul class="first">
<li> our products</li>
<li> Title2</li>
<li> Title3</li>
</ul>
<ul class="second">
<li> En</li>
<li> Login in</li>
</ul>
</nav>
</body>
</html>
Make you styles 'mobile first'
html, body, nav {
margin: 0;
padding: 0;
}
nav {
position: fixed;
top: 0;
width: 100%;
background-color: aqua;
}
ul, li, a{
color: #000;
list-style-type: none;
text-decoration: none;
text-transform: uppercase;
}
a:hover {
color: white;
}
.row {
display: block;
}
#media all and (min-width: 500px) {
.row {
display: flex;
}
.col {
flex: 1;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="/css/style.css">
<title>Document</title>
</head>
<body>
<nav class="row">
<ul class="col logo">
<li> brand</li>
</ul>
<ul class="col first">
<li> our products</li>
<li> Title2</li>
<li> Title3</li>
</ul>
<ul class="col second">
<li> En</li>
<li> Login in</li>
</ul>
</nav>
</body>
</html>
for the style you don't need to use a media query you can build all your menu using flexbox,i can propose this code for CSS and use your same HTML file
* {
margin: 0;
padding: 0;
}
nav {
display: flex;
width: 100%;
background-color: aqua;
flex-wrap: wrap;
justify-content: space-between;
}
li {
list-style-type: none;
padding: 20px 25px
}
ul {
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
margin: auto
}
.first li a {
display: block;
color: #000;
text-decoration: none;
}
nav ul li a {
color: #000;
padding: 8px 16px;
text-decoration: none;
text-transform: uppercase;
}
Related
I am new to HTM/CSS and was trying to create a navigation bar on in header, using flex and when hover it should animate underline from bottom left to right.
But I am not able to get it to be placed in center and having spaces around each item.
HTML Code:
<!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="style.css" />
<title>XXXXX</title>
</head>
<body>
<header>
<div class="nav">
<ul>
<li>About</li>
<li>Experience</li>
<li>Works</li>
<li>Hobbies</li>
</ul>
</div>
</header>
</body>
</html>
CSS code:
*{
ox-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #333;
color: #fff;
font-family: 'Kalam', cursive;
}
header {
text-align: center;
align-items: center;
}
.nav a {
text-decoration: none;
color: #fff;
position: relative;
}
.nav a::after {
content: "";
display: block;
height: 3px;
width: 0;
background-color: #fff;
transition: width 0.3s ease-in-out;
position: absolute;
bottom: 0;
left: 0;
}
.nav a:hover::after {
width: 100%;
}
.nav li {
display: inline-flex;
justify-content: space-between;
list-style-type: none;
}
currently I am getting something like this:
| About Experience Works Hobbies |
enter image description here
I want output to be like: (having space around)
About Experience Works Hobbies
Thank you in advance!
To apply space-around you need to set display: flex; As you can see your a elements that make up the navbar are inside the ul, which in turn is inside the nav class. So what you have to do is set display: flex; to the direct relative of the elements you want to apply it to, in this case ul.
*{
ox-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #333;
color: #fff;
font-family: 'Kalam', cursive;
}
header {
text-align: center;
align-items: center;
}
.nav ul {
display: flex;
justify-content: space-around;
align-items:center;
}
.nav a {
text-decoration: none;
color: #fff;
position: relative;
}
.nav a::after {
content: "";
display: block;
height: 3px;
width: 0;
background-color: #fff;
transition: width 0.3s ease-in-out;
position: absolute;
bottom: 0;
left: 0;
}
.nav a:hover::after {
width: 100%;
}
.nav li {
display: inline-flex;
justify-content: space-between;
list-style-type: none;
}
<!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="style.css" />
<title>XXXXX</title>
</head>
<body>
<header>
<div class="nav">
<ul>
<li>About</li>
<li>Experience</li>
<li>Works</li>
<li>Hobbies</li>
</ul>
</div>
</header>
</body>
</html>
I am trying to create social media links and have them start out aligned. When they start wrapping, I want it to line up the links in a zig zag pattern. For example, if there are 5 links and the window is small where they have to wrap, the position of the links will go from a line to a "W" shape.
.container {
max-width: 400px;
padding: 4em;
margin: 0 auto;
}
.c-socials__list {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding-left: 0;
margin: 0;
}
.c-socials__list__item {
padding: 0 0.5em;
}
.c-socials__list__item a {
display: block;
color: white;
background-color: #353535;
padding: 1.25em;
border-radius: 50%;
transition: background-color 300ms ease-out;
}
.c-socials__list__item a:hover, .c-socials__list__item a:focus {
background-color: red;
}
.u-list-unstyled {
list-style: none !important;
}
.u-list-horizontal > * {
display: inline-block !important;
}
<div class="container">
<div class="c-socials">
<ul class="u-list-unstyled u-list-horizontal c-socials__list">
<li class="c-socials__list__item">hi</li>
<li class="c-socials__list__item">hi</li>
<li class="c-socials__list__item">hi</li>
<li class="c-socials__list__item">hi</li>
<li class="c-socials__list__item">hi</li>
</ul>
</div>
</div>
Note: I am ok with moving to a different direction or using javascript to adjust the layout if it needs to.
i think add class name, and adding position there, but you have to set it up well to be responsive, i hope this is help you my friend
.container {
max-width: 400px;
min-height: 100vh;
padding: 4em;
margin: 0 auto;
}
.c-socials__list {
flex-wrap: wrap;
justify-content: space-around;
padding-left: 20;
margin: 0;
position: relative;
}
.c-socials__list__item {
padding: 0 0.5em;
}
.c-socials__list__item a {
color: white;
background-color: #353535;
padding: 1.25em;
border-radius: 50%;
transition: background-color 300ms ease-out;
}
.c-socials__list__item a:hover, .c-socials__list__item a:focus {
background-color: red;
}
.u-list-unstyled {
list-style: none !important;
}
.u-list-horizontal > * {
display: inline-block !important;
}
.zig-zag {
margin-right: 40px;
}
.zig-zag a{
position: absolute;
top: 60px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="c-socials">
<ul class="u-list-unstyled u-list-horizontal c-socials__list">
<li class="c-socials__list__item">hi</li>
<li class="c-socials__list__item zig-zag">hi</li>
<li class="c-socials__list__item">hi</li>
<li class="c-socials__list__item zig-zag">hi</li>
<li class="c-socials__list__item">hi</li>
</ul>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Whenever I am testing with google chrome's dev tools for responsiveness, and when I am selecting Galaxy fold device or when I am shrinking the screen width via chrome dev tools , when the size goes below 300 x 655, the background of the header collapses. How to make it 100% width in all screen size?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #202063;
color: gainsboro;
ul {
li {
list-style-type: none;
cursor: pointer;
}
}
a {
text-decoration: none;
color: inherit;
}
main,
header {
padding: 20px;
}
}
header {
display: flex;
background-color: #fff;
color: #202063;
font-weight: bold;
justify-content: space-between;
nav {
ul {
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
li {
margin: 0 10px;
}
li:hover {
border-bottom: 2px solid rgb(255, 255, 255);
padding-bottom: 4px;
}
}
}
}
.text_center {
text-align: center !important;
}
<!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="./style.css" />
<title>MrSrv7</title>
</head>
<body>
<header>
<h4 id="brand_text" class="text_center">MrSrv7</h4>
<nav>
<ul id="navlinks">
<li>
<a href="#about">
About
</a>
</li>
<li>
Contact
</li>
<li>
Testimonials
</li>
</ul>
</nav>
</header>
</body>
</html>
You need add: width=device-width in tag
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #202063;
color: gainsboro;
ul {
li {
list-style-type: none;
cursor: pointer;
}
}
a {
text-decoration: none;
color: inherit;
}
main,
header {
padding: 20px;
}
}
header {
display: flex;
background-color: #fff;
color: #202063;
font-weight: bold;
justify-content: space-between;
nav {
ul {
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
li {
margin: 0 10px;
}
li:hover {
border-bottom: 2px solid rgb(255, 255, 255);
padding-bottom: 4px;
}
}
}
}
.text_center {
text-align: center !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header>
<h4 id="brand_text" class="text_center">MrSrv7</h4>
<nav>
<ul id="navlinks">
<li>
<a href="#about">
About
</a>
</li>
<li>
Contact
</li>
<li>
Testimonials
</li>
</ul>
</nav>
</header>
</body>
</html>
Have you tried setting the min-width to 100%? I'm not sure what your nav bar looks like currently.
header{
min-width:100%
}
This question already has an answer here:
Why does percentage padding break my flex item?
(1 answer)
Closed 2 years ago.
I am developing a website and in the heading, there are quite a few list items. The problem is that I want the last list item to end where the parent div ends.
I want my the last item of this ul list "Emergency" to end with the end of the nav width. It is always overflowing.
Here is my code:
header {
width: 100%;
height: 15%;
background-color: #ab9a31;
}
div.container {
width: 75%;
height: 100%;
margin: 0 auto;
display: flex;
justify-content: space-between;
position: relative;
top: -8px;
}
p {
white-space: nowrap;
width: 100%;
}
nav {
width: 100%;
}
nav ul {
list-style-type: none;
display: flex;
border: rgba(255, 255, 255, 0.5) solid 2px;
}
nav ul li {
white-space: nowrap;
padding: 0 2%;
}
nav ul li a {
font-size: 0.9em;
color: black;
text-decoration: none;
}
nav ul li a:hover {
text-decoration: underline;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Title</title>
<meta name="viewport" content="width=device-width initial-width=1.0">
<link src="css/main.css" rel="stylesheet">
</head>
<body>
<header>
<div class="container">
<p>Find info for?</p>
<nav>
<ul>
<li>Apply</li>
<li>News</li>
<li>President</li>
<li>Shop</li>
<li>Visit</li>
<li>Give</li>
<li>Emergency</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
How do I fit the entire list within the nav width?
Just use this code.
body {
box-sizing: border-box;
margin: 0;
padding: 0;
}
header {
display: flex;
width: 100%;
height: 15%;
background-color: #ab9a31;
}
div.container {
width: 75%;
height: 100%;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
p {
white-space: nowrap;
width: auto;
}
nav {
display: flex;
width: auto;
}
nav ul {
list-style-type: none;
display: flex;
border: rgba(255, 255, 255, 0.5) solid 2px;
padding: 0;
box-sizing: border-box;
}
nav ul li {
display: table;
white-space: nowrap;
padding: 0 2%;
}
nav ul li a {
font-size: 0.9em;
color: black;
text-decoration: none;
}
nav ul li a:hover {
text-decoration: underline;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Title</title>
<meta name="viewport" content="width=device-width initial-width=1.0">
<link src="css/main.css" rel="stylesheet">
</head>
<body>
<header>
<div class="container">
<p>Find info for?</p>
<nav>
<ul>
<li>Apply</li>
<li>News</li>
<li>President</li>
<li>Shop</li>
<li>Visit</li>
<li>Give</li>
<li>Emergency</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
I am trying to push my navbar up and align my navbar up to the label which is supposed to be the logo but I don't know how I can do that ...any help would be appreciated...here is the code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Verdana;
}
html, body {
height: 100%;
}
.container1 {
min-height: 100%;
}
.main {
overflow: auto;
padding-bottom: 50px;
}
div.footer>a {
text-decoration: none;
color: red;
}
div.footer {
background-color: black;
color: white;
position: relative;
height: 50px;
margin-top: -50px;
clear: both;
display: flex;
justify-content: center;
align-items: center;
}
nav ul li a {
text-decoration: none;
background-color: black;
color: white;
font-size: 17px;
margin: 20px;
}
nav ul li {
list-style: none;
}
nav ul.navbar {
display: flex;
justify-content: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Home</title>
<link rel='stylesheet' href='../Css/styles.css' </head>
<body>
<nav>
<span><label id='logo'>Logo</label></span>
<ul class='navbar'>
<li><a href='#' class='active'>Home</a></li>
<li><a href='#'>Services</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</nav>
<div class='container1'>
<div class='main'>
</div>
</div>
<div class='footer'>
Created by <a href='https://www.youtube.com/channel/UCLJQcARXQmADJADQO3ZZqfQ?
view_as=subscriber' target='_blank'>Precious Nyaupane</a>|© 2020 All rights reserved
</div>
</body>
</html>
Displaying nav as flex should do the trick
nav {
display: flex;
}
Demo