?
Solved

Wordpress Skeleton Responsive Style Issue

Posted on 2014-02-09
6
Medium Priority
?
396 Views
Last Modified: 2014-03-15
So, I'm using Skeleton to create a responsive WordPress theme and I'm stuck with a weird issue.  Being new to Skeleton I'm not sure what the issue is.

I decided to take a step back and create a normal html page with the code I'm using.
When the viewport is resized, the "Show Nav" div seems to double in size.
It seems related to .nav-bar.

The navigation bar is supposed to be 40px tall.  When the viewport is shrunk to less than 767px wide, the .main-nav class disappears and the #show-nav div appears.  However, the #show-nav div is not the same height as the .main-nav class and I'm stumped as to why not.

Here's my CSS:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

body{
	background-color:#000;
}

.nav-bar {
	background-color:#7e0406;
	height:40px;
	display:block;
}

.main-nav ul, .main-nav li{
	display:inline;
}

.main-nav a{
	padding:0 15px 0 15px;
	
	text-decoration:none;
	line-height:40px;
	display:block;
	color:#fff;
	font-family:sans-serif;
}

.main-nav a:hover{
	background:#666;
}

.main-nav ul ul a{
	width:135px;
	line-height:20px;
	padding:0 20px;
	display:block;
}

.main-nav ul li {
	position:relative;
	float:left;
}

.main-nav ul ul {
	position:absolute;
	top:-99999999px;
	left:0;
	opacity:0;
	background-color:#666;
	text-align:left;
}

.main-nav ul li:hover > ul{
	position:absolute;
	top:100%;
	opacity:1;
}

#show-nav{
	display:none;
	background:#7e0406;
}	

#close-nav {
	display:none;
	background:#7e0406;	
	text-align:right;
	font-family:sans-serif;
}

#eyes{
	display:block;	
}

@media only screen and (max-width: 767px) {
	.main-nav ul li {
		float:none;	
	}
	
	.main-nav{
		display:none;
	}
	
	#eyes{
		display:none;	
	}
	
	#show-nav{
		display:block;
	}
	
	
	#close-nav {
		display:none;
	}
}

Open in new window


And here's the HTML:
<!DOCTYPE html>
<html>
	<head>
		<title>Test</title>

		<link rel="stylesheet" type="text/css" href="style.css">
		<link rel="stylesheet" type="text/css" href="skeleton.css">
	</head>
	<body>
		<div class="container">
        <header>
            <div class="main-nav sixteen columns" id="show-nav"><a href="#">Toggle Navigation</a></div>
            <div class="main-nav sixteen columns" id="close-nav"><a href="#">x</a></div>
            <div class="sixteen columns nav-bar">
				<nav class="main-nav">
                	<ul id="menu-main-nav" class="menu">
                    	<li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25"><a href="#">Link 1</a></li>
						<li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28"><a href="#">Link 2</a></li>
						<li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29"><a href="#">Link 3</a></li>
					</ul>
                </nav>
            </div>
		</header>

        </div>
     </body>
</html>  

Open in new window


I've attached the Skeleton CSS for easier access.

I hope this isn't too vague of a question, I've been battling it for hours and could really use some help.

Thank you!
skeleton.css
0
Comment
Question by:slightlyoff
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
6 Comments
 
LVL 9

Expert Comment

by:Brandon Lyon
ID: 39848938
However, the #show-nav div is not the same height as the .main-nav class and I'm stumped as to why not.

Which .main-nav are you referring to?

If its #close-nav in it then it has a rule to hide itself when under 767px in your own style.css file.

If you're referring to nav.main-nav then its also set to hidden when under 767px in your own style.css file.

If you're referring to #show-nav, then it is the same height since its the same div.

Are you looking at a specific browser that doesn't support media queries?
0
 
LVL 1

Author Comment

by:slightlyoff
ID: 39848952
Thank you for your reply!

 <div class="main-nav sixteen columns" id="show-nav"><a href="#">Toggle Navigation</a></div>

Open in new window



is taller than the two divs below it:

<div class="main-nav sixteen columns" id="close-nav"><a href="#">x</a></div>
            <div class="sixteen columns nav-bar">
				<nav class="main-nav">
                	<ul id="menu-main-nav" class="menu">
                    	<li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25"><a href="#">Link 1</a></li>
						<li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28"><a href="#">Link 2</a></li>
						<li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29"><a href="#">Link 3</a></li>
					</ul>
                </nav>
            </div>

Open in new window


I've checked it in multiple browsers.  When the screen is made smaller, the "Toggle Menu" text appears, but it's background bar is twice as tall as the normal navigation's background bar.

For example, here's a cropped image of the normal navigation:Normal navigationAs the screen shrinks and fires the media-query this is how the small nav appears:Normal navigationSmall Nav - too tall
For some reason it's doubling in height...

Thanks again for responding.  It's a tough problem to try to explain.
0
 
LVL 9

Accepted Solution

by:
Brandon Lyon earned 2000 total points
ID: 39850670
In that case, the background color is taller because the height of 40px is being applied to multiple things inside of the box with the background color. Inside of the div where the background color is being applied there are multiple child divs. The background color is wrapping around all of them.

when at a small screen size:

div id="show-nav" (visible, block, 40px tall, floated left)

div id="close-nav" (hidden)

div class="nav-bar" (The div itself is visible though there is no visible content inside of it. Since it has a height applied and since it is visible it is still being rendered as 40px tall)

Combined that makes 80px tall (40px stacked on top of 40px).

You most likely want to remove the height of 40px from .nav-bar
0
 
LVL 1

Author Comment

by:slightlyoff
ID: 39851144
Thank you for your help!  I'll give it a try when I get back to the office.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
The purpose of this video is to demonstrate how to reset a WordPress password if you are locked out and cannot reset the password. A typical use would be if you cannot access the email to which WordPress would send the password recovery email to…
The purpose of this video is to demonstrate how to prevent comment spam on a WordPress Website. This will be demonstrated using a Windows 8 PC. Plugin Akismet will be used. Go to your WordPress login page. This will look like the following: myw…
Suggested Courses
Course of the Month11 days, 11 hours left to enroll

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question