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>
Related
When I hover a menu item it affect other items. All other elements are moving. How to stop other elements to move from its position. Someone please review my code. I want the menu item to be bold when I hover and all the menu item does not move to its position. I tried many different ways to but it always moves and changing other elements positions
Here is the code:
<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>Portfolio</title>
</head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
font-family: "Poppins", sans-serif;
}
.container {
background-color: #242633;
width: 100%;
height: 100vh;
}
.row {
display: flex;
align-items: center;
justify-content: flex-start;
}
.logo img {
margin-left: 50px;
margin-top: 10px;
margin-right: 150px;
height: auto;
width: 120px;
}
.menu {
position: relative;
}
.menu ul li {
display: inline-block;
color: #fff;
margin-inline: 50px;
font-weight: 400;
font-size: 25px;
transition: all 0.5s;
}
.list {
position: relative;
border: 1px solid red;
padding: 0;
margin: 0;
z-index: 10;
}
.menu ul li:hover {
color: #c5c5c5;
cursor: pointer;
background-color: transparent;
font-weight: 900;
z-index: 50;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="logo">
<img src="./Images/logo.png" alt="">
</div>
<div class="menu">
<ul>
<li class="list active">Home</li>
<li>Streets</li>
<li>Merchandise</li>
</ul>
</div>
</div>
</div>
</body>
</html>```
When you increase the font-weight on hover, you are in turn increasing the size of the text in the <li> and if the <li> doesn't already have enough space to contain the text, it needs to adapt its width and this ends up pushing the other elements.
You can simply increase the width of <li> so that the contained text can safely scale within the increased container without altering any of the surrounding elements, like so:
<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>Portfolio</title>
</head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
font-family: "Poppins", sans-serif;
}
.container {
background-color: #242633;
width: 100%;
height: 100vh;
}
.row {
display: flex;
align-items: center;
justify-content: flex-start;
}
.logo img {
margin-left: 50px;
margin-top: 10px;
margin-right: 150px;
height: auto;
width: 120px;
}
.menu {
position: relative;
}
.menu ul {
display: flex;
gap: 50px;
}
.menu ul li {
display: inline-block;
color: #fff;
width: 150px;
font-weight: 400;
font-size: 25px;
transition: all 0.3s ease;
}
.list {
position: relative;
border: 1px solid red;
padding: 0;
margin: 0;
z-index: 10;
}
.menu ul li:hover {
color: #c5c5c5;
cursor: pointer;
background-color: transparent;
font-weight: 900;
z-index: 50;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="logo">
<img src="./Images/logo.png" alt="" />
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Streets</li>
<li>Merchandise</li>
</ul>
</div>
</div>
</div>
</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
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;
}