I am currently creating a website that is vertically scroll-able and has a navbar on the top as shown in the image. The navbar gets bigger when the user is not on the very top and this is implemented as:
if (window.scrollY == nav.offsetTop) {
document.querySelector('.nav').classList.add("largerNavbar");
} else {
document.querySelector('.nav').classList.remove("largerNavbar");
}
In javascript, so, it just adds a new class that has larger height to the navbar. But the problem is, it hides the content of the 2nd row. The 2nd row's style looks like:
div#firstRow {
padding: 10px;
width: 100%;
//position: relative;
margin:0 auto;
line-height: 1.4em;
background-color: green;
}
I commented out the position: relative because then the 2nd row will hide the navbar.
What is the problem here?
EDIT:
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
height: 100%;
font: 100% $font-stack;
color: $primary-color;
margin: 0px;
.largerNavbar .nav{
font-size: 20px;
height: 90px;
}
.largerNavbar #firstRow {
font-size: 20px;
height: 90px;
}
.onSection {
background-color: gray;
}
.nav{
color: white;
//vertical center
display: flex;
align-items: center;
font-size: 12px;
height: 70px;
overflow: hidden;
background-color: #333;
transition:all 1s;
-webkit-transition:all 1s;
.menus {
position: absolute;
right: 0px;
padding: 10px;
}
.logo {
position: absolute;
left: 0px;
padding: 10px;
}
}
.stationary {
position: fixed;
top: 0;
width: 100%;
}
.nav a {
color: white;
float: left;
display: block;
text-align: center;
padding: 14px;
text-decoration: none;
}
div#firstRow {
padding: 10px;
width: 100%;
//position: relative;
margin:0 auto;
line-height: 1.4em;
background-color: green;
}
div#secondRow {
padding: 10px;
//position: relative;
margin:0 auto;
line-height: 1.4em;
background-color: blue;
}
div#thirdRow {
padding: 10px;
//position: relative;
margin:0 auto;
line-height: 1.4em;
background-color: yellow;
}
div#lastRow {
height: 100px;
background-color: black;
}
}
<div class="logo">
HOME
</div>
<div class="menus">
<span>About</span>
<span>Archive</span>
<span>Projects</span>
<span>Contact</span>
</div>
</div>
<div id="firstRow">
<a id="about" class="smooth"></a>
</div>
<div id="secondRow">
<a id="history"></a>
</div>
<div id="thirdRow">
<a id="contact"></a>
</div>
<div id="fourthRow">
<a id="contact"></a>
</div>
<div id="lastRow">
<a id="footer"></a>
footer goes here
</div>
<script src="bundle.js" type="text/javascript"></script>
I'm guessing that you gave the navbar either absolute or fixed positioning.
If that's the case, I would try adding that largerNavbar class to an element that is a parent to both your navbar and your green container there, and then have some CSS selectors that alter both the navbar's height property and the green container's padding-top property at the same time.
So something like this:
.largerNavbar .nav {
...
height: 120px; // Use the same height for both
}
.largerNavbar #firstRow {
...
padding-top: 120px // Use the same height for both
}
Add some CSS transitions and it should look great. Good luck!
Related
My submit button shows up in very different places when i'm viewing it on different screens. I understand the usage of media queries helps with this, but I just want the items to show up in generally the same area.
I've tried using percentages for my dimensions, but the problems persists. Any recommendation? I've had luck with percentages in the past, I'm not sure why they aren't working for me with this specific problem. Is there something else wrong?
Here is my code (the styling for the submit button is at the bottom of the styling sheet):
html {
font-family: 'PT Sans', Helvetica, Arial, sans-serif;
background: #f1f2f6;
}
body {
background: #f1f2f6;
margin: 0;
padding: 0;
}
.Class-Name-Bar {
position: relative;
height: 270px;
width: 75%;
background-color: #ffffff;
margin: auto;
margin-top: 35px;
border-radius: 5px;
}
.Class-Name {
position: absolute;
height: 220px;
background-image: linear-gradient(to bottom, rgba(10, 10, 25, .85), rgba(0, 0, 0, 0.85)), url(https://miro.medium.com/max/2656/1*d0Qd8OUx_TUxG7N6H991ew.jpeg);
width: 100%;
border-radius: 5px 5px 0 0;
}
.Class-Name h1 {
text-align: center;
font-size: 60px;
margin-top: 50px;
font-weight: 200;
color: #ffffff;
}
.Class-Name p {
text-align: center;
font-size: 20px;
color: #f1f2f6;
margin: -20px;
}
#navigation {
position: absolute;
}
div#navigation ul li {
display: inline-block;
margin-top: 86%;
margin-left: 25px;
color: #333333;
font-size: 20px;
list-style: none;
}
div#navigation ul li a {
text-decoration: none;
color: #000000;
}
div#navigation ul li a:hover {
text-decoration: none;
color: #ff4757;
}
.post-area-wrapper {
position: relative;
height: 120px;
background-color: #ffffff;
margin: 20px;
width: 35%;
margin-left: 52.5%;
border-radius: 5px;
}
.post-area {
position: relative;
width: 95%;
margin: 2%;
}
input[type=post] {
padding: 3%;
width: 95%;
border: none;
font-size: 18px;
background-color: #f1f2f6;
margin-top: 3%;
}
.submit {
position: absolute;
border: none;
margin-left: 83%;
padding: 5px 16px;
border-radius: 25px;
background-color: #D3D3D3;
}
<html>
<head>
<link href="~/css/ClassReview.css" rel="stylesheet">
</head>
<body>
<div class="Class-Name-Bar">
<div class="Class-Name">
<h1> Calculus</h1>
<p> MA2500</p>
</div>
<div id="navigation">
<ul>
<li>Notes</li>
<li>Tests</li>
<li>Quizlets</li>
</ul>
</div>
</div>
<div class="description">
</div>
<div class="post-area-wrapper">
<form>
<div class="post-area">
<input type="post" name="post" placeholder="Review this class, tell us how you really feel..">
</div>
<button type=submit class="submit">Submit</button>
</form>
</div>
</body>
</html>
In order for your submit button to be at the same place all the time you have to either define the exact position for it using top left right bottom or using the below code without defining the position absolute you can simply define it as a block and then give it margin-left:auto which will position it on the right side of the div and give it a small margin from the right side.
.submit {
display:block;
border: none;
margin-right:10px;
margin-left:auto;
padding: 5px 16px;
border-radius: 25px;
background-color: #D3D3D3;
}
https://github.com/blakeschollmeyer/Portfolio
This is a link to my repository. I can't figure out how to get the social media (a tags) to remain at the center and bottom of the home page in the "footer".
#import 'http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css';
html, body {
margin: 0;
padding: 0;
/* Can set a % height on our container div later */
height: 100%;
font-family: "Ubuntu", "Courier New", "Times New Roman", "sans-serif";
}
h1 {
font-size: 24px;
margin: 0;
}
p {
font-size: 12px;
margin: 0;
padding: 20px;
}
.container {
/* Ensures full height of screen */
min-height: 100%;
margin: 0;
padding: 0;
/* Allows to position elements inside later */
position:relative;
}
#header {
}
#body {
/* Height of the footer */
padding-bottom: 250px;
}
/* DECIDE WHETHER TO USE OR NOT FOR PARAGRAPH TEXT (NOT CURRENTLY IN USE) */
.content {
width: 90%;
margin: 4em auto;
line-height: 30px;
text-align: justify;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #fff;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.text-container {
/* Used for centering h1 and p tags inside the parallax container */
color: white;
text-align: center;
padding: 150px 0px 0px 0px;
}
#parallax-1 {
height: 100vh;
width: 100%;
background-image: url(images/image0.jpeg);
background-size: cover;
/* Creates the parallax effect */
background-attachment: fixed;
}
#parallax-2 {
height: 100vh;
width: 100%;
background-image: url(images/image2.jpeg);
background-size: cover;
background-attachment: fixed;
}
#parallax-3 {
height: 100vh;
width: 100%;
background-image: url(images/image3.jpeg);
background-size: cover;
background-attachment: fixed;
}
#parallax4 {
height: 100vh;
width: 100%;
background-image: url(images/image4.jpeg);
background-size: cover;
background-attachment: fixed;
}
#parallax5 {
height: 100vh;
width: 100%;
background-image: url(images/image5.jpeg);
background-size: cover;
background-attachment: fixed;
}
.footer {
position: absolute;
/* Moves footer div to the bottom of the container div */
bottom: 0;
width: 100%;
/* If changed, do so with #body also */
height: 250px;
}
.footer a {
text-decoration: none;
border-radius: 7.5px;
font-size: 40px;
margin: 10px;
display: flex;
width: 60px;
height: 60px;
justify-content: center;
align-items: center;
float: left;
transition: 0.5s all;
cursor: pointer;
}
.footer a:hover {
margin-top: -10px;
}
.in {
color: white;
background: #0984e3;
}
.git {
color: white;
background: #2d3436;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- PAGE CONTAINER -->
<div id="container">
<!-- HEADER -->
<div id="header">
<header>
<nav>
<div class="logo">
LOGO
</div>
<div>
<ul>
<li>Home</li>
<li>About Me</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
</div>
<!-- BODY -->
<div id="body">
<div id="parallax-1" class="text-container">
<h1>Blake Schollmeyer</h1>
<p>Front End-Web Developer | Co-Owner of BrandNewAgain.com</p>
</div>
<div id="parallax-2">
<p></p>
</div>
<div id="parallax-3">
<p></p>
</div>
</div>
<!-- FOOTER -->
<div class="footer">
<footer>
<nav>
<a class="in ion-social-linkedin" href="https://www.linkedin.com/in/blake-schollmeyer-717a45142"></a>
<a class="git ion-social-github" href="https://github.com/blakeschollmeyer"></a>
</nav>
</footer>
</div>
</div>
<!-- CONTAINER END -->
<!-- jQuery -->
<script type="text/javascript">
// Menu-toggle button
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
});
// Scrolling Effect
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
});
</script>
You need to make the whole footer a flexbox, not just the a tags.
.footer {
display: flex;
align-items: flex-end;
justify-content: center;
}
Adding
.footer nav {
bottom: 0px;
}
Does the trick. You can't enclose a fixed element inside another absolute element, because a fixed is already an absolutely positioned element.
html, body {
margin: 0;
padding: 0;
/* Can set a % height on our container div later */
height: 100%;
font-family: "Ubuntu", "Courier New", "Times New Roman", "sans-serif";
}
h1 {
font-size: 24px;
margin: 0;
}
p {
font-size: 12px;
margin: 0;
padding: 20px;
}
.container {
/* Ensures full height of screen */
min-height: 100%;
margin: 0;
padding: 0;
/* Allows to position elements inside later */
position:relative;
}
#header {
}
#body {
/* Height of the footer */
padding-bottom: 250px;
}
/* DECIDE WHETHER TO USE OR NOT FOR PARAGRAPH TEXT (NOT CURRENTLY IN USE) */
.content {
width: 90%;
margin: 4em auto;
line-height: 30px;
text-align: justify;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #fff;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.text-container {
/* Used for centering h1 and p tags inside the parallax container */
color: white;
text-align: center;
padding: 150px 0px 0px 0px;
}
#parallax-1 {
height: 100vh;
width: 100%;
background-image: url(images/image0.jpeg);
background-size: cover;
/* Creates the parallax effect */
background-attachment: fixed;
}
#parallax-2 {
height: 100vh;
width: 100%;
background-image: url(images/image2.jpeg);
background-size: cover;
background-attachment: fixed;
}
#parallax-3 {
height: 100vh;
width: 100%;
background-image: url(images/image3.jpeg);
background-size: cover;
background-attachment: fixed;
}
#parallax4 {
height: 100vh;
width: 100%;
background-image: url(images/image4.jpeg);
background-size: cover;
background-attachment: fixed;
}
#parallax5 {
height: 100vh;
width: 100%;
background-image: url(images/image5.jpeg);
background-size: cover;
background-attachment: fixed;
}
.footer {
position: absolute;
/* Moves footer div to the bottom of the container div */
bottom: 0;
width: 100%;
/* If changed, do so with #body also */
height: 250px;
}
.footer a {
text-decoration: none;
border-radius: 7.5px;
font-size: 40px;
margin: 10px;
display: flex;
width: 60px;
height: 60px;
justify-content: center;
align-items: center;
float: left;
transition: 0.5s all;
cursor: pointer;
}
.footer nav {
bottom: 0px;
}
.footer a:hover {
margin-top: -10px;
}
.in {
color: white;
background: #0984e3;
}
.git {
color: white;
background: #2d3436;
}
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- PAGE CONTAINER -->
<div id="container">
<!-- HEADER -->
<div id="header">
<header>
<nav>
<div class="logo">
LOGO
</div>
<div>
<ul>
<li>Home</li>
<li>About Me</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
</div>
<!-- BODY -->
<div id="body">
<div id="parallax-1" class="text-container">
<h1>Blake Schollmeyer</h1>
<p>Front End-Web Developer | Co-Owner of BrandNewAgain.com</p>
</div>
<div id="parallax-2">
<p></p>
</div>
<div id="parallax-3">
<p></p>
</div>
</div>
<!-- FOOTER -->
<div class="footer">
<footer>
<nav>
<a class="in ion-social-linkedin" href="https://www.linkedin.com/in/blake-schollmeyer-717a45142"></a>
<a class="git ion-social-github" href="https://github.com/blakeschollmeyer"></a>
</nav>
</footer>
</div>
</div>
<!-- CONTAINER END -->
<!-- jQuery -->
<script type="text/javascript">
// Menu-toggle button
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
});
// Scrolling Effect
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
});
</script>
My website is working fine, except for my <a href="..."> links.
They work when I don't have a jQuery function in there. When I do have the jQuery function they don't work.
My code:
<html>
<head>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-family: Calibri, sans-serif;
text-align: center;
}
.hidden {
display: none;
}
.background-wrap {
position: fixed;
z-index: -1000;
width: 100%;
height: 100%;
overflow: hidden;
top: 0;
left: 0;
}
#video-bg-elem {
position: absolute;
top: 0;
left: 0;
min-height: 100%;
min-width: 100%;
background-size: 100%
}
.content {
position: absolute;
width: 100%;
min-height: 100%;
left: 0;
bottom: 0;
top: 0;
right: 0;
margin: auto;
z-index: 1000;
}
.content h1 {
text-align: center;
font-size: 65px;
text-transform: uppercase;
font-weight: 300;
color: #fff;
padding-top: 18%;
margin-bottom: 10px;
}
.content p {
text-align: center;
font-size: 20px;
letter-spacing: 3px;
color: #aaa;
}
.box {
width: 200px;
-webkit-transition: all .2s;
background: #e3e3e3;
line-height: 50px;
text-align: center;
font-weight: bold;
color: #333;
border-radius: 5px;
box-shadow: 0px 0px 2px rgba(0, 0, 0, .5), 1px 1px 5px rgba(0, 0, 0, .3);
cursor: pointer;
}
.box:hover {
background: #333;
color: #e3e3e3
}
nav > ul > li {
display: inline;
text-align: center;
color: white;
margin: 0 auto;
overflow: hidden;
font-size: 20px;
padding: 1em;
}
nav > ul > li.active {
text-decoration: underline;
}
a {
text-decoration: none;
color: inherit;
}
</style>
</head>
<body>
<br>
<nav>
<ul>
<li class="active">Home</li>
<li><a href="producten.html">Assortiment<a></li>
<li>Contact</li>
</ul>
</nav>
<div class="background-wrap">
<video id="video-bg-elem" preload="auto" autoplay="true" loop="loop" muted="muted">
<source src="video.mp4" type="video/mp4"> Video not supported
</video>
</div>
<script>
$(document).ready(function() {
$('.hidden').fadeIn('slow').removeclass('.hidden')
});
</script>
<center>
<div class="hidden">
<div class="content">
<h1>OortjesShop.nl</h1>
<p id="test">De webwinkel voor al jouw oortjes en koptelefoons!</p>
<br>
<br>
<div class="box">Bekijk ons assortiment</div>
</div>
</div>
</center>
</body>
</html>
The weird thing is that my <a href="..."> on the box does work, but the one on my menu doesn't.
When I remove the jQuery function it does work.
Your style for h1 is overlapping the navigation,just put it in your css then see the changes.
nav {
float: left;
position: relative;
width: 100%;
z-index: 9999;
}
Thanks
Your .content is positioned absolutely so it's likely covering up your navigation bar which does not allow anything to be clicked (even if it doesn't appear to be covered).
.content {
position: absolute;
width: 100%;
min-height: 100%;
left: 0;
bottom: 0;
top: 0;
right: 0;
margin: auto;
z-index: 1000;
}
When jQuery isn't included, that content is hidden which would explain why it works then. Perhaps adjust/remove that style to see if the issue persists.
Your "content" block is z-indexed, but your menu is not. So, when your jQuery fires and reveals the content, it ends up z-indexed over the top of your menu. You have two choices. Either add:
pointer-events: none;
..to your content background so that you can click through the layer (though this may impact click events within that container), or you need to give your menu a position:absolute and a z-index higher than your "content" div.
you got a typo in the second link of your menu:
<a href="producten.html">Assortiment<a>
youre not closing it with </a>
AND
as #Timbal stated
your h1 is overlapping your nav, just put to your nav an higher z-index than z-index of h1:
nav {
position: relative;
z-index: 1001;
}
What I want to do is have a fixed header that has the nice "shrinking effect" when you scroll down and resizes the content within - that's pretty simple and I have followed tutorials to help me do that.
Now what I want to do is to have elements APPEAR when I scroll down; for example:
When the user scrolls down, the menu hides the elements in the top left (links) and then makes a logo appear. A search bar also appears in the middle. I can do the CSS for these and set 'display:none', but I would like for the scroll down to display them, and then set the other elements to hidden.
Keep in mind that when I scroll back to the top, I would need for the original elements to re-appear and then hide the search and logo.
This is the code I have for getting the fixed header to work (it's ugly but it works in a basic form):
header {
text-align: center;
font-size: 1.4em;
line-height: 50px;
height: 70px;
background: #323232;
color: #fff;
font-family:'Open Sans', sans-serif;
/* set animation */
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
header.fixed {
position: fixed;
font-size: 14px;
line-height: 48px;
height: 40px;
width: 100%;
background: #323232;
text-align: left;
padding-left: 20px;
}
header.logo {
width: 10px;
height: 10px;
background-color: #red;
position: fixed;
float: left;
}
.content {
height: 2000px;
width: 100%;
background-color: #fff;
padding: 25px;
}
<body>
<!-- our markup -->
<header>
<h1>Header</h1>
</header>
<!-- an image for demonstration purposes -->
<div class="content">Site Content</div>
<!-- import jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- write script to toggle class on scroll -->
<script>
$(window).scroll(function() {
if ($(this).scrollTop() > 1) {
$('header').addClass("fixed");
} else {
$('header').removeClass("fixed");
}
});
</script>
</body>
Here is a very quick version of what you're looking for. Still need to style the right "links". Just a matter of toggling what is and isn't seen:
(Demo)
$(window).scroll(function () {
if ($(this).scrollTop() > 1) {
$('header').addClass("fixed");
$('.mLeft').fadeOut();
$('.logo, .search').fadeIn();
} else {
$('header').removeClass("fixed");
$('.mLeft').fadeIn();
$('.logo, .search').hide();
}
});
header {
text-align: center;
font-size: 1.4em;
line-height: 50px;
height: 70px;
background: #323232;
color: #fff;
font-family:'Open Sans', sans-serif;
/* set animation */
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
header.fixed {
position: fixed;
font-size: 14px;
line-height: 48px;
height: 40px;
width: 100%;
background: #323232;
text-align: left;
}
.search {
display: none;
position: fixed;
left: 190px;
top: 0;
}
DIV.logo {
display: none;
padding: 5px;
background-color: red;
position: fixed;
float: left;
left: 20px;
top: 0;
}
.mLeft {
float: left;
}
.mRight {
float: right;
}
.content {
height: 2000px;
width: 100%;
background-color: #fff;
padding: 25px;
}
I have 5 social media buttons in a row, 2 of which have menus which are triggered by jquery slidetoggle. The problem is, that when the twitter button is clicked it rearranges the icons as the menu appears and knocks them all out of place. How do i prevent this?
Here is my code:
$(".button").click(function() {
$(this).closest('.comment').find(".box").toggle();
});
#icons {
width: 450px;
padding: 0px!important;
}
.comment {
width: 140px;
float: right;
}
.button {
width: 25px;
display: inline;
margin-right: 5px;
vertical-align: top!important;
height: 25px;
}
.box {
margin-top: -20px;
width: 25px;
}
.box ul {
width: 80px;
height: 35px;
padding: 10px;
background-color: #fff;
}
ul.tw {
border: 0px;
}
li.normal {
margin-right: 25px!important;
width: 80px;
}
li.tw {
margin-right: 60px;
width: 80px;
}
#hidden {
display: none;
}
li {
padding: 0!important;
list-style-type: none;
float: right;
}
a {
padding: 0 !important;
font-family: Arial;
font-size: 12px !important;
text-decoration: underline !important;
color: #000000 !important;
padding-left: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<body>
<div id="icons">
<div class="comment">
<div class="button">
<img src="http://devjohnson.com/skin/frontend/dJTheme/default/images/facebook_icon.png">
</div>
<div class="box" id="hidden">
<ul class="normal">
<li class="normal">DocJohnson
</li>
<li class="normal">Ask The Doc
</li>
</ul>
</div>
</div>
<div class="comment">
<div class="button">
<img src="http://devjohnson.com/skin/frontend/dJTheme/default/images/twitter_icon.png">
</div>
<div class="box" id="hidden">
<ul class="tw">
<li class="tw">DocJohnson
</li>
<li class="tw">Ask The Doc
</li>
</ul>
</div>
<div class="button">
<a href="http://docjohnsonusa.tumblr.com/" target="_blank">
<img src="http://devjohnson.com/skin/frontend/dJTheme/default/images/tumblr_icon.png" id="socialImage" />
</a>
</div>
<div class="button">
<a href="https://www.youtube.com/user/DOCJOHNSON1976" target="_blank">
<img src="http://devjohnson.com/skin/frontend/dJTheme/default/images/youtube_icon.png" />
</a>
</div>
<div class="button">
<a href="http://instagram.com/docjohnsonusa" target="_blank">
<img src="http://devjohnson.com/skin/frontend/dJTheme/default/images/instagram_icon.png" />
</a>
</div>
</div>
</body>
Fiddle
Not sure if it can break your layout, but it worked adding position:absolute to the #hidden element:
#hidden {
display:none;
position: absolute;
margin-top: -10px;
}
Fiddle. Also added margin-top: -10px because the .box value of -20px was making the div get over the button.
There are a number of CSS things to fix. But the main thing is a combination of position relative and absolute to make the dropdowns position properly.
http://codepen.io/anon/pen/WvLwdx
#icons {
text-align: center;
}
.comment {
display: inline-block;
}
.button {
position: relative;
display: inline-block;
margin-right: 5px;
vertical-align: top;
}
.box {
position: absolute;
top: 30px;
right: 0;
}
.box ul {
margin: 0;
background-color: #fff;
}
ul li {
display: block;
}
.hidden {
display: none;
}
a {
padding: 0 !important;
font-family: Arial;
font-size: 12px !important;
text-decoration: underline !important;
color: #000 !important;
padding-left: 10px;
}
I have copied all of your code to a jsFiddle, all you need to do is add position: absolute to your .box class like so
jsFiddle : https://jsfiddle.net/g1Lfg7y5/
CSS
#icons {
width: 450px;
padding: 0px!important;
}
.comment {
width: 140px;
float: right;
}
.button {
width: 25px;
display: inline;
margin-right: 5px;
vertical-align: top!important;
height: 25px;
}
.box {
margin-top: -20px;
width: 25px;
position: absolute;
}
.box ul {
width: 80px;
height: 35px;
padding: 10px;
background-color: #fff;
}
ul.tw {
border: 0px;
}
li.normal {
margin-right: 25px!important;
width: 80px;
}
li.tw {
margin-right: 60px;
width: 80px;
}
#hidden {
display: none;
}
li {
padding: 0!important;
list-style-type: none;
float: right;
}
a {
padding: 0 !important;
font-family: Arial;
font-size: 12px !important;
text-decoration: underline !important;
color: #000000 !important;
padding-left: 10px;
}
I see lots of inconsistencies here.
First of all turn hidden into a class. It repeats itself more than once so it can't be an id.
Then try:
.hidden
{
display: none;
position: absolute;
z-index: 1000;
}
I tested it and it worked.