I’m currently learning how to code a hamburger menu. I would like to have it aligned in the center in a designated column in a row, and I’m trying to do the same with the links in navigation. However, I can’t get the links to center properly. Below is the code that I have so far:
.grid-container {
display: grid;
grid-template-areas: "header menu";
grid-template-columns: repeat(8, 1fr);
}
.header {
grid-area: header;
grid-column: span 7;
margin: 2px;
background-color: black;
}
.nav-test {
display: flex;
direction: row;
justify-content: space-around;
list-style-type: none;
}
.nav-test a {
color: white;
}
.menu {
display: flex;
grid-area: menu;
grid-column: span 1;
margin: 2px;
background-color: black;
}
<div class="grid-container">
<div class="item header">
<ul class="nav-test">
<li>Home</li>
<li>About Me</li>
<li>Music</li>
<li>Tours</li>
<li>Contact</li>
</ul>
</div>
<div class="item menu"></div>
</div>
My goal is to do the same with the hamburger menu in the last column as well. What is it I’m forgetting to set in order to center the header properly?
Browsers by default add left padding to a ul element, which is pushing the contents of your nav-test list over.
The simplest solution would be to reset the padding:
.nav-test {
padding-left:0px; /* add this */
display: flex;
direction: row;
justify-content: space-around;
list-style-type: none;
}
If you go and inspect the nav-test container you'll see that there's an extra 40px padding on the left of the container. This is the reason that your links aren't centered. To fix this just add padding-left: 0; in your nav-test class. Try running the snippet and see if this fixes things for you.
.grid-container {
display: grid;
grid-template-areas: "header menu";
grid-template-columns: repeat(8, 1fr);
}
.header {
grid-area: header;
grid-column: span 7;
margin: 2px;
background-color: black;
}
.nav-test {
display: flex;
direction: row;
justify-content: space-around;
list-style-type: none;
padding-left: 0;
}
.nav-test a {
color: white;
}
.menu {
display: flex;
grid-area: menu;
grid-column: span 1;
margin: 2px;
background-color: black;
}
<!doctype html>
<html>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="menu_design.css">
<head>
<div class="grid-container">
<div class="item header">
<ul class="nav-test">
<li>Home</li>
<li>About Me</li>
<li>Music</li>
<li>Tours</li>
<li>Contact</li>
</ul>
</div>
<div class="item menu"></div>
</div>
</head>
</html>
As you can see your Nav has some li tags which is inside parent tag ul so what you can do is in your parent element set display: flex; and justify-content: space-around; or justify-content: space-between; to center each element in your nav-bar
.grid-container {
display: grid;
grid-template-areas: "header menu";
grid-template-columns: repeat(8, 1fr);
}
.header {
grid-area: header;
grid-column: span 7;
margin: 2px;
background-color: black;
}
.nav-test {
display: flex;
direction: row;
justify-content: space-around;
list-style-type: none;
padding-left: 0;
}
.nav-test a {
color: white;
}
.menu {
display: flex;
grid-area: menu;
grid-column: span 1;
margin: 2px;
background-color: black;
}
<!doctype html>
<html>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="menu_design.css">
<head>
<div class="grid-container">
<div class="item header">
<ul class="nav-test">
<li>Home</li>
<li>About Me</li>
<li>Music</li>
<li>Tours</li>
<li>Contact</li>
</ul>
</div>
<div class="item menu"></div>
</div>
</head>
</html>
Related
So I am trying to wrap my head around css grid. What confuses me is the 'fr' unit on the row as I inspect the grid on the browser, '1fr . 834px'. I set on the main container, 'grid-template-rows: 1fr 1fr 1fr 1fr'. The grid just overblown. When I tried to put the 'height: 250px' in the header container , the column did change, but the row still hold the value 834px. Thus, there will be a huge white gap to the second row. I want it to be when I put the 'height: 250px' on the main container, the next bottom item will follow and stick to become the next column. How do I fix this ? Please help.
P.S : it has to be done only in grid, no flexbox.
Update : Solution found. Have to put height: 100vh on the container and thats it.
Below is my code:
<!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>Holy Grail Mockup</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="header">
<div class="logo">Header Logo</div>
<div class="menu">
<ul>
<li>header link one</li>
<li>header link two</li>
<li>header link three</li>
<li>header link four</li>
</ul>
</div>
</div>
<div class="sidebar">
<div class="photo">
<p>placeholder for image</p>
</div>
<div class="side-content">Box 1
</div>
<div class="side-content">Box 2
</div>
<div class="side-content">Box 3
</div>
</div>
<div class="nav">
<ul>
<li>Latest Articles</li>
<li>Most Views</li>
<li>Featured</li>
</ul>
</div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
.container {
display: grid;
text-align: center;
grid-template-columns: 1fr 4fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
gap: 4px;
overflow: hidden;
}
.container div {
padding: 15px;
font-size: 32px;
font-family: Helvetica;
font-weight: bold;
color: white;
}
.header {
display: grid;
background-color: #393f4d;
grid-template-columns: 20% 80%;
grid-column: 1/3;
height: 200px;
}
.logo {
display: grid;
justify-content: flex-start;
}
.menu ul,
.menu li {
display: grid;
white-space: nowrap;
align-items: flex-start;
grid-template-columns: repeat(4, 1fr);
font-size: 16px;
list-style: none;
margin-top: 8px;
margin-inline: 115px;
}
.sidebar {
display: grid;
grid-template-rows: repeat(4, 1fr);
background-color: #FF7755;
grid-column: 1/2;
grid-row: 2/4;
gap: 50px;
text-align: center;
}
.sidebar .photo {
display: grid;
align-items: center;
justify-items: center;
background-color: white;
color: black;
font-size: 12px;
font-weight: normal;
border-radius: 10px;
}
.sidebar .side-content {
display: grid;
align-items: center;
justify-items: center;
background-color: white;
color: black;
font-size: 16px;
font-weight: normal;
}
.nav {
display: grid;
background-color: #FF7755;
grid-template-columns: 100%;
grid-column: 2/3;
grid-row: 2/3;
height: 2vh;
}
.nav ul,
.nav li {
display: grid;
grid-auto-flow: column;
font-size: 16px;
text-transform: uppercase;
list-style: none;
}
.article {
display: grid;
background-color: #bccbde;
grid-column: 2/3;
grid-row: 3/4;
}
.article p {
font-size: 18px;
font-family: sans-serif;
color: white;
text-align: left;
}
.article .card {
background-color: #FFFFFF;
color: black;
text-align: center;
}
.card p {
color: black;
font-weight: normal;
font-size: 14px;
}
.card .title {
font-size: 18px;
text-align: center;
}
.footer {
background-color: #393f4d;
}
.footer p {
font-size: 13px;
font-weight: normal;
}
Hope you are all doing great.
I have this code, the header menu sort of work but for some reasons the space between each title is off, I quite tried everything, align-center,self,content , justify-content ... but nothing seems to work, where I am failing ?
I have no idea if it's either Home or Contacts that spacing is completely off
thank you for helping
#import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght#500&display=swap');
body {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
a, u {
text-decoration: none;
}
.wrapper {
min-height: 100vh;
display: grid;
grid-template-columns: repeat(3, auto);
grid-template-rows: auto;
grid-template-areas:
"header"
"main"
"footer";
}
.page-header {
grid-area: header;
height: 12.5vh;
width: 100vw;
background-color: rgb(214, 214, 214);
}
.grid-header {
display: grid;
grid-template-columns: repeat(3, 50px);
grid-template-rows: 2.5em;
display: grid;
justify-content: center;
}
#ph-home {
grid-column: 1/3;
grid-row: 2/3;
}
#ph-blog {
grid-column: 2/3;
grid-row: 2/3;
}
#ph-contacts {
grid-column: 3/3;
grid-row: 2/3;
}
#ph-home>a, #ph-blog>a, #ph-contacts>a {
font-family: 'Ubuntu', sans-serif;
font-size: 120%
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="./css/home.css">
</head>
<body>
<div class="wrapper">
<header class="page-header">
<ul class="grid-header">
<li id="ph-home">
Home
</li>
<li id="ph-blog">
Blog
</li>
<li id="ph-contacts">
Contacts
</li>
</ul>
</header>
</div>
</body>
</html>
You can specify your columns and rows in fractions and force them to take up that percentage of the width of their parents along with grid-template-areas: "#ph-home #ph-blog #ph-contacts" and grid-area on the children. Then add a display: flex on the children of the grid to give them a justify-content property. This will ensure everything is spaced out nicely with no need to add a gap statically in pixels.
On your grid parent:
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: "#ph-home #ph-blog #ph-contacts";
On your grids children:
#ph-home {
display: flex;
justify-content: center;
grid-area: #ph-home;
}
#import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght#500&display=swap');
body {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
a,
u {
text-decoration: none;
}
.wrapper {
min-height: 100vh;
display: grid;
gap: 50px;
grid-template-columns: repeat(3, auto);
grid-template-rows: auto;
grid-template-areas: "header" "main" "footer";
}
.page-header {
grid-area: header;
height: 12.5vh;
width: 100vw;
background-color: rgb(214, 214, 214);
}
.grid-header {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: "#ph-home #ph-blog #ph-contacts";
}
#ph-home {
display: flex;
justify-content: center;
grid-area: #ph-home;
}
#ph-blog {
display: flex;
justify-content: center;
grid-area: #ph-blog;
}
#ph-contacts {
display: flex;
justify-content: center;
grid-area: #ph-contacts;
}
#ph-home>a,
#ph-blog>a,
#ph-contacts>a {
font-family: 'Ubuntu', sans-serif;
font-size: 120%
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="./css/home.css">
</head>
<body>
<div class="wrapper">
<header class="page-header">
<ul class="grid-header">
<li id="ph-home">
Home
</li>
<li id="ph-blog">
Blog
</li>
<li id="ph-contacts">
Contacts
</li>
</ul>
</header>
</div>
</body>
</html>
Try this in the 'header'
display:flex;
justify-content: center;
So I've been trying to overlap grid 2 over grid 1 without using negative margins but I'm unable to do so please help
Here's my code
index.html
<!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>Document</title>
<link rel="stylesheet" href="./styles/styles.css" />
</head>
<body>
<div class="HeaderContainerGrid">
<img src="./svg/background.svg" />
<header>
<h1>Guideline</h1>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
</div>
</body>
</html>
styles.scss
#import './variables';
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
img {
width: 100%;
}
header {
grid-template-columns: 1fr 1fr;
display: grid;
align-items: end;
justify-content: end;
h1 {
display: grid;
height: 100%;
align-items: center;
margin-left: 1em;
}
nav {
height: 100%;
display: grid;
align-items: center;
grid-template-columns: 1fr;
}
ul {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
text-decoration: none;
list-style: none;
}
li {
margin-left: 10px;
margin-right: 10px;
padding: 20px;
text-align: center;
&:hover {
cursor: pointer;
background-color: $secondaryColor;
transition: 0.5s;
color: $onHoverTextColor;
}
}
}
.HeaderContainerGrid {
display: grid;
&:nth-child(1) {
background-color: red;
grid-row: 1 / 2;
z-index: 1
}
&:nth-child(0) {
grid-row: 1 / 2;
z-index: -1
}
}
CodeSandbox URL
Make header position absolute so that it will come out from its normal flow and come over the nearest relative position.
DEMO
header{
position: absolute;
}
.HeaderContainerGrid {
position: relative;
}
I'm trying to create my website as follow:
In here, the logo image overlaps the grid of the navigation bar.
I have also used CSS grid layout to create the navigation bar, but I'm having trouble making the image expand outside of the border.
This is currently what I have:
Basically, I want the background orange image (border) to shrink in the size vertically so I can have the same design as the above.
#main {
display: grid;
height: 100vh;
grid-template-columns: 1fr 1fr 1fr 1.5fr;
grid-template-rows: 0.02fr 0.2fr 0.1fr 0.25fr 0.45fr;
grid-template-areas:
"nav nav nav nav"
"main-heading main-heading main-heading main-heading"
"sub-heading sub-heading sub-heading sub-heading"
"icons icons icons icons"
"images images images contents";
grid-gap: 0.2rem;
}
#navbar {
border-top: 1px solid black;
}
#navbar {
display: inline-block;
grid-area: nav;
background: orange;
border-radius:var(--main-radius);
padding-top: var(--main-padding);
}
#navbar img, header, ul, li {
display: inline-block;
vertical-align: middle;
}
#navbar img {
border-radius: 50%;
margin-left: 20px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
/*display: inline-block;*/
float: right;
margin-top: 25px;
margin-right: 20px;
}
li {
display: inline-block;
padding: 12px;
}
#main-heading {
grid-area: main-heading;
background: yellow;
}
#sub-heading {
grid-area: sub-heading;
background: pink;
}
#icons {
grid-area: icons;
background: lightblue;
}
#images {
grid-area: images;
background: orange;
}
#contents {
grid-area: contents:
background: brown;
}
/*#media only screen and (max-width: 600px) {
#main {
grid-template-columns: 1fr;
grid-template-rows: 0.4fr 0.4fr 2.2fr 1.2 0.5;
grid-template-areas:
"nav"
"sidebar"
"main"
"content1"
"content2"
"content3";
}
}*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive J Web</title>
<link rel="stylesheet" href="Lab04.css">
</head>
<body>
<div id = "main">
<div id = "navbar">
<img src="lens.jpg" alt=lens width=90px height=90px>
<header>
<h3>
Art of Photography
</h3>
</header>
<ul>
<li>Photography</li>
<li>History</li>
<li>Samples</li>
<li>About</li>
</ul>
</div>
<div id = "main-heading">Main-heading</div>
<div id = "sub-heading">Sub-heading</div>
<div id = "icons">Icon</div>
<div id = "images">Images</div>
<div id ="contents">Contents</div>
</div>
</body>
</html>
In order to do the same design, you need to change the position of the logo img as absolute, and give some space to put the logo.
#navbar img {
border-radius: 50%;
margin-left: 20px;
top: -13px;
position:absolute;
}
#main {
display: grid;
height: 100vh;
grid-template-columns: 1fr 1fr 1fr 1.5fr;
grid-template-rows: 0.02fr 0.2fr 0.1fr 0.25fr 0.45fr;
grid-template-areas:
"nav nav nav nav"
"main-heading main-heading main-heading main-heading"
"sub-heading sub-heading sub-heading sub-heading"
"icons icons icons icons"
"images images images contents";
grid-gap: 0.2rem;
}
#navbar {
border-top: 1px solid black;
}
#navbar {
display: inline-block;
grid-area: nav;
background: orange;
border-radius:var(--main-radius);
padding-top: var(--main-padding);
position: relative;
}
#navbar img, header, ul, li {
display: inline-block;
vertical-align: middle;
}
#navbar img {
border-radius: 50%;
margin-left: 20px;
top: -13px;
position:absolute;
}
h3 {
margin-left:120px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
/*display: inline-block;*/
float: right;
margin-top: 25px;
margin-right: 20px;
}
li {
display: inline-block;
padding: 12px;
}
#main-heading {
grid-area: main-heading;
background: yellow;
}
#sub-heading {
grid-area: sub-heading;
background: pink;
}
#icons {
grid-area: icons;
background: lightblue;
}
#images {
grid-area: images;
background: orange;
}
#contents {
grid-area: contents:
background: brown;
}
/*#media only screen and (max-width: 600px) {
#main {
grid-template-columns: 1fr;
grid-template-rows: 0.4fr 0.4fr 2.2fr 1.2 0.5;
grid-template-areas:
"nav"
"sidebar"
"main"
"content1"
"content2"
"content3";
}
}*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive J Web</title>
<link rel="stylesheet" href="Lab04.css">
</head>
<body>
<div id = "main">
<div id = "navbar">
<img src="https://www.allintheloop.com/assets/img/logo-sample.jpg" alt=lens width=90px height=90px>
<header>
<h3>
Art of Photography
</h3>
</header>
<ul>
<li>Photography</li>
<li>History</li>
<li>Samples</li>
<li>About</li>
</ul>
</div>
<div id = "main-heading">Main-heading</div>
<div id = "sub-heading">Sub-heading</div>
<div id = "icons">Icon</div>
<div id = "images">Images</div>
<div id ="contents">Contents</div>
</div>
</body>
</html>
You can also try this solution, u should give your navbar fixed height and change display to flex with align items: center.
https://codepen.io/boutahlilsoufiane/pen/NWbPgra
Never came across this where the first line in a css grid is not flush with the browser window. Don't know where the gap came from but all the other grids on this page works great. I need a logo to sit closer to the edge of the browser window.
below is my html code and the css that goes along with the html.
<menu>
<asp:HyperLink NavigateUrl="~/Default.aspx" runat="server">
<asp:Image ID="imgLogo" CssClass="Logo" runat="server" ImageUrl="~/Images/LogoOrange.png" />
</asp:HyperLink>
<nav>
<ul>
<li>About Us</li>
<li>Services</li>
<li>Online Estimate</li>
<li>Contact Us</li>
</ul>
</nav>
<div class="PhoneNumber">
<asp:Label runat="server" Text="" />
</div>
</menu>
.Logo {
height: 80px;
margin: 5px 25px 0px 5px;
}
menu {
margin: 0;
display: grid;
grid-template-columns: 1fr 5fr 1fr;
min-width: 1024px;
}
menu nav {
grid-column: 2/3;
display: flex;
align-items: center;
justify-content: flex-end;
}
menu nav ul {
margin: 0;
}
menu nav ul li {
display: inline-block;
padding: 15px;
cursor: pointer;
margin: 0px 10px;
color: black;
font-weight: bold;
font-size: 16px;
}
The Browser is adding Padding to your menu just add padding:0 like so
menu {
margin: 0;
padding:0;
display: grid;
grid-template-columns: 1fr 5fr 1fr;
min-width: 1024px;
}
You must remove the display: flex;
menu nav {
grid-column: 2/3;
display: block;
align-items: center;
justify-content: flex-end;
}