Div is moving when I hide an element and show another element
Question
I am working on a mobile version of a nav bar so I have the hamburger menu and when I click on it it pulls out the menu. The hamburger icon is hidden with Javascript and CSS and then Javascript shows an 'X' icon so that the user can close the menu and go back to the webpage. But when the 'X' icon shows up it moves the title a little to the left and down. I've checked margins and padding and borders and its just empty space above the title. What can I do to make it so my title doesn't move? The empty picture is the 'X' icon.
var main = function() { /* Push the nav over by 285px over */ $('.hamburger').click(function() { $('#menu').animate({ left: "0px" }, 200); $('.hamburger').hide(); $('.close').show(); }); /* Then push them back */ $('.close').click(function() { $('#menu').animate({ left: "-100%" }, 200); $('.hamburger').show(); $('.close').hide(); }); }; $(document).ready(main);
@font-face { font-family: Call_of_Ops_Duty; src: url('../fonts/Call_of_Ops_Duty.otf'); } body { margin:0; } .header { background-color:#0D47A1; width:100%; height:56px; line-height:56px; display:block; position:absolute; } .hamburger { position: relative; display: inline-block; width: 1.25em; height: 0.8em; margin-right: 0.3em; border-top: 0.2em solid #fff; border-bottom: 0.2em solid #fff; z-index:8; } .hamburger:before { content: ""; position: absolute; top: 0.3em; left: 0px; width: 100%; border-top: 0.2em solid #fff; } .close { display:inline-block; position: relative; left:5%; top:7%; height:40px; width:40px; display:none; } /*.close img { position:relative; width:40px; height:40px; display:none; }*/ #heading { position:relative; display:inline-block; left:15%; top:0; font-family: Call_of_Ops_Duty; color:white; font-size:18px; } #heading font { font-size:14px; } span { padding-left:2%; left:7%; } #menu { position:fixed; top:56px; left:-100%; width:100%; height:100%; z-index:10; background-color:gray; } #menu ul { top:25%; list-style:none; padding-left:0; } #menu a { text-decoration:none; color:black; } #menu li { font-family: Call_of_Ops_Duty; font-size:24px; text-align:center; } #menu li:first-child { top:56px; }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="UTF-8"> <link type="text/css" rel="stylesheet" href="css/header.css"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="js/header.js"></script> <body> <div class="header"> <span class="hamburger"></span> <img class="close" src="img/X.png"> <div id="heading"> Title </div> <div id="menu"> <ul> <li><a href="CellHome.php">Home</a></li> <li><a href="CellWhyroot.php">Root</a> <ul> <li><a href="CellBestRootApps.php">Root Apps</a></li> </ul> </li> <li><a href="jailbreak.php">Jailbreak</a> <ul> <li><a href="Jailbreakapp.php">Jailbreak Apps</a></li> </ul> </li> <li><a href="contact.php">Contact Me</a></li> <!--<li><a href="CellLogin.php">Appointment</a></li>--> </ul> </div> </div> </body> </html>
2 answers
solution1
2 ACCPTED 2015-07-07 18:14:16
Changing heading to inherit seems to work.
#heading {
position: inherit;
}
solution2
0 2015-07-07 19:13:51
#heading {
vertical-align: top;
}
Would do the trick as well.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.