Solved

Wordpress Skeleton Responsive Style Issue

Posted on 2014-02-09
6
370 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
6 Comments
 
LVL 8

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 8

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

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

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.
I annotated my article on ransomware somewhat extensively, but I keep adding new references and wanted to put a link to the reference library.  Despite all the reference tools I have on hand, it was not easy to find a way to do this easily. I finall…
The purpose of this video is to demonstrate how to exclude a particular blog category from the main blog page. This is can be used when a category already has its own tab, or you simply want certain types of posts not to show up on the main blog. …
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…

705 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now