Participant

Answered

Trying to align both icon and text on the same level...

Forum|Forum|6 years ago
April 2, 2020
1 reply
1126 views

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home Page</title>
<link href="Homepage.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="Homepage.js"></script>
</head>

<body>
	<div class="TitleHome">
		<h1>WELCOME TO MY PERSPECTIVE</h1>
	
<div id="mySidenav" class="sidenav">
  <a href="javascript&colon;void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="Homepage.html">Home</a>
  <a href="Blog.html">Blog</a>
  <a href="Photography.html">photography</a>
  <a href="Contact Us.html">Contact us</a>
  <a href="Gallery.html">Gallery</a>
</div>
	<div class="nav-icon" onclick="openNav()">
  <div></div>
</div>
</div>
</body>
</html>

Hello,

I need some help with trying to align the hamburger icon and the padding-box to be aligned together.

if you can help me it would be appreciated.

This topic has been closed for replies.

Correct answer osgood_

Re-structure your code as below - ie wrap your 'nav-icon' code and your 'h1' code in a div with the class of 'welcome':

<div class="welcome">

<div class="nav-icon" onclick="openNav()">
<div></div>
</div>
<h1>WELCOME TO MY PERSPECTIVE</h1>

</div>


<div id="mySidenav" class="sidenav">
<a href="javascript&colon;void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="Homepage.html">Home</a>
<a href="Blog.html">Blog</a>
<a href="Photography.html">photography</a>
<a href="Contact Us.html">Contact us</a>
<a href="Gallery.html">Gallery</a>
</div>

</div>

Then add to your css:

.welcome {
display: flex;
align-items: center;
}

O

osgood_

Legend

Can you also post in the forum your css and js code so we can see what you have so far.

I

ItsBloodRoseAuthor

Participant

@charset "utf-8";
body {
background-color: #3AAFA9
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
display: block;
align-content: flex-end;
box-shadow: 0 4px 8px 0;
}

.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}

.sidenav a:hover {
color: #f1f1f1;
}

.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}

#main {
transition: margin-left .5s;
padding: 16px;
}

@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}

.nav-icon {
margin: 1em;
width: 40px;
}

.nav-icon:after,
.nav-icon:before,
.nav-icon div {
background-color: #fff;
border-radius: 3px;
content: '';
display: block;
height: 5px;
margin: 7px 0;
transition: all .2s ease-in-out;
box-shadow: 0 2px 4px 0;
}

.nav-icon:hover:before {
transform: translateY(12px) rotate(135deg);
}

.nav-icon:hover:after {
transform: translateY(-12px) rotate(-135deg);
}

.nav-icon:hover div {
transform: scale(0);
}

.TitleHome {
background-color: #2B7A78;
padding: 5px;
display:block;
font-family: Impact, Charcoal, sans-serif;
font-size: 25px;
box-shadow: 0 4px 8px 0;
}

.TitleHome h1 {
color: white;
text-shadow: 0 1px 10px #000000;
align-content: center;
text-align: center;
}

-----------------------------------------------------------------

function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
x.classList.toggle("change");
}

function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}

O

osgood_Correct answer

Legend

Re-structure your code as below - ie wrap your 'nav-icon' code and your 'h1' code in a div with the class of 'welcome':

<div class="welcome">

<div class="nav-icon" onclick="openNav()">
<div></div>
</div>
<h1>WELCOME TO MY PERSPECTIVE</h1>

</div>


<div id="mySidenav" class="sidenav">
<a href="javascript&colon;void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="Homepage.html">Home</a>
<a href="Blog.html">Blog</a>
<a href="Photography.html">photography</a>
<a href="Contact Us.html">Contact us</a>
<a href="Gallery.html">Gallery</a>
</div>

</div>

Then add to your css:

.welcome {
display: flex;
align-items: center;
}

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded