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

Report · Apr 02, 2020

<!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.

Report · Apr 02, 2020

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

Report · Apr 02, 2020

@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";
}

Report · Apr 02, 2020

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;
}

Report · Apr 02, 2020

Thank you so much you have no idea how thankful I am.

Report · Apr 02, 2020

No problem, you are welcome.

You dont know how thankful l am that you appear to be trying to produce your own code rather than becoming dependent on bloated and unecessary frameworks, javascript libraries like Bootstrap and jQuery. Stay away from them, you will eventually reap the rewards for not trying to cut corners.

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

1 Correct answer