WordPress › Support » My theme does not support dropdown menus!

Hossam Fahmy
Member
Posted 11 months ago #

Hi,

I have a theme that does not support multi-level menu (no sub-menu items)
Can anybody help me to make it support dropdown menus???

Here is a demo: http://www.ieeeday.co.cc

Thanks in advance
Chip Bennett
Member
Posted 11 months ago #

What Theme are you using?
Hossam Fahmy
Member
Posted 11 months ago #

It's a special theme developed for IEEE
Chip Bennett
Member
Posted 11 months ago #

It's a special theme developed for IEEE

Can you provide some of the relevant template files - namely the part of functions.php that relates to the menu, the template file that contains the menu output code, and the part of the CSS stylesheet that controls the menu styling (and if you're using javascript, the header.php template file)?
Hossam Fahmy
Member
Posted 11 months ago #

Sure ... how can I contact you privately??
Chip Bennett
Member
Posted 11 months ago #

You can't. :)

Well,l actually, you can, but not for general support queries. I prefer to keep that activity here in the WPORG forums.

I would suggest pasting the relevant code into Pastebins, and linking here.

If the code is too mission-critical or otherwise unable to be shared publicly, then I would recommend seeking paid support, e.g. via jobs.wordpress.net.
Hossam Fahmy
Member
Posted 11 months ago #

Here you are:

header.php http://pastebin.com/Texn44Le

functions.php http://pastebin.com/46ik9yde

customize.css http://pastebin.com/VC6xCWn4

css\layout.css http://pastebin.com/PXRBrx8Z

scripts\global.js http://pastebin.com/aqvUZqG3

scripts\ie.js http://pastebin.com/ggwssjiC
Hossam Fahmy
Member
Posted 10 months ago #

Hello Chip,

Have you checked it??
Please reply ASAP
Chip Bennett
Member
Posted 10 months ago #
Your menu is hard-coded.

In header.php, you need to replace this:
```
<div id="global-hd">
    <ul>
        <li>...</li>
        ....
        <li>...</li>
    </ul>
</div>
```
With a call to wp_nav_menu(), or wp_list_pages(). e.g.:
```
<div id="global-hd">
<?php
wp_nav_menu( array(
    'theme_location' => 'header_menu'
);
?>
</div>
```
Note: you'll want to read up on Navigation Menus.

Hossam Fahmy
Member
Posted 10 months ago #

I do not mean this menu!

I mean the following one which already uses wp_nav_menu()

<!-- Site Navigation -->
   <div id="navbar">
      <div id="navigation">
          <!-- load widget for pages -->
          <?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary', 'depth' => 0 ) ); ?>
      </div>
   </div>

Chip Bennett
Member
Posted 10 months ago #
See here:
```
'depth' => 0
```
You're telling wp_nav_menu() to display all levels of hierarchy. Good so far.

Next:

1) Add hierarchy to your menu.

Do you have menu items that are children of other menu items? (You will know, because child items are indented slightly to the right, beneath their parent items.)

2) Create CSS rules for the dropdown menu

Follow example CSS rules in Twenty Ten or Twenty Eleven to create on-hover dropdown menus.
Hossam Fahmy
Member
Posted 10 months ago #

Yes, I already have children menu items

I will check the CSS files of Twenty Eleven
Can I be back to you if I need further help for that??

Thank you so much :-)
Chip Bennett
Member
Posted 10 months ago #

Feel free to keep asking questions in this thread; I'm still subscribed. :)

Hossam Fahmy
Member
Posted 10 months ago #

I tried to do it, but I could not

Here you are the CSS:

/* Site Navigation Bar */
#navbar {
	padding: 0 20px;
}

#navbar #navigation {
	width: 944px;
	height: 39px;
	font-size: 1em;
	overflow: hidden;
	background: url(../images/bg_nav.png) no-repeat;
}

#navbar #navigation ul {
	margin: 0;
	padding: 0;
	width:auto;
	position:relative;
	display:block;
	height:39px;
}

#navbar #navigation ul li {
	display:block;
	float:left;
	margin:0;
	padding:0;
}

#navbar #navigation ul li a {
	display:block;
	float:left;
	text-decoration:none;
	font-weight:bold;
	height:26px;
}

#navbar #navigation ul li a.double {
	padding: 0;
	height: 31px;
}

#navbar #navigation ul li a:hover {
}

#navbar #navigation ul li a.last:hover  {

}

#navbar #navigation ul li a.active, #navbar #navigation ul li.current_page_item a, #navbar #navigation ul li.current_page_parent a {
	color: #ffffff;
	text-decoration: none;
	background-image: url(../images/bg_nav_on.png);
	background-position: 0 1px;
}

#navbar #navigation ul li ul {
	display: none;
}

Please help ... I am not good in CSS!!

Chip Bennett
Member
Posted 10 months ago #

Here's the basic approach to take:

Define rules to control display:
1) Start by ensuring that only the top-level menu items display.
2) Add :hover rules to display child list items
3) Add rules to ensure that grandchild list items don't display

Define rules to control style:
1) Add :hover rules
2) Add rules for current list items, and current list item parents/ancestors, as desired

Note: for debugging/designing CSS, I strongly recommend using Firefox Firebug, or Chrome Developer Tools (and ensure that all caching is disabled).
Hossam Fahmy
Member
Posted 10 months ago #
I have added the following lines:
```
#navbar #navigation ul li:hover > ul {
	display: block;
        float: left;
        z-index: 99999;
}
```
It displays the child list items inline!!
I tried to add top: 40px; but it disappeared again!

Check it here: http://www.ieeeday.co.cc

How can I get it displayed correctly (vertically)??
Hossam Fahmy
Member
Posted 10 months ago #

Hi Chip,

Please help ... as the website should be available before the end of this week!

Btw, It's a volunteering activity .. I am not paid for it

Reply

You must log in to post.

WordPress.org

Forums

My theme does not support dropdown menus! (17 posts)

Reply

About this Topic

Tags

Code is Poetry