Develop Reference

How to fix top menu bar of my blog that is showing a blank space?

I have a blog which is hosted over blogger. I found an issue some time ago that keeps on bothering me. The top menu bar of my blog starts showing a blank option when it is opened on a mobile or the page is zoomed in. The blank option when clicked redirects to a 404 error page.
Please help me out to fix this.
You can visit my blog from here.
Here is the template file of my blog.
Edit 1 - When we try to zoom in the page and inspect the element is like this
Problem
On selecting the option we can see there is a option which is undefined.
Issue
On deleting the option, ka-boom problem gets solved.
Issue fixed
but just when we reload the page, this thing appears again.
Thanks

Looks like the selectnav function generates the select dropdown from the children of the ul or ol node containing the menu...
Inside the menu list, you have a element, which doesn't fit the schema and is rendered as undefined inside the element.
You need to take the whole element out of the menu list, so it won't be generated as a menu list item in the menu dropdown.

how to show child ul under parent ul horizontally

i asked several times for my navigation here but didn't get my desire results so i thought one last time maybe someone help me to achieve like this!
as you can see in below code i have only 5 parent menus and each of them have at least 12 child or submenus. i want to show my 5 parent or main menus horizontally like as you can see above image where home video news world sport etc and display their related child menus right under of it also horizontally again you look at image and notice parent link news selected and their child links like politics investigations obits education etc shown below him horizontally. and also notice that parent link news and child link investigations both have active class at the same time and i also want this effect.
and if you please visit this link - the telegraph you can also see if you refresh the page both navigation's remain intact and also maintains their active state.
this is my attempt please check out this fiddle in this fiddle you notice that when page is refreshed child navigation disappears and also problem with active link state only one link remains active but as you now know i want parent link to remain active even when i am on any of his child links just like you seen on the telegraph site in above link.
notes
i used jquery ajax to load pages dynamically to a div and also used hash in my urls.
also used this jquery bbq html5 history api based jquery ajax plugin to load pages, browser history and browser back and forward buttons and everything working fine.
please feel free to use any jquery lib any hack or what ever you like but i need this badly. anyone who can help me to achieve this i really appreciate him with bottom of my heart and also mention him on credits section of my site. thanks
p.s: ask any time for any further details if needed.

how can I add a second color to main menu in wordpress

I'm trying to add a contact us - as in the attached picture on a main menu in WP by creating clickable link only on the word contact and leave the phone number un-clickable. Perhaps someone can advice how it's done?

You can assign each menu item a custom class, if you use the menu builder under appearance. Then use CSS to style that menu item. If you don't see the class field, check the screen options in the upper right portion of the admin screen. Create 2 menu items, one for contact on for the #. Assign the # a class like .no-click, then use jquery to prevent default.

Toggle menu issue

I've got a toggle menu, please see http://jsfiddle.net/Wp2em/41/ for code and functions.
On the real site which is using the same code, everytime when you click on h3 (Category 1, 2 & 3 which is an a tag at the moment), it toggles its submenu down a bit, then the page changes to a new h3 linking page, and the submenu collapses together on the new page.
I'm just wondering is there any way I can tell the submenu to be open when its parent page/the new h3 linking page is opened? Please see this bank site which has the side bar effect I'd like my toggle menu to be.
Thank you in advance!

Here is my fiddle
all you will need to do is put the class "currentPage" on the li that you are currently on and the menu should be open after the page loads. I also moved some of your css around so it should move a little smoother now.
** Updated fiddle code. It will now look at your current URL and set the link that matches with it to the currentPage. Also I added that if another menu is open it will close itself if you click on another parent menu
** Updated fiddle code. Ok now if you click on the arrow the menu will expand and not go to the link(like the bank site). Also I changed it where you will have to put the anchor tag in all parent H3s.

This is not too simple. I've had a very similar problem, although I was posting the page back to the same url so I used a hidden field to store a list of the id's of the H3's which were open.
You I think will have to use a cookie to do this as you're navigating straight to the new page. The idea is you create a cookie and set a value on it every time you open an H3 and remove it every time you close it. You can use this plugin to do this. Then when you open the other page, the script reads the H3's which should be open out of the cookie and opens them.
Another route would be to use Ajax to post the open/closed H3 information back to the server which would store it in session data and use it to build the HTML of the new page so the right H3's were open.

If the page loads and the submenu (ul.second_level) is generated (i.e. from php), parse an active css class on the submenu that must be visible.
ul.active {
display: block
}
ul.second_level {
display: none
}
This is in addition to your click function. Do not trigger the click event since it starts the animation (which I presume you don't want).
Update:
It is quite basic stuff, but I do not know how the HTML code for your menu is created. If you are using php and a database (for example) to create the menu, check every submenu item with the page you are on. If the page is one of the pages in the submenu, set the class 'active' on that submenu. The CSS does the rest (displaying this submenu and hide other submenus).
If you have a static page, use javascript to check on which page you are with window.location.href for example. The rest is the same.

Javascript menu remembering position

I am currently working on a JS menu for a web app. It consists of two bars, the fixed main one and the submenu which is activated (display:block from display:none) by Javascript function. The selected options of the main menu as well as the submenu are also highlighted by adding a class="main_on" and class="sub_on" by onclick event. Is there way of remembering which submenu was displayed and which options were currently classed as active when the user hits F5 or the page reloads itself? I am looking for a non-cookie and non-database approach if possible.
Thanks,
Mike

You can make the link/element that is clicked (for the onclick event) set the URL hash in the address bar. (i.e. http://server.name/page#URLhash) If it's a link you just have to adjust the HREF property, otherwise you may have to manipulate with window.location.
This sets the current state. When the page (re)loads, check the value of the URL hash. See http://developer.mozilla.org/en/DOM/window.location for details on how to access it. Provided the URL hash is still in the address bar, you'll be able to get the value.
Then use the value to determine which menu to make active. Thus you can restore the state this way.
There are some differences between browsers. Do a search on "Ajax History", in which some people have used the URL hash to preserve the state after Ajax actions. Not the exact same problem you are trying to solve but similar. Check out RSH:
http://code.google.com/p/reallysimplehistory/
The same ideas will be used.