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%
}
Related
my problem is that the heading "greeting" influences the position of my navigation bar.
I want it to stay at the top right corner of the screen but the heading moves it down a bit, which is inconvenient.
Could someone please give me some advice?
I thank you in advance
here the html code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<h1 id = "greeting"> Hello </h1>
<body>
<ul class="navBar">
<li><a class="navLinks" href="about.html"> About me </a></li>
</ul>
</body>
</html>
and the css code:
#font-face {
font-family: Terminal;
src: url(Fonts/Terminal.ttf);
}
body {
background-color: #333333;
}
#greeting {
text-align:center;
font-family:Terminal;
}
.navBar {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: black;
height: 5000px;
z-index: 0;
}
.navLinks {
display: block;
color: lime;
padding: 8px 16px;
text-decoration: none;
font-family: Terminal;
}
.navLinks:hover {
background-color: lime;
color: black;
}
* {
padding: 0px;
margin: 0px;
}
you can simply give your navigation bar an "absolute" position and set its top:0
#font-face {
font-family: Terminal;
src: url(Fonts/Terminal.ttf);
}
body {
background-color: #333333;
}
#greeting {
text-align:center;
font-family:Terminal;
}
.navBar {
list-style-type: none;
top: 0;
position: absolute;
margin: 0;
padding: 0;
width: 200px;
background-color: black;
height: 5000px;
z-index: 0;
}
.navLinks {
display: block;
color: lime;
padding: 8px 16px;
text-decoration: none;
font-family: Terminal;
}
.navLinks:hover {
background-color: lime;
color: black;
}
* {
padding: 0px;
margin: 0px;
}
You need to wrap the navbar and the content (contains H1) with a flex parent:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="flex-grid">
<ul class="navBar">
<li><a class="navLinks" href="about.html"> About me </a></li>
</ul>
<div class="main-content">
<h1 id="greeting">Hello</h1>
</div>
</div>
</body>
</html>
And then apply this CSS to them:
.flex-grid {
display: flex;
}
.main-content {
flex-grow: 1;
}
.main-content h1 {
text-align: center;
}
I just started taking an HTML/CSS class for beginners and we have a final project where we need to create a multi-page website so I am currently practicing by making a website of my own but I can't seem to figure out how to align the navbar list I have to right of the logo where the logo is on the left side of the navbar.
Here's my code:
HTML:
<!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>Final Project Practice</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="navbar">
<nav>
<a href="#">
<img class="logo" src="IMG/Phantom_Thieves_Logo.png" alt="site-logo">
</a>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</body>
</html>
CSS:
body {
background: black;
margin: 0;
color: white;
}
.navbar {
background-color: white;
display: block;
}
.navbar a {
display: inline-flex;
}
.logo {
width: 5em;
margin: 1em;
border-radius: 50%;
background-color: black;
float: left;
position: relative;
}
.navbar ul{
display: flex;
list-style: none;
margin: 0px 25px 0px 90px;
padding: 0;
}
.navbar ul li a {
list-style: none;
text-decoration: none;
color: var(--primary-color);
font-size: 1.5em;
font-weight: bold;
margin-right: 1em;
}
All help would be appreciated!
Set nav as flex container:
body {
background: black;
margin: 0;
color: white;
}
nav {
display: flex;
align-items: center;
background-color: white;
}
.logo {
width: 5em;
margin: 1em;
border-radius: 50%;
background-color: black;
}
.navbar ul{
display: flex;
list-style: none;
/*margin: 0px 25px 0px 90px;*/
padding: 0;
}
.navbar ul li a {
list-style: none;
text-decoration: none;
color: black;
font-size: 1.5em;
font-weight: bold;
margin-right: 1em;
}
<body>
<div class="navbar">
<nav>
<a href="#">
<img class="logo" src="IMG/Phantom_Thieves_Logo.png" alt="site-logo">
</a>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</body>
<!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>Final Project Practice</title>
<link rel="stylesheet" href="css/main.css">
<style>
body {
background: black;
margin: 0;
color: white;
}
.navbar {
background-color: rgb(255, 238, 0);
display: block;
display: flex;
align-items: center;
}
.navbar a {
display: inline-flex;
}
.logo {
width: 5em;
margin: 1em;
border-radius: 50%;
background-color: black;
float: left;
position: relative;
}
.navbar ul {
display: flex;
list-style: none;
margin: 0px 25px 0px 90px;
padding: 0;
}
.navbar ul li a {
list-style: none;
text-decoration: none;
color: rgb(0, 0, 0);
font-size: 1.5em;
font-weight: bold;
margin-right: 1em;
}
</style>
</head>
<body>
<nav class="navbar">
<div class="logo">
<a href="#">
<img class="logo" src="IMG/Phantom_Thieves_Logo.png" alt="site-logo">
</a>
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</nav>
</body>
</html>
Easiest way to create a navbar. Have a look
You need to adjust Width of the images and use this property to align image to left float:left
body,
div {
margin: 0;
border: 0 none;
padding: 0;
background-color: rgb(65, 63, 63);
}
.md {
background-color: black;
padding: 20px;
}
a {
color: white;
text-decoration: none;
padding: 15px;
}
a:hover {
background-color: rgb(224, 224, 224);
color: black;
}
img{
width: 40px;
height: 30px;
float: left;
margin-top: 15px;
}
<!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>
</head>
<body>
<img src="https://iconape.com/wp-content/files/zy/291859/png/291859.png">
<div class="md">
HOME
BAND
TOUR
</div>
</body>
</html>
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;
}