<!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;
}
Related
Im trying to align my a-tags side by side, but for some reason the divs inside the a-tag goes to the next line?
How can I align my three menu lines side by side with the others? display: inline-block; didn't work for me?
What I'm trying to create is something like this image:
But what do I miss to get the menu on the same line?
.logo-style {
font-family: Montserrat;
font-style: normal;
font-weight: bold;
font-size: 32px;
line-height: 39px;
/* identical to box height */
letter-spacing: 0.05em;
color: #4C5BA0;
}
/*
Navigation bar three lines menu
/*
Navigation
*/
.topnav {
overflow: hidden;
background: none !important;
align-items: center;
display: flex;
justify-content: space-between;
align-items: center;
}
.topnav button {
border: none;
cursor: pointer;
}
.topnav a {
color: brown;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
color: black;
}
.topnav a.active {
color: black;
}
*/
.line-one {
width: 30px;
}
.line-one {
width: 30px;
}
.line-one {
width: 30px;
}
.menu div {
width: 30px;
height: 4px;
background-color: brown;
margin: 5px 0;
border-radius: 25px;
}
.menu {
width: 30px;
}
.menu:hover div {
width: 30px;
background-color: black;
}
.right-nav {}
.left-nav {}
<?php
declare(strict_types=1);
?>
<!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 href="https://fonts.googleapis.com/css?family=Montserrat:600" rel="stylesheet">
<link rel="stylesheet" href="./css/site.scss">
<script type="text/javascript" src="./js/toggletheme.js" defer></script>
</head>
<body>
<header>
<div class="topnav">
<div class="left-nav">
<p class="logo-style">Web title</p>
</div>
<div class="right-nav">
Home
Archives
Coverage
<a href="#menu" class="menu">
<div class="line-one"></div>
<div class="line-two"></div>
<div class="line-three"></div>
</a>
</div>
</div>
</header>
</body>
</html>
Put this on your .right-nav
Display flex is very useful for this kind of situations.
Property flex-direction isn't neccesary, display flex itself is flex-direction: row; by default.
The gap isn't neccesary too, it just makes a gap between your items.
align-items is to align your items vertically in the center.
.right-nav {
display: flex;
flex-direction: row;
gap: 10px;
align-items: center;
}
You forgot to use display: flex; to .right-nav class. And center elements properly align-items: center; justify-content: center;
Now everything works fine:-) Best regards!
.right-nav {
display: flex;
align-items: center;
justify-content: center;
}
.logo-style {
font-family: Montserrat;
font-style: normal;
font-weight: bold;
font-size: 32px;
line-height: 39px;
/* identical to box height */
letter-spacing: 0.05em;
color: #4c5ba0;
}
/*
Navigation bar three lines menu
/*
Navigation
*/
.topnav {
overflow: hidden;
background: none !important;
display: flex;
justify-content: space-between;
align-items: center;
}
.topnav button {
border: none;
cursor: pointer;
}
.topnav a {
color: brown;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
color: black;
}
.topnav a.active {
color: black;
}
.right-nav {
display: flex;
align-items: center;
justify-content: center;
}
*/ .line-one {
width: 30px;
}
.line-one {
width: 30px;
}
.line-one {
width: 30px;
}
.menu div {
width: 30px;
height: 4px;
background-color: brown;
margin: 5px 0;
border-radius: 25px;
}
.menu {
width: 30px;
}
.menu:hover div {
width: 30px;
background-color: black;
}
<header>
<div class="topnav">
<div class="left-nav">
<a href="#news">
<p class="logo-style">Web title</p>
</a>
</div>
<div class="right-nav">
Home
Archives
Coverage
<a href="#menu" class="menu">
<div class="line-one"></div>
<div class="line-two"></div>
<div class="line-three"></div>
</a>
</div>
</div>
</header>
There are many different ways to go about creating this display, but probably the most straightforward approach in modern CSS is to use CSS Flexbox.
(Or, in this case, two nested Flexboxes.)
The example below has two elements which use:
display: flex;
One is the <header> itself, which means its two immediate children:
<h2 class="logo-style">
<nav>
will be flexibly positioned along its horizontal axis.
The other is the <nav>, which means its two immediate children:
<ul>
<a class="menu">
will in turn also be flexibly positioned along its own horizontal axis.
Note that the <header> has a justify-content value of space-between which means that the first of its two children will be positioned towards the left and the second will be positioned towards the right.
By contrast, the <nav> has a justify-content value of flex-end which means that both of its children will be positioned towards the right.
Working Example:
header {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo-style a {
font-family: Montserrat;
font-style: normal;
font-weight: bold;
font-size: 32px;
line-height: 39px;
letter-spacing: 0.05em;
color: #4C5BA0;
}
nav {
display: flex;
justify-content: flex-end;
align-items: center;
}
nav ul li {
display: inline-block;
margin-right: 18px;
padding: 6px;
border-radius: 6px;
}
nav ul li:hover {
background-color: #4C5BA0;
}
nav ul li:hover a {
color: rgb(255, 255, 255);
}
.menu {
display: inline-block;
width: 30px;
height: 27px;
background: linear-gradient(brown 0% 20%, white 20% 40%, brown 40% 60%, white 60% 80%, brown 80% 100%);
}
.menu:hover {
height: 27px;
background: linear-gradient(black 0% 20%, white 20% 40%, black 40% 60%, white 60% 80%, black 80% 100%);
}
<header>
<h2 class="logo-style">Web title</h2>
<nav>
<ul>
<li>Home</li>
<li>Archives</li>
<li>Coverage</li>
</ul>
</nav>
</header>
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 2 years ago.
I want to have only the first element of the navbar on the left of and the others centered.
What am I missing?
.nav {
padding: 0;
text-align: center;
}
.nav li {
display: inline;
padding-right: 20px;
color: #dfd1d1;
}
/* trying to use the below to put the logo on the left but not working */
.nav li:first-child {
text-align: left;
}
.nav :first-child {
text-align: left;
}
.nav li:first-of-type {
text-align: left;
}
.header {
padding: 25px 10px 25px 10px;
background-color: rgb(17, 140, 206);
}
.main-content {
padding: 25px;
background-color: rgb(152, 158, 160);
margin: 30px auto 0 auto;
}
h1 {
text-align: center;
}
<div class="header">
<ul class="nav">
<li> Logo</li>
<li> Home</li>
<li> Price</li>
<li> About / Contacts</li>
<li> Home</li>
</ul>
</div>
This could be one possible solution:
I've put the first element of the nav to the left with a position: absolute and made sure its parent (the nav) has a position:relative.
.nav {
position: relative;
padding: 0;
text-align: center;
}
.nav li {
display: inline;
padding-right: 20px;
color: #dfd1d1;
}
.header {
position: relative;
padding: 25px 10px 25px 10px;
background-color: rgb(17, 140, 206);
}
.main-content {
padding: 25px;
background-color: rgb(152, 158, 160);
margin: 30px auto 0 auto;
}
h1 {
text-align: center;
}
.logo {
position: absolute;
left: 0;
top: 0;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="header">
<ul class="nav">
<li class="logo"> Logo</li>
<li> Home</li>
<li> Price</li>
<li> About / Contacts</li>
<li> Home</li>
</ul>
</div>
Separate the logo form the main navigation and make it position: absolute; while centering it vertically with top: 50%; and a transform: translateY(-50%); property. Then add position: relative; to the .header class to contain the absolute positioned element. This will ensure it stays center regardless of the size.
See my example.
.header {
position: relative;
padding: 20px;
background-color: rgb(17, 140, 206);
}
.nav {
text-align: center;
}
.nav li {
display: inline;
padding-right: 20px;
color: #dfd1d1;
}
.logo {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.logo span {
color: #dfd1d1;
}
.main-content {
padding: 25px;
background-color: rgb(152, 158, 160);
margin: 30px auto 0 auto;
}
h1 {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="header">
<div class="logo">
<span> Logo </span>
</div>
<ul class="nav">
<li> Home </li>
<li> Price </li>
<li> About / Contacts </li>
<li> Home </li>
</ul>
</div>
Why does this work?
Setting the top to 50% vertically centers the absolute element on it's relative parent. However this centers the element based on it's top border. To center the middle we will transform the element based on 50% of the absolute elements height. Then ta-da, it's vertically center regardless of any height change.
I'm trying to align my menu-content items as shown in the images attached.
I am able to align the nav-menu contents. But not the insta-logo and hr.
Can you tell me how to code it properly with explanation.
body
{
background-color: black;
}
.header
{
margin: 50px 122px 0px 122px;
}
.logo
{
color: white;
float: left;
}
.nav-menu
{
margin: 0px;
float: right;
}
.nav-menu li
{
padding-left: 82px;
display: inline;
}
.nav-menu a
{
text-decoration: none;
font-family: Roboto;
font-size: 18px;
color: #808080;
}
.nav-menu hr
{
transform: rotate(90deg);
border: 0.1px solid #FFFFFF;
float: right;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<title>Website</title>
</head>
<body>
<div class="header">
<div class="logo">
<h1>Logo</h1>
</div>
<div class="menu-content">
<div class="nav-menu">
<ul>
<li><a title="click to see my work" href="index.html">Work</a></li>
<li><a title="about me and contact info" href="about-contact.html">About+Contact</a></li>
</ul>
<hr style="width:100px;"> <!--nav and insta separate line-->
<div class="insta-logo">
<img title="My Insta account"src="images/insta-logo-svg.svg" alt="Insta profile link">
</div>
</div>
</div>
</div>
<hr>
</body>
</html>
See my attached image for reference
Please read the CSS Comments for explanation:
/* CSS Reset for total control over all padding / margins */
* {
padding: 0;
margin: 0;
display: border-box;
}
body {
height: 100vh;
background-color: black;
font-family: arial;
}
/* Create navbar container */
.navbar {
height: 60px;
width: 100%;
display: flex; /* flex (or Flexbox) divs automatically inner elements into a row */
justify-content: space-around; /* Justify content lets you determine how the inner items behave on an x axis in a Flexbox */
align-items: center; /* Align items lets you determine the alignment of inner elements on a Y axis in a flexbox. In this case, you're centering the items in the middle. */
background-color: black;
color: white;
border-bottom: 1px solid grey;
}
.navbar-logo {
font-size: 30px;
}
.navbar-menu { /* Create a container for the navbar-menu items (excludes things you don't want users to click on_. In this case, this should include your links, divider, and logo */
display: flex;
align-items: center;
}
.navbar-menu ul { /* Align items horizontally again for the link list */
display: flex;
justify-content: center;
list-style: none;
}
.navbar-menu a { /* Basic link styling */
display: inline-block;
margin: 0 10px;
text-decoration: none;
color: white;
transition: all .2s ease;
}
.navbar-menu a:hover {
color: #21abde;
}
/* Line for the divider */
.navbar-menu-divider {
height: 60px;
background-color: grey;
width: .5px;
}
/* Example block for instagram logo. You'll have to either use the CDN from fontawesome.com or downlaod an image of the logo to have the real one */
.ig-logo {
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
margin: 10px;
background-color: grey;
cursor: pointer;
transition: .2s ease;
}
.ig-logo:hover {
color: white;
background: #21abde;
}
<body>
<nav class="navbar">
<div class="navbar-logo">Logo</div>
<div class="navbar-menu">
<ul>
<li>Work</li>
<li>About+Contact</li>
</ul>
<div class="navbar-menu-divider"></div>
<div class="ig-logo">IG</div>
</div>
</nav>
<body>
Welcome to the community.
Remove the right and left margin of the element with class="header", or make it smaller.
Add the following css properties to the element with class="header":
display: flex;
justify-content: space-between;
CSS flex rules are a great way to organize your web layout. In this case, the elements will move away from each other, and they will occupy the whole width of the header.
I'm trying to recreate the nav bar at the top of the google landing page using flexbox, but I'm pretty confused as to how it works. I can't seem to get some of the content to the right of my nav bar, and the other content to the left. My #items are my ul of content for the nav bar, and .left and .right are the respective content that I want to move around, currently, everything is just squished together on the left.
Here is my HTML:
<html>
<head>
<meta charset="UTF-8" />
<title>Google Page</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<!-- CODE HERE-->
<nav class="navbar">
<ul id="items">
<li class="left">About</li>
<li class="left">Store</li>
<li class="right">Gmail</li>
<li class="right">Images</li>
</ul>
</nav>
</body>
</html>
And here is my CSS:
body {
background-color: white;
padding: 0;
margin: 0;
}
#items {
list-style-type: none;
display: flex;
}
.left {
justify-self: flex-start;
}
.right {
justify-self: flex-end;
}
A better way to do this is instead of putting all of your items in one list put them in two separate lists and then style them individually like this:HTML:
<nav>
<ul>
<li>About</li>
<li>Store</li>
</ul>
<ul>
<li>Gmail</li>
<li>Images</li>
<button class="sign-in">Sign In</button>
</ul>
</nav>
CSS:
nav {
display: flex;
justify-content: space-between;
}
nav ul {
list-style-type: none;
padding: 0;
display: flex;
margin-left: 25px;
margin-right: 25px;
}
nav ul {
margin-top: 15px;
}
nav a,
i {
text-decoration: none;
display: block;
padding: 0.5em;
color: #000;
opacity: 0.75;
margin-left: 5px;
}
nav a {
font-size: 13px;
}
.sign-in {
font-weight: bold;
font-size: 13px;
border: 1px solid #4285f4;
background: -webkit-linear-gradient(top, #4387fd, #4683ea);
color: white;
cursor: pointer;
border-radius: 2px;
width: 70px;
margin-left: 10px;
}
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.