[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Wordpress Skeleton Responsive Style Issue

Posted on 2014-02-09
6
Medium Priority
?
402 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
  • 2
  • 2
4 Comments
 
LVL 10

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 10

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: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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

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.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses
Course of the Month20 days, 6 hours left to enroll

872 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