I'm learning CSS3 and I practicing creating a navbar, that I want to do is to expand the width of input text to 50% into a navbar, I try to apply a class:
.main-nav__searchbar{
width: 50%;
margin: 0;
padding: 0;
}
But it no works
*{
box-sizing: border-box;
}
body{
font-family: 'Montserrat', sans-serif;
margin:0px;
}
#product-overview {
background-color: #ff1b68;
width: 100%;
height: 528px;
padding: 10px;
}
.section-title{
color: #2ddf5c;
}
#product-overview h1{
color:white;
font-family: 'Anton', sans-serif;
}
.main-header{
width:100%;
background: #2ddf5c;
padding:8px 16px;
}
.main-header > div{
display: inline-block;
vertical-align: middle;
}
.main-header__brand{
color: #0e4f1f;
text-decoration: none;
font-weight: bold;
font-size: 20px;
}
.main-nav__searchbar{
width: 50%;
margin: 0;
padding: 0;
}
.main-nav{
display: inline-block;
text-align: right;
width: calc(100% - 300px);
}
.main-nav__items{
margin:0;
padding:0;
list-style: none;
}
.main-nav__item{
display: inline-block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS course</title>
<link rel="shortcut icon" href="favicon.png">
<link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:400,700" rel="stylesheet">
<link rel="stylesheet" href="main.css">
</head>
<body>
<header class="main-header">
<div>
<a href="index.html" class="main-header__brand">
uHost
</a></div>
<div><input type="text" placeholder="search" class="main-nav__searchbar"></div><nav class="main-nav">
<ul class="main-nav__items">
<li class="main-nav__item">
Packages
</li>
<li class="main-nav__item">
Customers
</li>
<li class="main-nav__item">
Start Hosting
</li>
</ul>
</nav>
</header>
</body>
</html>
Why it does not work if my parent class has display:inline-block property as all my markups there? Regards
Basically, display: inline-block tries to fit all elements in one line. For that reason, your 50% seems very small. If you set it to 100% of the remaining space it is much bigger.
Nevertheless, I believe it is also a good idea to become familiar with flexbox. You can see I used flexbox to re-arrange your navbar.
Now, your elements are nicely spaced between each other. Each of them takes just enough space (you can still adjust the %). Additionally, you achieve a decent level of responsiveness out of the box with flexbox.
*{
box-sizing: border-box;
}
body{
font-family: 'Montserrat', sans-serif;
margin:0px;
}
#product-overview {
background-color: #ff1b68;
width: 100%;
height: 528px;
padding: 10px;
}
.section-title{
color: #2ddf5c;
}
#product-overview h1{
color:white;
font-family: 'Anton', sans-serif;
}
.main-header{
display: flex;
align-items: center;
justify-content: space-evenly;
width:100%;
background: #2ddf5c;
padding:8px 16px;
}
.main-header > div{
vertical-align: middle;
}
.main-header__brand{
color: #0e4f1f;
text-decoration: none;
font-weight: bold;
font-size: 20px;
}
.main-nav__searchbar{
width: 100%;
margin: 0;
padding: 0;
}
.main-nav{
width: 50%;
text-align: right;
}
.main-nav__items{
display: flex;
justify-content: space-evenly;
margin:0;
padding:0;
list-style: none;
}
.main-nav__item{
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS course</title>
<link rel="shortcut icon" href="favicon.png">
<link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:400,700" rel="stylesheet">
<link rel="stylesheet" href="main.css">
</head>
<body>
<header class="main-header">
<div>
<a href="index.html" class="main-header__brand">
uHost
</a></div>
<div><input type="text" placeholder="search" class="main-nav__searchbar"></div><nav class="main-nav">
<ul class="main-nav__items">
<li class="main-nav__item">
Packages
</li>
<li class="main-nav__item">
Customers
</li>
<li class="main-nav__item">
Start Hosting
</li>
</ul>
</nav>
</header>
</body>
</html>
Related
Hello I am attempting to create a Portfolio using HTML, CSS, and Javascript. My only previous experience is making a basic website with standard text and a light\dark theme button. I am trying to get my Title the be on the left of my navigation bar, and my directories to be on the left side of the navigation bar. Could Someone explain how i would do this.
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&family=Ubuntu:wght#400;500;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
/* navbar styling */
.navbar{
position: fixed;
width: 100%;
background: crimson;
font-family: 'Ubuntu', sans-serif;
}
.navbar .maxwidth{
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar .logo a{
color: #fff;
font-size: 35px;
font-weight: 600;
}
.navbar .menu li{
list-style: none;
display: inline-block;
}
.navbar .menu li a{
color: #fff;
float: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Portfolio</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar">
<div class="max-width">
<div class="logo"><a href='#'>Portfo<span>lio.</span></a></div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Skills</li>
<li>Teams</li>
<li>Contact</li>
</ul>
</div>
</nav>
</body>
</html>
You were doing it pretty much correctly. Your css had a typo. I changed maxwidth to max-width.
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&family=Ubuntu:wght#400;500;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
/* navbar styling */
.navbar{
position: fixed;
width: 100%;
background: crimson;
font-family: 'Ubuntu', sans-serif;
}
.navbar .max-width{
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar .logo a{
color: #fff;
font-size: 35px;
font-weight: 600;
}
.navbar .menu li{
list-style: none;
display: inline-block;
}
.navbar .menu li a{
color: #fff;
float: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Portfolio</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar">
<div class="max-width">
<div class="logo"><a href='#'>Portfo<span>lio.</span></a></div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Skills</li>
<li>Teams</li>
<li>Contact</li>
</ul>
</div>
</nav>
</body>
</html>
Ideally I want to keep the same layout when the browser window shrinks. I don't know if I need media queries to do that. I was trying to use flex-shrink but it wasn't having any effect. I thought flex has a default shrink property? I think part of the problem is I have too many css rules that may be conflicting with one another- I'm trying to get it to look like the wireframe image (below). Here is the codepen.
wireframe-
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-weight: unset;
}
a {
text-decoration: none;
}
header {
background-color: white;
height: 64px;
display: flex;
justify-content: space-between;
padding: 24px;
align-items: center;
display: fixed;
z-index: 10;
width: 100%;
border-bottom: 1px solid black;
}
.logo {
height: 32px;
display: flex;
align-items: center;
}
.logo img {
height: 50px;
}
.logo h1 {
font-family: 'Cantarell', sans-serif;
text-transform: uppercase;
color: gray;
}
.logo .bold {
font-weight: 700;
color: black;
}
nav {
margin-right: 24px;
}
nav ul {
display: inline-flex;
list-style: none;
}
nav ul li {
margin-left: 16px;
}
nav a {
color: black;
font-family: 'Cantarell', sans-serif;
font-size: 20px;
}
<!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>Colmar Academy</title>
<link href="https://fonts.googleapis.com/css2?family=Cantarell:wght#400;700&display=swap" rel="stylesheet" />
<link rel="icon" type="image/x-icon" href="images\ic-logo-white.svg" />
<link href="reset.css" type="text/css" rel="stylesheet" />
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<header>
<div class="logo">
<img src="images\ic-logo.svg" alt="logo" />
<h1><span class="bold">Colmar</span>Academy</h1>
</div>
<nav>
<ul>
<li>On campus</li>
<li>Online</li>
<li>For companies</li>
<li>Sign in</li>
</ul>
</nav>
</header>
</body>
</html>
You will have to set media queries for your elements to adjust their size at a certain browser width. See the sample ones I added below:
#media only screen and (max-width: 650px) {
.bold,
.logo > h1,
nav > ul > li > a {
font-size: smaller;
white-space: nowrap;
}
.logo {
max-width: 100%;
}
}
Of course, feel free to change the sizing as you desire. See it working in the snippet below.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-weight: unset;
}
a {
text-decoration: none;
}
header {
background-color: white;
height: 64px;
display: flex;
justify-content: space-between;
padding: 24px;
align-items: center;
display: fixed;
z-index: 10;
width: 100%;
border-bottom: 1px solid black;
}
.logo {
height: 32px;
display: flex;
align-items: center;
}
.logo img {
height: 50px;
}
.logo h1 {
font-family: "Cantarell", sans-serif;
text-transform: uppercase;
color: gray;
}
.logo .bold {
font-weight: 700;
color: black;
}
nav {
margin-right: 24px;
}
nav ul {
display: inline-flex;
list-style: none;
}
nav ul li {
margin-left: 16px;
}
nav a {
color: black;
font-family: "Cantarell", sans-serif;
font-size: 20px;
}
#media only screen and (max-width: 650px) {
.bold,
.logo > h1,
nav > ul > li > a {
font-size: smaller;
white-space: nowrap;
}
.logo {
max-width: 100%;
}
}
<!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>Colmar Academy</title>
<link href="https://fonts.googleapis.com/css2?family=Cantarell:wght#400;700&display=swap" rel="stylesheet" />
<link rel="icon" type="image/x-icon" href="images\ic-logo-white.svg" />
<link href="reset.css" type="text/css" rel="stylesheet" />
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<header>
<div class="logo">
<img src='https://svgshare.com/i/esC.svg' title='' />
<h1><span class="bold">Colmar</span>Academy</h1>
</div>
<nav>
<ul class="nav-links">
<li>On campus</li>
<li>Online</li>
<li>For companies</li>
<li>Sign in</li>
</ul>
</nav>
</header>
</body>
</html>
Here I am trying to keep the navigation buttons in the center of the navbar using flexbox. But whenever I try to center using the justify-content property using flexbox the logo text also moves along the navigation buttons. I want the logo text on the left corner and buttons on the center. Any fix for this using flexbox?
/* -----------
1. global-setup
----------- */
* {
margin: 0;
padding: 0;
}
/* -----------
2. navigation-container
----------- */
.nav {
background-color: #BA8C63;
width: 100%;
height: 60px;
display: flex;
justify-content: center;
}
.nav .logo {
display: flex;
align-self: flex-start;
}
.nav .logo p {
font-size: 30px;
color: white;
padding: 10px;
font-family: 'Oleo Script', cursive;
padding-left: 40px;
}
div.li ul {
display: flex;
list-style: none;
}
a {
text-decoration: none;
display: inline-block;
color: #e6cbb3;
font-size: 15px;
text-transform: uppercase;
padding: 20px;
}
a:hover {
background-color: #e6cbb3;
color: #BA8C63;
transition: .5s;
}
<!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>Flexbox Practice</title>
<link rel="stylesheet" href="flexbox.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oleo+Script&display=swap" rel="stylesheet">
</head>
<body>
<div class="nav">
<div class="logo">
<p>Woody</p>
</div>
<div class="li">
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
</html>
/* -----------
1. global-setup
----------- */
* {
margin: 0;
padding: 0;
}
/* -----------
2. navigation-container
----------- */
.nav {
background-color: #BA8C63;
width: 100%;
height: 60px;
display: flex;
}
.nav .logo {
display: flex;
align-self: flex-start;
}
.li{
display: flex;
justify-content: center;/*same code but aplys for only li class not whole nav*/
width: 100%;/*fill available space*/
}
.nav .logo p {
font-size: 30px;
color: white;
padding: 10px;
font-family: 'Oleo Script', cursive;
padding-left: 40px;
}
div.li ul {
display: flex;
list-style: none;
}
a {
text-decoration: none;
display: inline-block;
color: #e6cbb3;
font-size: 15px;
text-transform: uppercase;
padding: 20px;
}
a:hover {
background-color: #e6cbb3;
color: #BA8C63;
transition: .5s;
}
<!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>Flexbox Practice</title>
<link rel="stylesheet" href="flexbox.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oleo+Script&display=swap" rel="stylesheet">
</head>
<body>
<div class="nav">
<div class="logo">
<p>Woody</p>
</div>
<div class="li">
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
</html>
here we apply center only for .li class (not for whole nav) and make the .li to fit the remaining space other than logo
/* -----------
1. global-setup
----------- */
* {
margin: 0;
padding: 0;
}
/* -----------
2. navigation-container
----------- */
.nav {
background-color: #BA8C63;
width: 100%;
height: 60px;
display: flex;
justify-content: center;
}
.nav::after {
content: "";
flex: auto;
}
.nav .logo {
flex: 1;
display: flex;
align-content: flex-start;
}
.nav .logo p {
font-size: 30px;
color: white;
padding: 10px;
font-family: 'Oleo Script', cursive;
padding-left: 40px;
}
div.li ul {
align-self: center;
display: flex;
list-style: none;
}
a {
text-decoration: none;
display: inline-block;
color: #e6cbb3;
font-size: 15px;
text-transform: uppercase;
padding: 20px;
}
a:hover {
background-color: #e6cbb3;
color: #BA8C63;
transition: .5s;
}
<!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>Flexbox Practice</title>
<link rel="stylesheet" href="flexbox.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oleo+Script&display=swap" rel="stylesheet">
</head>
<body>
<div class="nav">
<div class="logo">
<p>Woody</p>
</div>
<div class="li">
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
</html>
I'm very new to html and css and when trying to make a navbar, the colour doesn't cover the entire top of page. I've tried adjusting the height and width but to no luck. Here is what the webpage looks like at the moment. As you can see, the blue header doesn't quite touch the top and sides. Any help would be greatly appreciated. Here is the index.html file:
<!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">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#300;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Noe ice-cream for you</title>
</head>
<body style="background-color: gray;">
<header>
<div class="container">
<img src="assets/subzero.png" alt="logo" class="logo" height="70px">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Shop</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
And here is the style.css file:
h1{
font-family: 'Open Sans', sans-serif;
}
.paragraph{
font-size: medium;
line-height: 62px;
font-family: 'Open Sans', sans-serif;
}
.container{
font-family: 'Open Sans', sans-serif;
}
header{
background-color:aqua;
padding: 0;
margin: 0;
}
.logo{
float: left;
padding: 10px 0;
}
nav{
float: right;
}
header::after {
content: '';
display: table;
clear: both;
}
nav ul{
margin: 0;
padding: 0;
list-style:none;
}
nav li{
display: inline-block;
margin-left: 70px;
padding-top: 50px;
}
nav a{
text-decoration: none;
text-transform: uppercase;
color: #444;
}
nav a:hover{
color:black;
}
You can add below on your style.css
body {
margin:0;
padding:0;
}
or add
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css#5.0.1/reset.css"
on your head tag before including tag link style.css
try this in css :
*{
padding: 0;
margin: 0;
}
Always start by resetting your document and setting the box-sizing property. With box-sizing padding and border are added to the element's height and width. So you can do something like this
*, ::after, ::before {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
}
This question already has an answer here:
Proper use of flex properties when nesting flex containers
(1 answer)
Closed 2 years ago.
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
font-family: 'Poppins' , sans-serif;
}
header{
height: 10vh;
width: 90%;
margin: auto;
align-items: center;
display: flex;
}
nav {
flex:1;
background-color: darkorchid;
}
.nav-links {
display: flex;
justify-content: space-around;
list-style: none;
}
.nav-link {
color: #5f5f79;
font-size: 18px;
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="decorate.css">
<meta charset="utf-8">
<title>Hello world</title>
</head>
<body>
<header>
<nav>
<ul class = "nav-links">
<li ><a class="nav-link" href="#">education</a></li>
<li ><a class="nav-link" href="#">work</a></li>
<li ><a class="nav-link" href="#">certificates</a></li>
</ul>
</nav>
</div>
</header>
</body>
</html>
This outputs the expected results with the space between navigation links . whereas the below code has a different output when div is included.
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
font-family: 'Poppins' , sans-serif;
}
header{
height: 10vh;
width: 90%;
margin: auto;
align-items: center;
display: flex;
}
nav {
flex:1;
background-color: darkorchid;
}
.nav-links {
display: flex;
justify-content: space-around;
list-style: none;
}
.nav-link {
color: #5f5f79;
font-size: 18px;
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="decorate.css">
<meta charset="utf-8">
<title>Hello world</title>
</head>
<body>
<header>
<div class="container">
<nav>
<ul class = "nav-links">
<li ><a class="nav-link" href="#">education</a></li>
<li ><a class="nav-link" href="#">work</a></li>
<li ><a class="nav-link" href="#">certificates</a></li>
</ul>
</nav>
</div>
</div>
</header>
</body>
</html>
why does including the tag give a different output even when the div tag is not used in CSS . I am novice , so I might not be understanding some of the concepts in both HTML and CSS .
header has display: flex wich is why the nav can grow, if you put the container div around the nav without display flex. it cant anymore.
adding display: flex to the container fixes this issue
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
font-family: 'Poppins' , sans-serif;
}
header{
height: 10vh;
width: 90%;
margin: auto;
align-items: center;
}
.container{display: flex;}
nav {
flex:1;
background-color: darkorchid;
}
.nav-links {
display: flex;
justify-content: space-around;
list-style: none;
}
.nav-link {
color: #5f5f79;
font-size: 18px;
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="decorate.css">
<meta charset="utf-8">
<title>Hello world</title>
</head>
<body>
<header>
<div class="container">
<nav>
<ul class = "nav-links">
<li ><a class="nav-link" href="#">education</a></li>
<li ><a class="nav-link" href="#">work</a></li>
<li ><a class="nav-link" href="#">certificates</a></li>
</ul>
</nav>
</div>
</div>
</header>
</body>
</html>
because div is a block element that means it sets your tag into a block or a square which uses the whole line where as without div it works as inline elements which only occupy the space bounded by the tags