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.
Related
I want to keep Home, About and Contact as centered and make "Account" and "Menu" be aligned to the right side without shifting/moving the other 3 to the left which is what's happening now.
I tried using float: right to make it align to the right but this doesn't seem to work properly.
My whole code might be wrong as well so feel free to correct it, thank you.
For context, I'm trying to replicate this design on this image. :
Thank you for your help in advance.
/* Navbar Customization */
.navbar ul {
list-style: none;
background: black;
text-align: center;
padding: 0;
margin: 0;
justify-content: center;
display: flex;
}
.navbar li {
display: inline-block;
}
/* Text Links */
.navbar a {
text-decoration: none;
color: #fff;
width: 100px;
display: block;
padding: 10px;
font-size: 17px;
font-family: Arial, Helvetica, sans-serif;
transition: 0.4s;
}
.navbar a:hover {
background: rgb(255, 255, 255);
transition: 0.6s;
}
.navbar-right {
float: right;
justify-content: right;
}
<!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="stylesheet" href="NavigationBar/styles.css">
<link rel="stylesheet" href="website.css">
<script src="NavigationBar/script.js" defer></script>
<title>FoodLore</title>
</head>
<body>
<div class="navbar">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<div class="navbar-right">
Account
Menu
</div>
</div>
</body>
</html>
So I thought the best way to approach this was to use flexbox and have three child items: navbar-left, navbar-right, navbar-center. That way you can simply set the navbar container to flex-position: space-between. For navbar-left, if you do not want any content, you can just leave it as empty.
It is also important that you set all child items to the same width so that there is equal spacing between all three navbar sections.
You can have a look at the code here: https://codesandbox.io/s/happy-noyce-042i2d?file=/index.html
And preview it here: https://042i2d.csb.app/
Well, I see you have two ways
You can use display: flex on the .nav element with CSS attribute justify-content: space-between
or you can use display: block on the .nav element while using float: right on .navbar-right element.
Here is how to implement the first way:
I have edited your CSS code just a little bit
<style type="text/css">
*{
box-sizing: border-box;
}
body{
margin: 0px;
}
.navbar{
background: rgba(10, 10, 10, 1);
padding: 10px;
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
flex-direction: row;
align-items: center;
}
.navbar ul {
list-style: none;
padding: 0;
margin: 0;
}
.navbar li {
display: inline-block;
}
.navbar a {
text-decoration: none;
color: rgba(255, 255, 255, 1);
transition: 0.4s;
font-size: 17px;
font-family: Arial, Helvetica, sans-serif;
border-radius: 20px;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
}
.navbar a:hover {
color: rgba(100, 100, 100, 1);
background: rgba(255, 255, 255, 1);
}
</style>
bonus: you can benefit alot if you use front-end library, example: Bootstrap
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>
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>
<!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;
}
My second question here.
I was able to make this work using CSS without flexbox.
I pasted the code for above here:
https://codepen.io/kkpm/pen/MWgdOZE
html,
body {
margin: 0px;
padding: 0px;
}
nav {
height: 60px;
background-color: maroon;
vertical-align: middle;
}
#links {
float: right;
line-height: 60px;
}
#links li {
display: inline-block;
}
#links li a {
display: table-cell;
vertical-align: middle;
height: auto;
padding: 1%;
padding-right: 20px;
padding-left: 28px;
color: white;
text-decoration: none;
}
#links li a:hover {
display: table-cell;
vertical-align: middle;
height: auto;
padding: 1%;
padding-right: 20px;
padding-left: 28px;
background-color: blue;
color: white;
text-decoration: none;
}
#links ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#logo {
float: left;
}
HTML below
<!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>Portfolio</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<nav id="navbar">
<div id="logo"><img src="flag.JPG" alt="" height="60px" /></div>
<div id="links">
<ul>
<li>Welcome</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</nav>
<section id="welcome">Hi!</section>
</body>
</html>
The problem with the above code is that I eyeballed things by adjusting the px. I want to center the <li> text vertically at all times while having the blue box area around it fill up, for lack of a better term to describe it, the cell no matter what.
How do I get the same result using flexbox (or any other method) without using javascript to format the <ul>/<li> elements?
It's driving me crazy trying to do this. I searched Google thoroughly. I am having a difficult time, however, because my understanding of the flexbox is weak.
Some things I've tried:
I set padding and margin to 0px for *
I set box-sizing to border-box for HTML
I set nav to 60px
then I tried to set nav li to
display: flex;
justify-content: flex-end;
for the logo div I put it as position fixed and justify-content: flex-start
I read this site trying to format this https://css-tricks.com/snippets/css/a-guide-to-flexbox/
The problem is I can't get the links to the center and the blue-highlighted section to highlight as it should. I'm very confused with flexbox and if someone could please guide me step by step his/her thought process as to how to get below result using flexbox, I would truly appreciate it. I will study your answer over and over again until I master how to create this fixed navigation bar.
You can use display: flex; and then apply align-items: center; to get elements vertically centred. This would be rather a cleaner approach over using floats
html,
body {
margin: 0px;
padding: 0px;
}
nav {
background-color: maroon;
display: flex;
align-items: center;
}
#logo {
display: flex;
flex-grow: 1;
padding-left: 0.5em;
}
#logo img {
max-height: 30px;
}
#links ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#links li {
display: inline-block;
padding: 1em;
}
#links li:hover {
background: blue;
}
#links li a {
color: white;
text-decoration: none;
}
<nav id="navbar">
<div id="logo">
<img src="data:image/png;base64,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"
alt="" />
</div>
<div id="links">
<ul>
<li>Welcome</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</nav>
<section id="welcome">Hi!</section>