Skip to main content
I
ItsBloodRose
Participant
April 2, 2020
Answered

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

  • April 2, 2020
  • 1 reply
  • 1118 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="TitleHome">

 


<div class="welcome">


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

 

</div>
<!-- end welcome -->

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

 

 

 

Then add to your css:

 

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

1 reply

O
osgood_
Legend
April 2, 2020

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

I
ItsBloodRoseAuthor
Participant
April 2, 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";
}

O
osgood_
Legend
April 2, 2020

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


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.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices