• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

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

Community Beginner ,
Apr 02, 2020 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

TOPICS
Code , How to

Views

913

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

correct answers 1 Correct answer

LEGEND , Apr 02, 2020 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="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">photogr

...

Votes

Translate

Translate
LEGEND ,
Apr 02, 2020 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.

Votes

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
community guidelines
Community Beginner ,
Apr 02, 2020 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";
}

Votes

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
community guidelines
LEGEND ,
Apr 02, 2020 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;
}

Votes

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
community guidelines
Community Beginner ,
Apr 02, 2020 Apr 02, 2020

Copy link to clipboard

Copied

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

Votes

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
community guidelines
LEGEND ,
Apr 02, 2020 Apr 02, 2020

Copy link to clipboard

Copied

LATEST

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.

Votes

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