navbar is not full width - html

I am building my own portfolio/company site and my code is below I try to make it full width but it does not go full width. I am writing the code in html5 and css3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TECH-EXPERTS</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Our Work</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
</header>
</body>
</html>
nav{
background-color: black;
border-radius: 5px;
display: block;
overflow: hidden;
width: 90%;
}
nav ul {
margin: 0;
padding: 0;
float: right;
}
nav ul li {
display: inline-block;
list-style-type: none;
}
nav ul li a {
color: red;
display: block;
line-height: 56px;
padding: 0 24px;
text-decoration: none;
}
nav a:hover{
color: blue;
}

First off, assuming that you want the navbar to span the entire width of the window, you need make sure that you're removing the default margin that is placed on the body element (if you are not using a css reset of some kind that already takes care of that).
Try:
body {
margin: 0;
}
Now remove the width: 90%; that's on your navbar. That should get you pointed in the right direction.
Here's a Codepen of that in action.

Related

How to make a Fixed or Sticky Navbar using media query?

How to make the navbar into a fixed or sticky position using media query? I want to make it visible when you scroll down the scroll bar of your page. I tried anything I could but I don't really get it.
Here are my examples of codes.
.navbar {
background-color: #111;
padding: 12px 16px;
}
.navbar ul {
list-style-type: none;
text-align: center;
display: flex;
}
.navbar li a{
color: #ccc;
text-decoration: none;
padding: 8px 16px;
margin-left: 20px;
}
/* MEDIA QUERY */
HERE
#media screen and (max-width: 700px) {
.navbar ul{
flex-direction: column;
padding: 20px;
}
.navbar ul a{
margin: 5px 0px;
width: 30%;
}
}
<!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>My Portfolio</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="navbar">
<ul>
<li>Home</li>
<li>About Me</li>
<li>My Skills</li>
<li>Services</li>
<li>Certificates</li>
</ul>
</div>
</body>
</html>
You can make a navbar sticky or fixed by using the CSS position property. Set position property as "sticky" or "fixed".
See the snippet below. You can add it to any view port according to your need I have added it for larger screens.
body {
height: 800px;
background: cyan;
}
.navbar {
background-color: #111;
padding: 12px 16px;
position: sticky;
top: 0;
}
.navbar ul {
list-style-type: none;
text-align: center;
display: flex;
}
.navbar li a{
color: #ccc;
text-decoration: none;
padding: 8px 16px;
margin-left: 20px;
}
#media screen and (max-width: 700px) {
.navbar ul{
flex-direction: column;
padding: 20px;
}
.navbar ul a{
margin: 5px 0px;
width: 30%;
}
}
<!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>My Portfolio</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="navbar">
<ul>
<li>Home</li>
<li>About Me</li>
<li>My Skills</li>
<li>Services</li>
<li>Certificates</li>
</ul>
</div>
</body>
</html>

selector .wrapper does not work, cannot wrap text on browser in css

I can't seem to get the code in .wrapper{} to work. There is no change reflected on the browser. If the code in .wrapper{} works, the display on the browser should be repositioned closer to the centre.
Help needed: could someone point out the error in the code and suggest possible fixes?
/*index.html*/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tutorial</title>
<link rel = "stylesheet" href="style.css">
</head>
<body>
<div class= "wrapper">
<nav>
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>About me</li>
<li>Contact</li>
</ul>
</nav>
<h1>Front page</h1>
</div>
</body>
</html>
/*style.css*/
* {
margin: 0;
padding: 0;
}
body {
background-color: #eeeeee;
}
.wrapper {
margin: 0 auto;
width: 1000px;
}
nav {
width: 100%;
height: 100px;
background-color: #fff;
}
ul {
margin-left: 0;
}
ul li {
list-style: none;
display: inline-block; /* changes from vertical dropdown to horizontal */
line-height: 100px;
}
ul li a {
display: block;
text-decoration: none;
font-size: 14px;
font-family:Arial, Helvetica, sans-serif;
color:indianred;
padding: 0 20px;
}
ul li a:hover {
font-family:monospace;
color: green;
}
This is because you have made the .wrapper width 1000px. Try to change it or make half the width then you will find it into center or some changes.
Note: You should put a clear visible background color like red or yellow to see your changes.
fix it by replacing with this:
.wrapper {
margin: 0 auto;
width: 50%;
}

Creating a nav bar with flexbox

I've been learning code only for a couple of weeks, so I have a very basic knowledge.
I got stuck trying to build a navbar using flexbox.
For some reason I can't get my nav buttons () to stand in a horizontal way.
I've been trying and rewritting my code, but I can't figure it out.
Here's the link to my code: https://codepen.io/kokazp/pen/xxORovj?editors=1100
Thanks in advance.
body{
font-family: 'Yanone Kaffeesatz', sans-serif;
background-color: lightGray;
}
navbar {
background: white;
box-shadow: 0px 0px 10px var(--clr-gray200);
padding: 1rem 0;
border-radius: var(--radius);
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
}
#header-img{
height: 70px;
width: 70px;
margin-right: auto;
margin-left: 10px;
}
ul{
list-style: none;
margin: 0;
padding: 0;
}
li, a{
background-color:white;
text-decoration: none;
padding: 8px;
color:black;
}
li a:hover{
background-color: black;
color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://fonts.googleapis.com/css2?family=Yanone+Kaffeesatz:wght#300&display=swap" rel="stylesheet">
<link rel=StyleSheet HREF="estilo.css">
</head>
<body>
<header id="header">
<navbar id="nav-bar">
<ul>
<li><img src="https://blog.spoongraphics.co.uk/wp-content/uploads/2017/craft-brewery-logos/1.jpg" id="header-img" alt="Company logo"></li>
<li>Contact</li>
<li>Beers</li>
<li>Video</li>
</ul>
</navbar>
</header>
</body>
</html>
let's make it clear when you use a flex-box it applies to children not to grand children, when you apply display:flex to ur navbar it will make the ul a flex child, so li tags are not flex, secondly you're making it columns so it will make it in a vertical way.
solution: you can make the ul
ul{display:flex;}
and it will make the li go to row direction by default

My 'menu' class does not stick to the top of the screen and height auto does not work when i do padding

Okay i know the tittle is bit confusing but here is a description. I have a header tag inside html and a full screen background in css. On top of the screen is menu
which is suposed to stay there (not to stick to the top of the screen while scrolling). Also i never had this problem before when i set height to auto and i set padding for an 'a' element height does not follow the padding of the a element and then there is a gap between background and top of the screen. So in order to fix that i wrote margin-top: -20px; but then it looks like this.
picture 1
And if i remove margin-top it looks like this:
picture 2
Again i never had this problem before and here is code:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Smart Hosting | Home</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="./css/main.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:300"
rel="stylesheet">
</head>
<body>
<header>
<div class="menu">
<ul>
<li class="current">Home</li>
<li>Shop</li>
<li>About</li>
<li>Log In</li>
<li>Sign Up</li>
</ul>
</div>
</header>
</body>
</html>
CSS
body {
margin: 0px;
padding: 0px;
font-family: Roboto;
}
body, html {
width: 100%;
height: 100%;
}
header {
background: url(./img/server.jpg) 50% 50%;
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
}
.menu {
background: #1C2F51;
width: 100%;
height: 70px;
}
.menu ul {
list-style: none;
}
.menu li {
display: inline;
background: #25CFB0;
padding: 30px;
}
.menu a {
color: white;
text-decoration: none;
font-size: 20px;
}
Use display: inline-block instead of inline for your li elements. Margins doesn't always do what you expect on inline elements.
.menu ul {
list-style: none;
margin-top: 0px; //to remove the blank space at the top
}
.menu li {
display: inline-block;
background: #25CFB0;
padding: 30px;
}
https://codepen.io/anon/pen/oQgBpV

Navigation bar and logo graphics will not stick together

There is a little white gap in between the top of my navigation bar and the bottom of my logo graphics. How can I get these to stick together? Am I missing a selector like header or nav? Maybe I missed a declaration?
body {
background-color: #FFFFFF;
margin: 0px;
padding: 0px;
text-align: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
display: inline-block;
border: 5px solid #0009bc;
}
li {
float: left;
}
a:link, a:visited {
display: block;
width: 140px;
font-weight: bold;
color: #20dbd4;
background-color: #000000;
text-align: center;
padding: 12px;
text-decoration: underline;
text-transform: uppercase;
}
a:hover, a:active {
background-color: #20dbd4;
color: #000000;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
<meta name="robots" content="noindex, nofollow, noarchive"/>
<title>Grid Design</title>
</head>
<body>
<header>
<img src="/images/grid-design.jpg" alt="Grid Design" style="width: 987px; height: 243px;"/>
</header>
<nav>
<ul>
<li>home</li>
<li>news</li>
<li>about</li>
<li>products</li>
<li>photos</li>
<li>contact</li>
</ul>
</nav>
</body>
</html>
Just declare the image as display:block and then centre as required.
The image is display:inline by default which means it is affected by whitespace...making the image into block element resolves the issue.
JSfiddle Demo
CSS
header img {
display: block;
margin: 0 auto;
}
You could set the margin of the nav to -4 so:
CSS:
nav {
margin: -4px 0 0 0;
}
But this is not the only way...actually this should be your last resort !! There are several better ways to do this.