Drop-Down Menus

Support Area Forums Photobug Drop-Down Menus

Tagged: ,

Viewing 25 posts - 1 through 25 (of 28 total)
URL to the page in question:
  • Author
    Posts
  • #6921
    Pamela Cather
    Participant

    This there a setting that allows one to have dropdowns on the main menu. When I add them to the menu it just creates a messy menu. See test.reflections-etc.com

    Thanks so much.

    #6922
    Bill Robbins
    Moderator

    Pamela,

    Unfortunately WordPress will let you add drop-downs even if the theme doesn’t have support for them built in. It’s designed to have only top level elements, though you can have as many as you’d like.

    You can add support for drop-downs though. Just add this to the bottom of the style.css file and that will create them:

    
    
    header.primary {
    	overflow: visible;
    }
    
    /* @group Superfish Drop Downs--do not edit */
    
    .menu, .menu * 			{ margin: 0; padding: 0; list-style: none; }
    .menu 					{ line-height:	1.0; }
    .menu ul 				{ position: absolute; top: -999em; width: 10em; }
    .menu ul li 			{ width: 100%; }
    .menu li:hover 			{ visibility: inherit;  }
    .menu li 				{ float: left; position: relative; }
    .menu a 				{ display: block; position: relative; }
    .menu li:hover ul,
    .menu li.sfHover ul 	{ top: 2.5em; z-index: 99; }
    ul.menu li:hover li ul,
    ul.menu li.sfHover li ul{ top: -999em;}
    .menu li:hover ul,
    .menu li.sfHover ul 	{ left: 0; top: 28px; z-index: 99; }
    .menu a.sf-with-ul 		{ padding-right: 2.25em; min-width: 1px; }
    
    /* @end */
    
    ul.menu li li:hover ul,
    ul.menu li li.sfHover ul {
    	width: 160px;
    	left:  160px; /* match ul width */
    	top: -10px;
    }
    
    ul.menu li li li:hover ul,
    ul.menu li li li.sfHover ul {
    	left:	160px; /* match ul width */
    	top:	0;
    }
    
    ul.menu li ul {
    	background-color: #4a2d1b;
    }
    
    

    Enjoy your weekend,
    Bill

    #6923
    Pamela Cather
    Participant

    Works perfectly. Thanks your awesome.

    #7090
    Helen Lockstone
    Participant

    Hi Bill

    Have tried this at http://deborahpearse.com/site/ on the Gallery item.
    The menu appears on rollover but disappears as soon as you move down it.
    Any ideas gratefully received.
    Thanks

    Helen

    #7100
    Bill Robbins
    Moderator

    Helen,

    Thank you for your business first of all. I took a look at your site and it looks like you have taken out the sub-menus at the moment. Sometimes the sub-menu will disappear too quickly when trying to select something in it. You can often reduce the space between the top items and the drop-down to make clicking a bit easier.

    Here’s what I would do. Find this section in the code above:

    
    ul.menu li li:hover ul,
    ul.menu li li.sfHover ul {
    	width: 160px;
    	left:  160px; /* match ul width */
    	top: -10px;
    }
    

    and replace it with this:

    
    ul.menu li li:hover ul,
    ul.menu li li.sfHover ul {
    	width: 160px;
    	left:  160px; /* match ul width */
    	top: -15px;
    }
    

    Save your changes and see if that’s better. You can try adjusting the top: -15px; again to say top: -20px; to make them closer if you need to.

    Let me know if you still have trouble. It is possible to add a bit of javascript that will cause them to stay open a bit longer if you need to.

    Enjoy your week,
    Bill

    #7682
    Michelle
    Participant

    Is the gallery style used on http://deborahpearse.com/site/ a wordpress plugin from Organizedthemes? Or something else? Or was it hand coded? This is exactly the style I’m looking for for my own portfolio.

    #7686
    Bill Robbins
    Moderator

    Michelle,

    That’s actually our Photobug (http://www.organizedthemes.com/themes/photobug/) theme. She has set the front page to display a static page instead of her recent posts which is why it looks a bit different from the demo.

    If you have any questions, let me know,
    Bill

    #8588
    Joel Cornett
    Participant

    I’m having trouble getting the sub-menu to stay when you move the mouse down to click on it. I tried using the top change you suggested, but I can’t get it to really make a difference (I’ve tried -20, -30, -50, even -100), I’ve used js for nav bars before on non-wordpress sites, and there is a line of code (var DissapearDelay=1000;) that you use to keep it open, even if the mouse isn’t on it. Is there a way to do the same thing in the styling of the navbar on wordpress?

    #8589
    Bill Robbins
    Moderator

    Joel,

    Any chance you could send a link to where you’re working with the theme so I can take a look for you?

    Thanks,
    Bill

    #8600
    Joel Cornett
    Participant

    http://flytrafficmedia.com is the one I can’t get to keep the menu up on, no matter how high (or low, rather) I set the number… (I currently have it at -60)

    #8607
    Bill Robbins
    Moderator

    Joel,

    Thanks for sending the link over. I believe what you’ll want to do so your navigation works a bit better is add two jQuery plugins to your site. They are customarily used with the navigation you’re using and help keep the sub-menus in line. Here’s how to tackle that.

    1. Download the zip file at http://users.tpg.com.au/j_birch/plugins/superfish/superfish-1.4.8.zip and unarchive it. The two files you’re looking for are inside a folder called “js.” Open that up and you’ll find hoverIntent.js and superfish.js.
    2. Next you’ll need to upload them to your site. If you have a FTP program you can use it to move them to your wp-content/themes/photobug/js/ folder. If not, you’ll want to install a plugin called WP Editor. This plugin replaces the built in theme editor with a much improved version. Once it’s installed and activated, go to Appearance > Theme editor. On the right hand side there is a file uploader. Enter “js” for the name of the sub-folder and then upload each file to your server.
    3. Once the files are uploaded, open up the footer.php file.
    4. Just below
      
      <?php wp_footer(); ?>
      

      paste this:

    5. Save your changes.

    That should hook up the javascript so your menus are more responsive. If you have trouble, let me know.

    Enjoy your week,
    Bill

    #8609
    Joel Cornett
    Participant

    That did it! Thanks so much!!!

    #8610
    Joel Cornett
    Participant

    ok, one other problem, how do I make it so the words don’t wrap, and/or make it so the background color goes all the way behind the words? Is there a way to make it responsive so it would auto adjust based on the longest thing shown?

    Right now the drop down background width matches the top menu item width…

    #8622
    Bill Robbins
    Moderator

    Joel,

    Where you’ve added the black color to the drop-down at the bottom of style.css, you can set the width with an important declaration:

    
    ul.menu li ul {
    	background-color: #000000;
    	width: 180px !important;
    }
    

    You can change the width, just leave the !important there and that should take care of it.

    The Supershish jQuery plugin that’s being used will give you some options on sub-menus such as making the widths dynamic. You can find the details on their page.

    Hope that helps,
    Bill

    #8634
    Joel Cornett
    Participant

    That worked. Thanks!!!

    #8956
    Pamela Cather
    Participant

    For some unknown reason my drop downs just stopped working. I did recently make a small change to my header, but even if I go back to backup of the header they still don’t work. Any suggestions? http://www.efreebn.org

    Thanks.

    #8977
    Bill Robbins
    Moderator

    Pamela,

    I’ll be honest, I looked through the code for a while but I never saw anything that would have taken the drop-downs away. Typically if it’s a javascript conflict they will simply appear and disappear too quickly. It could be a CSS issue. Since they aren’t appearing at all that would be where I’d look.

    Bill

    #8985
    Pamela Cather
    Participant

    Bill,

    This is the weirdest problem. I too don’t see any coding problems. I only made one small CCS change at the same time. If I right click on the website and click on “View Page Source.” the coding for the dropdowns is there.

    We have our sermon database on a separate website (http://messages.efreebn.org). It is in a separate sub-directory from the main site with it’s own database. It has the same design as the main site. But it is totally different. If I make a change on the main site header or menu I also have to go to the sermon site and make the same change. (We did this as the first time we added the sermon browser plugin it crashed our main website. We didn’t trust it the second time.) Anyway, this is really important. 🙂 Because…

    When I made this last change I forgot to make the same change on the sermon site. So, I thought maybe I should compare the two to see if I can catch my mistake.

    I went there and found that the menu drop downs are not working on this site as well! The only two connections they have is that their respective sub-directories are in the same main directory. And there are a couple of basic links from the main site to it. Otherwise they are totally separate websites.

    Both are running WordPress 3.4.2. I have not recently updated WordPress. Nor have I updated any plug-ins. They are not working in Chrome, Firefox, nor the last 3 versions of IE. I’m starting to consider a rift in the space/time continuum.

    Does this information give you any more insight?

    #8994
    Bill Robbins
    Moderator

    It sounds like they may have not been working for a little while since it affects both sites.

    Have you tried replacing the entire navigation section code with the basic CSS from Superfish? Since the menu is made with that jQuery plugin you should be able to return to basic functioning by swapping it out.

    I also did notice that one of the CSS files (style-efree.css) is empty. I don’t know if that has anything to do with it or not.

    #9010
    Pamela Cather
    Participant

    Style-efree.css is an abandoned file. Just haven’t deleted.

    “Have you tried replacing the entire navigation section code with the basic CSS from Superfish?” If you are referring to code at the beginning of these posts. Yes.

    I’d feeling as though this problem along with a few others we have is beginning to be out of my skill level. The slideshow is still not working (see https://support.organizedthemes.com/forums/topic/cheatin-huh-error-message/) and I realized the search function stopped working around the same time the slideshow went nuts. Now the menus are not working. I’m frustrated.

    Can you tell me about Tweaky.com? Do you know these guys? Do you recommend them? Would they be able to fix these problems for us?

    Thanks,
    Pamela

    #9011
    Pamela Cather
    Participant

    One question regarding this:

    “Have you tried replacing the entire navigation section code with the basic CSS from Superfish?”

    The above post just says to add it to the bottom of the style sheet. Should I have removed anything that it might be in conflict with?

    #9020
    Bill Robbins
    Moderator

    Pamela,

    I tried one other thing this morning and guess what…I found your menus. Here’s what I think is happening.

    1. Your theme is currently set to use the latest jQuery release automatically with this URL: http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js

    2. Some jQuery plugins won’t automatically work with newer versions of jQuery. When I tried using an older version of jQuery, the menus loaded. Try replacing that URL for jQuery with this http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js

    Or you could try updating all the jQuery plugins to the latest version and see if that fixes it too. It very well may.

    Have a great week,
    Bill

    #9035
    Pamela Cather
    Participant

    Thanks Bill, I’ll look at this.

    I still have a couple of other problems. I’ve been talking to Tweaky.com whom I found via your link. I’d love to have someone who could just fix these things for me :-).

    Just wondering if you have experience with them and are recommending them?

    Thanks,
    Pamela

    #9037
    Bill Robbins
    Moderator

    Pamela,

    I have spoken with the people who run Tweaky, but since it’s a job board, they are not the ones who will be working on your site. That will go to whoever wins the bid for your project. It’s my understanding that they do screen the freelancers and back all tweaks with a guarantee.

    The customers of mine who have used them have all reported good success so far.

    Hope that helps out,
    Bill

    #9039
    Pamela Cather
    Participant

    Thanks for the info

Viewing 25 posts - 1 through 25 (of 28 total)
  • The topic ‘Drop-Down Menus’ is closed to new replies.