Solved

Wordpress Skeleton Responsive Style Issue

Posted on 2014-02-09
6
386 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 500 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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The purpose of this video is to demonstrate how to manually back up a WordPress Database. This will be demonstrated using a Windows 8 PC. The Host used will be IPage.com Log into your Hosting account. IPage will be used for demonstration : Locat…
The purpose of this video is to demonstrate how to set up the permalinks on a WordPress Website. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Go t…

726 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