I'm a newbie and I'm making my portfolio for practice, and decided I want to make it fully reponsive and use flexbox as much as possible.
I'm using a "mobile-first" approach, so I can fix any ugliness for desktop later.
My top navigation bar splits my buttons on mobile view. For example, the "About Me" button is in two lines, and the "me" part overlaps with the "about". I want them all to fit in one line, or two split over two lines, but neatly and without overlapping or cutting off text.
Here's my code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
}
.nav-container {
display: flex;
}
nav {
display: flex;
font-family: "Lato", sans-serif;
flex-wrap: wrap;
position: fixed;
}
nav ul {
display: flex;
margin: 5px;
padding: 10px;
list-style-type: none;
justify-content: space-around;
width: 100%;
}
nav ul li {
margin: 5px;
padding: 5px;
}
.header-container {
}
header {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
top: 100px;
}
.headings {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
text-align: center;
}
.cv-container {
display: flex;
align-self: flex-end;
margin-left: 30px;
position: relative;
top: 30px;
right: 30px;
color: #000;
border: 1px solid #000;
}
.cv-container a,
.nav-container a {
text-decoration: none;
color: #000;
padding: 5px;
}
.cv-container a:hover,
.nav-container a:hover {
background-color: #f442aa;
}
strong {
font-style: bold;
}
header h1 {
display: flex;
align-self: center;
font-family: "Lato", sans-serif;
padding: 15px;
}
header h2 {
display: flex;
align-self: center;
font-family: "Playfair Display", serif;
padding: 15px;
}
header a {
font-family: "Lato", sans-serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name='viewport'
content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
<title>My Name - Web Designer & Developer</title>
<link rel="stylesheet" href="styles.css"/>
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,400i,700|Playfair+Display:400,400i,700,700i" rel="stylesheet">
</head>
<body>
<div class="nav-container">
<nav>
<ul>
<li>About Me</li>
<li>Portfolio</li>
<li>Links</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</div>
<header>
<div class="headings">
<p><h1>Virginia Balseiro</h1></p>
<p><h2>Web Designer & Developer</h2></p>
</div>
<div class="cv-container">
<strong>DOWNLOAD CV</strong>
</div>
<div class="social-container">
<a></a>
<a></a>
<a></a>
</div>
</header>
I found some "hacks" online, but I really want to do it the proper way and understand what I'm doing. Thank you so much in advance.
I am suggesting you to use flex-wrap: wrap, on your "ul" tag.
Flex wrap allows wrapping items into multiple lines.
Related
This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed last year.
I am new to web development and I am trying to create a responsive navbar but float Property is Not Working. Here is the HTML Code
<html>
<head>
<meta charset="UTF-8">
<title>Page title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="css.css"></link>
</head>
<body>
<nav class="nav">
<div class="logo" id="logo2">
<h1> Nav</h1>
</div>
<div class="links float-right">
Home
About
Contact
Work
</div>
</nav>
</body>
</html>
and here is the CSS code
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: white;
}
nav {
display: flex;
background: #000000;
color: white;
line-height: 76px;
}
nav {
height: 76px !important;
}
.logo h1{
line-height: 76px;
}
a {
display: inline-block;
}
.links{
float:right !important;
}
I have tried all thing I think of like padding, Increasing logo width, etc. But it make it unresponsive on bigger screen
Solution 1: (Using Float)
Remove display: flex; from nav CSS and add float: left; on .logo CSS.
nav {
background: #000000;
color: white;
line-height: 76px;
}
.logo {
float: left;
}
Solution 2: (Using Flex)
Just add justify-content: space-between; in nav CSS.
nav {
display: flex;
background: #000000;
color: white;
line-height: 76px;
justify-content: space-between;
}
I hope it'll help you out, Thank You
Add this to your nav style
justify-content: space-between;
add justify-content: space-between to nav styles
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: white;
}
nav {
display: flex;
background: #000000;
color: white;
line-height: 76px;
justify-content: space-between;
}
nav {
height: 76px !important;
}
.logo h1{
line-height: 76px;
}
a {
display: inline-block;
}
.links{
float:right !important;
}
<html>
<head>
<meta charset="UTF-8">
<title>Page title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="css.css"></link>
</head>
<body>
<nav class="nav">
<div class="logo" id="logo2">
<h1> Nav</h1>
</div>
<div class="links float-right">
Home
About
Contact
Work
</div>
</nav>
</body>
</html>
just add in nav css ( justify-content: space-between;)
nav {
display: flex;
background: #000000;
color: white;
line-height: 76px;
justify-content: space-between;
}
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: white;
}
nav {
display: flex;
background: #000000;
color: white;
line-height: 76px;
justify-content: space-between;
}
nav {
height: 76px !important;
}
.logo h1{
line-height: 76px;
}
a {
display: inline-block;
}
.links{
float:right !important;
}
<nav class="nav">
<div class="logo" id="logo2">
<h1> Nav</h1>
</div>
<div class="links float-right">
Home
About
Contact
Work
</div>
</nav>
On my landing page, with a position: sticky nav bar, The navbar will stay at the top of the page but it does not stay completely stationary while scrolling
Codepen: https://codepen.io/jcrainey/pen/rNGLyOQ
I've tried setting a fixed height to .sticky but it just adds space to the bottom of the navbar. Any thoughts on how to make it stay completely stationary?
body {
padding: 0;
margin: 0;
background: white;
color: black;
font-family: 'Helvetica', sans-serif;
}
.sticky {
background-color: white;
position: sticky;
top: 0;
height: 60px;
}
.navbar {
position: sticky;
display: flex;
justify-content: flex-end;
align-items: center;
list-style: none;
}
.links {
font-size: 30px;
text-decoration: none;
color: gray;
padding: 0px 20px 0px 0px;
}
li:nth-child(1) {
margin-right: auto;
margin-left: -20px;
}
.links:hover {
color: black;
}
.intro {
display: flex;
justify-content: center;
font-family: 'Helvetica', sans-serif;
font-size: 35px;
}
.scroll {
display: flex;
justify-content: center;
background-color: white;
height: 2000px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="landingpage.css">
<title>Landing Page</title>
</head>
<body>
<div class="sticky">
<nav>
<ul class= "navbar">
<li><a class = "links" href = "#">HOME</a></li>
<li><a class = "links" href="#projects">PROJECTS</a></li>
<li><a class = "links" href="#blog">BLOG</a></li>
</ul>
</nav>
</div>
<div class = "intro">
<h1>JC Rainey</h1>
</div>
<div class="scroll">just to show what happens when you scroll</div>
</body>
</html>
.navbar has inherited margins.
Set a margin: 0 on .navbar and give it a height.
.navbar {
position: sticky;
display: flex;
justify-content: flex-end;
align-items: center;
list-style: none;
margin: 0;
height: 60px;
}
You should be able to remove the height from .sticky too.
You don't have to adjust the height, or set the top padding. The reason why your navbar was moving is that it will move towards the top until any "explicitly defined" margin, or any "existing margin" is completely gone. You need to only add margin: 0; to your .navbar element in your style-sheet, like in the snippet below.
Just a tip. If you press F12 to open the tools, and find the nav-bar element in the HTML that is rendered in the chrome dev-tools, click on it, and it will show you what youre padding, margin, and border all are set too.
body {
padding: 0;
margin: 0;
background: white;
color: black;
font-family: 'Helvetica', sans-serif;
}
.sticky {
background-color: white;
position: sticky;
top: 0;
height: 60px;
}
.navbar {
position: sticky;
display: flex;
justify-content: flex-end;
align-items: center;
list-style: none;
margin-top:0;
}
.links {
font-size: 30px;
text-decoration: none;
color: gray;
padding: 0px 20px 0px 0px;
}
li:nth-child(1) {
margin-right: auto;
margin-left: -20px;
}
.links:hover {
color: black;
}
.intro {
display: flex;
justify-content: center;
font-family: 'Helvetica', sans-serif;
font-size: 35px;
}
.scroll {
display: flex;
justify-content: center;
background-color: white;
height: 2000px;
}
One possibility is to add padding-top: 1px; to .sticky. The reason: The included ul (.navbar) has default top and bottom margins, which are not included in the "sticky" part (aka "collapsing margins"). Adding just one pixel of padding-top to the parent prevents that.
body {
padding: 0;
margin: 0;
background: white;
color: black;
font-family: 'Helvetica', sans-serif;
}
.sticky {
background-color: white;
position: sticky;
top: 0;
height: 60px;
padding-top: 1px;
}
.navbar {
position: sticky;
display: flex;
justify-content: flex-end;
align-items: center;
list-style: none;
}
.links {
font-size: 30px;
text-decoration: none;
color: gray;
padding: 0px 20px 0px 0px;
}
li:nth-child(1) {
margin-right: auto;
margin-left: -20px;
}
.links:hover {
color: black;
}
.intro {
display: flex;
justify-content: center;
font-family: 'Helvetica', sans-serif;
font-size: 35px;
}
.scroll {
display: flex;
justify-content: center;
background-color: white;
height: 2000px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="landingpage.css">
<title>Landing Page</title>
</head>
<body>
<div class="sticky">
<nav>
<ul class="navbar">
<li><a class = "links" href = "#">HOME</a></li>
<li><a class = "links" href="#projects">PROJECTS</a></li>
<li><a class = "links" href="#blog">BLOG</a></li>
</ul>
</nav>
</div>
<div class = "intro">
<h1>JC Rainey</h1>
</div>
<div class="scroll">just to show what happens when you scroll</div>
</body>
</html>
There are a few things going on here.
1st, you have position: sticky in 2 places: .sticky and .navbar. I removed it from your .navbar. 2nd, your ul is inheriting browser styles. (It's often useful to use a CSS reset to remove these: https://necolas.github.io/normalize.css/.) I removed the margin from your ul and gave it a 1em padding. 3rd, I removed your negative margin on your first li. Is this what you're looking for?
body {
padding: 0;
margin: 0;
background: white;
color: black;
font-family: 'Helvetica', sans-serif;
}
.sticky {
background-color: white;
position: sticky;
top: 0;
height: 60px;
}
.navbar {
display: flex;
justify-content: flex-end;
align-items: center;
list-style: none;
margin: 0;
padding: 1em;
}
.links {
font-size: 30px;
text-decoration: none;
color: gray;
padding: 0px 20px 0px 0px;
}
li:nth-child(1) {
margin-right: auto;
}
.links:hover {
color: black;
}
.intro {
display: flex;
justify-content: center;
font-family: 'Helvetica', sans-serif;
font-size: 35px;
}
.scroll {
display: flex;
justify-content: center;
background-color: white;
height: 2000px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="landingpage.css">
<title>Landing Page</title>
</head>
<body>
<div class="sticky">
<nav>
<ul class= "navbar">
<li><a class = "links" href = "#">HOME</a></li>
<li><a class = "links" href="#projects">PROJECTS</a></li>
<li><a class = "links" href="#blog">BLOG</a></li>
</ul>
</nav>
</div>
<div class = "intro">
<h1>JC Rainey</h1>
</div>
<div class="scroll">just to show what happens when you scroll</div>
</body>
</html>
I am trying to create a NAV bar and I have tried putting 'display: inline-block;' in every single element but for the life of me it won't cross the whole page. Any idea's? I want to have my logo in the center of the navigation bar with the other links centered across the rest of the top of the page. It doesn't matter where I put the 'display: inline-block;' it never centers it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Gingerich Tiling</title>
<link href="main.css" type="text/css" rel="stylesheet">
<link type="text/css" rel="stylesheet">
</head>
<body>
<header>
<nav class="nav1">
<div class="left-nav-bar">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
<div class="logo">
<li><a class="logo" href="index.html"><img src="Images/Gingerich%20Final%20Logo.jpg" alt ="Gingerich Tiling Logo" height="250" width="300"</a></li>
</div>
<div class=right-nav-bar>
<ul>
<li>Tiling</li>
<li>Earthmoving</li>
<li>Septic</li>
</ul>
</div>
</nav>
</header>
</body>
</html>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
color: black;
}
body {
}
header {
text-align: center;
display: inline-block;
}
.nav1 {
align-content: center;
list-style: none;
text-decoration: none;
text-transform: uppercase;
}
nav a {
text-decoration: none;
}
nav ul {
}
.nav1 li {
display: inline-block;
}
.left-nav-bar {
margin: 0;
padding: 0;
text-decoration: none;
}
.logo {
}
.right-nav-bar {
margin: 0;
padding: 0;
text-decoration: none;
}
After re-reading the question, I think I got how you want it to look. The problem was that you were using inline-block a bit too much, actually!
You can achieve the look using display: flex (display: grid would also work, but I think flex layout is more straight-forward in this case) in conjunction with justify-content: space-evenly on your <nav> element.
Please also note that you cannot have a <li> element anywhere other than as a direct child element of a <ul> (that was not the case with your logo!)
Once you add a little padding to the sides of your navigation links, it should look good.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
color: black;
}
body {}
header nav {
text-align: center;
display: flex;
justify-content: space-evenly;
}
.nav1 {
align-content: center;
list-style: none;
text-decoration: none;
text-transform: uppercase;
}
nav a {
text-decoration: none;
padding: 0 0.3em;
}
nav ul {}
.nav1 li {
display: inline-block;
}
.left-nav-bar {
margin: 0;
padding: 0;
text-decoration: none;
}
.logo {
width: 48px;
}
.right-nav-bar {
margin: 0;
padding: 0;
text-decoration: none;
}
<header>
<nav class="nav1">
<div class="left-nav-bar">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
<div class="logo">
<a class="logo" href="index.html"><img src="//placekitten.com/48/48" alt="Gingerich Tiling Logo" height="48" width="48"> </a>
</div>
<div class=right-nav-bar>
<ul>
<li>Tiling</li>
<li>Earthmoving</li>
<li>Septic</li>
</ul>
</div>
</nav>
</header>
You have a lot of unnecessary containers. But I didn't change the HTML but I did change your CSS. The best way to make navigation is by using display: flex;. They are easy to use and very effective.
Here is the CSS, just copy-paste this and see if you like the result :)
* {
box-sizing: border-box;
margin: 0;
padding: 0;
color: black;
}
/* body {
} */
header {
width: 100vw;
height: 100px;
max-width: 100%;
}
.nav1 {
list-style: none;
text-decoration: none;
text-transform: uppercase;
width: 90%;
height: 100%;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
}
nav a {
text-decoration: none;
}
/* nav ul {
} */
.nav1 li {
display: inline-block;
}
.left-nav-bar,
.right-nav-bar {
width: 33%;
height: 100%;
text-decoration: none;
display: flex;
justify-content: space-around;
align-items: center;
}
.left-nav-bar ul,
.right-nav-bar ul {
width: 100%;
height: 100%;
display: flex;
justify-content: space-around;
align-items: center;
row-gap: 20px;
}
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<meta name="viewport" content="width=device-width">
<style>
* {
box-sizing: border-box;
}
body {
display: grid;
grid-template-rows: 1fr 15fr .5fr;
}
footer {
text-align: center;
font-size: 0.85em;
color: white;
background-color: black;
box-shadow: 0px 0 10px rgba(0, 0, 0, 0.7);
}
nav {
position: sticky;
top: 0;
}
nav ul li:hover {
background-color: grey;
}
.brand-logo {
height: 100%;
}
.brand-logo img {
height: 100%;
}
#label {
font-size: 2rem;
font-family: Impact, Charcoal, sans-serif;
// text-align: center;
}
.inst {
font-size: 1.1rem;
font-weight: bold;
text-align: center;
}
.nav-wrapper {
height: 100%;
background-color: black;
text-align: center;
}
::selection {
border: black;
color: #000;
}
ul.dropdown-content.select-dropdown li span {
color: #000;
}
#cartIcon {
position: relative;
text-align : center;
left: 10px;
}
#cartIconNav {
position: relative;
margin-right: 5px;
}
</style>
</head>
<body>
<header>
<nav>
<div class="nav-wrapper">
<a href="" class="brand-logo"><img id="logo"
src="https://i.imgur.com/KNOffUU.png"></a>
</div>
<div class="nav-wrapper">
<i class="material-icons">menu</i>
<ul class="center hide-on-med-and-down">
<li>Home</li>
<li>Estimator</li>
<li>About</li>
<li id="cart"></li>
</ul>
</div>
</nav>
<ul class="sidenav" id="items">
<li>Home</li>
<li>Estimator</li>
<li>About</li>
<li id="navCart"></li>
</ul>
</header>
I'm trying to have my logo centered and the other line also have my menu centered.When trying to center the logo it goes more to the left and my menu items only aligns to the right or left.
ul class="center hide-on-med-and-down"
The line above only seems to align the menu to the right or left even if
center is typed.
Any suggestion on how I can achieve this and where am I going wrong in trying to solve this
Edit: new styles are done mainly using display: flex;
Check my commented jsfiddle
Main things I changed
.nav-wrapper {display: flex; flex-direction: column;}
/* Align the inner items with flex
specify that we want them flowing in a single column */
/* Justify content has lots of options for positioning children */
nav ul {
display: flex;
justify-content: center;
}
nav ul li {
/* Make the li float left, positions them horizontally rather than vertically */
float: left;
color: white;
width: 100%;
/* Give a max-width to make the nav buttons smaller */
max-width: 5rem;
padding: 0.8rem 0;
}
Hello guys im trying to recreate this:
This is what i have:
I did everything except i cant seem to get the nav potion to the right of the page.Any suggestions what i can do to make it work? What is the best way to do it and why?
index.html :
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="./resources/css/style.css">
</head>
<body>
<header>
<div class="logo">
<img src="./resources/images/img-myt-logo.jpg" alt="Our logo">
<span>My Times</span>
</div>
<nav>
<span>World</span>
<span>U.S</span>
<span>Tech</span>
<span>Science</span>
</nav>
</header>
</body>
</html>
style.css :
header {
display: flex;
font-family: Verdana;
font-size: 14px;
font-weight: bold;
border-bottom: 1px solid black;
}
.logo{
display: flex;
align-items: center;
margin-left: 20px;
}
nav span {
display: inline-block;
padding-right: 40px;
justify-content: flex-end;
}
.logo span {
color: MediumAquamarine;
padding-left: 10px;
}
add justify-content: space-between; to header
header {
display: flex;
font-family: Verdana;
justify-content: space-between;
font-size: 14px;
font-weight: bold;
border-bottom: 1px solid black;
}
.logo{
display: flex;
align-items: center;
margin-left: 20px;
}
nav span {
display: inline-block;
padding-right: 40px;
justify-content: flex-end;
}
.logo span {
color: MediumAquamarine;
padding-left: 10px;
}
<header>
<div class="logo">
<img src="./resources/images/img-myt-logo.jpg" alt="Our logo">
<span>My Times</span>
</div>
<nav>
<span>World</span>
<span>U.S</span>
<span>Tech</span>
<span>Science</span>
</nav>
</header>
If I understand what you're asking, you need to justify the content so that it opens up space between your logo div and the nav element. Easiest way to do this is add justify-content to your CSS for the header...
header {
display: flex;
font-family: Verdana;
font-size: 14px;
font-weight: bold;
border-bottom: 1px solid black;
justify-content:space-between;
}
.logo{
display: flex;
align-items: center;
margin-left: 20px;
}
nav span {
display: inline-block;
padding-right: 40px;
justify-content: flex-end;
}
.logo span {
color: MediumAquamarine;
padding-left: 10px;
}
The justify-content you have on nav span would justify the content within the nav, not justify the nav element itself within the header.