Help with responsive dropdown navigation

Hi Guys and Gals!

I´m making my first responsive theme for wordpress and I´m having trouble making
the navigation responsive.

I´ve found lot´s of great tutorials but can not make them work

What i have for my navigation in css is this:

#navi {
    display: block;
    margin: 0;
    width: 100%;
    position: relative;
    float:left;
    background: #730000;
    box-shadow: 0px 2px 2px #530000;
    }

   

#navi ul {
   
    list-style: none;
    margin: 0;
    padding:0;
}

#navi li {
    float: left;
    margin: 0;
    position: relative;
   
   
    }

#navi a {
    color: #fff;
    font-weight:normal;
    display: block;
    float: left;
    cursor: pointer;
    list-style-type: none;
    font-family: 'Oswald', sans-serif; /* no .ttf */
    font-size: 1.3em;
    padding:10px;   
    margin: 0 0 0 0 ;
    text-decoration:none;
}



#navi ul ul {
    display: none;
    float: left;
    margin: 0;
    position: absolute;
    top: 3.7em;
    left: 0;
    width: 188px;
    z-index: 99999;

   

}

#navi ul ul ul {
    left: 100%;
    top: 0;
}

#navi ul ul a {
    background:  #730000 ;
    box-shadow: 0px 2px 2px #530000;
    color: #fff;
    font-weight: normal;
    height: auto;
    padding: 7px 7px 7px 7px;
    width: 145px;
    margin:0 0 0 0;
}



#navi ul ul a:hover {
    color: #fff;
    background: #820000;
}

#navi a:hover {
    color: #E0DEDF;
}



#navi ul li:hover > ul {
    display: block;
    margin:0;

}

#navi .current_page_item a    {
    font-weight: normal;
    background: #820000;
    color:#fff;
}

Code (markup):

and the html is this:

<div id="navi">
               
                <?php wp_nav_menu( array( 'theme_location' => 'main' ) ); ?>
            </div>

HTML:

I´m using strict doctype and it passes validation so I don´t wanna change the navi id to anything else li .menu or etc.

Can you help me to get my responsive dropdown navigation?

maybe @deathshadow you can take also a look?

The site itself isn´t live yet because the navi isn´t set for smaller devices.

You can check the demo from here:
http://hdaddy.net/demo/

there a few glitches on the responsive still..but I´ll fix them once I get this navi situation taken care of.

So share your knowledge please!

Thanks in advance!

 

Generally speaking since dropdown menus are useless/painful on mobile, they have no place on a responsive layout... You could make it show all options, but that would hinge on how much crap you're gonna have in the menu. I would switch to classic drilldown navigation and/or put any secondary navigation in the sidebar so be shown after the content.

An accesskeys menu could also be leveraged to do double duty as a small-screen 'skip to secondary navigation' type solution.

Of course, since you're in turdpress, you'll first have to bend that sucker over the table and make it your bitch, what with the bloated idiotic output of:

<div id="navi">
				
				<div class="menu-navigaatio-container"><ul id="menu-navigaatio" class="menu"><li id="menu-item-333" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-333"><a href="http://hdaddy.net/demo/">Home</a></li>
<li id="menu-item-334" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-334"><a href="http://hdaddy.net/demo/testi/">Testi</a>
<ul class="sub-menu">
	<li id="menu-item-394" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-394"><a href="http://hdaddy.net/demo/testi-3/">Testi 3</a></li>
	<li id="menu-item-395" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-395"><a href="http://hdaddy.net/demo/testi-2/">Testi 2</a></li>
</ul>
</li>
</ul></div>			</div>
				<div class="clear">
	</div>
			
			
	<div id="header">
	<div id="logo">
	</div>
	<p class="description">Vuodesta 1907</p>
	<h1><a href="http://hdaddy.net/demo/">Ykspihlajan Työväen Näyttämö</a></h1>
	
	
	</div>
	
	<div id="clear">

Code (markup):

Doing the job of:

<ul id="mainMenu">
	<li><a href="/demo/">Home</a></li>
	<li>
		<a href="/demo/testi/">Testi</a>
		<ul>
			<li><a href="/demo/testi-3/">Testi 3</a></li>
			<li><a href="/demo/testi-2/">Testi 2</a></li>
		</ul>
	</li>
</ul>

<h1>
	<small>Vuodesta 1907</small>
	<a href="/demo/">Ykspihlajan Työväen Näyttämö</a>
</h1>

Code (markup):

Remember WHY we have inheritance -- if every element is getting the same class, NONE of them need classes. If you aren't doing anything unique to each of them, NONE of them need classes or ID's. (and certainly not BOTH!) - UL and H1 are perfectly good block-level container, usually don't need extra DIV around them... and again elements should self clear instead of using pointless stupid clearing DIV nonsense... and of course if a link is pointing to the same domain as the page, you don't need to say the domain in the href!

... and people wonder why I call it turdpress! (especially since two thirds that crap it shoves down your throat external to the skin...) More than three times the necessary markup, endless pointless idiotic classes for NOTHING, endless pointless DIV for nothing, clearing DIV like it's 1997, paragraphs around non-paragraph content, multiple entry points and a codebase that woudn't know security if it stripped naked, painted itself purple and hopped up on a table to sing "Oh look at how restricted my scope is!" ... *SIGH*

Why do people use that SHIT again? Oh wait, it's "easy" -- RIGHT.

 

Oh, and that your sidebar is in the markup BEFORE the content column isn't helping matters either... and the responsive triggers don't match your columns sizes... 66% width next to a fixed amount of pixels is gonna break... NOT that there's any reason to be declaring width on BOTH columns -- usually one will suffice. NOT that pixel widths are a good idea with EM metric fonts either... not declaring a line-height is a bad idea too, much less skipping style/weight that could make the entire condensed FONT declaration be ignored.

 

Thanks for the advices Deathshadow. I respect your knowledge on these matters and I know how much you hate WP for it´s crappy markup. But I´m not using it because it is easy, but because I want to, even though it is putting out crappy code. My demo validates XHTML 1.0 Strict and that can´t be a bad thing? And like I said it isn´t finished yet. I have my own style to build sites.

I´ve taken tips from your site´s css to make the site/responsive part good, but this is my first dive in to it, so cut me some slack with my mistakes.

I´m gonna fix your suggestions on the sidebar and other stuff.

You said that the responsive will break in fixed width..did you even check it with your phone? Because it sure in h*** doesn´t break in my devices or even in the browsers I use to check my sites (chrome, FF and IE) I can´t say about all the browsers in the world thou.

And for you "Love" of WP. It is great that you advice people not to use it so that they could produce better sites..but I think you are fighting windmills on that