Highlighted

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

Community Beginner ,
Apr 02, 2020

Copy link to clipboard

Copied

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

 
 
 
 
 

websiteissue.png

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

TOPICS
Code, How to

Views

734

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

Community Beginner ,
Apr 02, 2020

Copy link to clipboard

Copied

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

 
 
 
 
 

websiteissue.png

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

TOPICS
Code, How to

Views

735

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Apr 02, 2020 0
LEGEND ,
Apr 02, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 02, 2020 0
Community Beginner ,
Apr 02, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 02, 2020 0
LEGEND ,
Apr 02, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 02, 2020 0
Community Beginner ,
Apr 02, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 02, 2020 1
osgood_ LATEST
LEGEND ,
Apr 02, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 02, 2020 0