Need help? Check out our Support site, then


CSS Navigation Menu?

  1. The navigation bar in my header is getting cluttered (charlestaylortrial.org). I'm not thrilled with the pages widget, and anyway want to use the sidebar real estate for things other than navigation. The natural solution would seem to be drop/flyout navigation menu at the top. Just as an example, when a reader hovers the mouse over "Resources" below it pops up a list with "Documents", "Links", "Daily Summaries", "News". Standard stuff.

    Can this be implemented on WordPress.com with custom CSS (please please please)? Or do I have to migrate over to wordpress.org... (please no please no please no)?

  2. You can't do that. You would need access to the html to make anything sensible.

  3. HTML in a Text Widget and some CSS trickery can do this. But beyond vague pointers in the right direction, you'd be on your own.

  4. If delta says so, then so it is.
    I think I would have tried to compact the info on the pages first, if I was you. Such as putting "who we are" and "mission" on the same page, under "about us" or something like that.

  5. Thanks for the quick responses! Alas, looks like I may be exporting.

  6. For a simple solution you could modify your css and change the font size of your menu text. Not a perfect solution but then nothing in web development ever is. Then try as boblets says and combine pages. Together they would make the menu look less cluttered, and less obtrusive on the page.

  7. I'll have another look with my Xrays when I get home tonight.

  8. Since this is not your everyday nonsense blog, I took some 15 minutes and threw this together

    #mainmenu{
    	height: 23px;
    	width: 192px;
    	z-index: 1646;
    	position: absolute;
    	top: 8px;
    	overflow: hidden;
    	right: 7px;
    	background: white url(http://deltafoxtrot.files.wordpress.com/2008/08/bild-1.png) no-repeat center center;
    	}
    	#mainmenu:hover{
    	overflow: visible;
    	}
    #mainmenu ul {
    	display: none;
    	background-repeat: repeat-y;
    	}
    #mainmenu:hover ul {
    	display: block;
    	}
    #mainmenu:hover ul li{
    	display: block;
    	}
    #mainmenu:hover ul li a{
    	display: block;
    	}

    Looks like this:
    http://deltafoxtrot.files.wordpress.com/2008/08/bild-2.png

  9. Well, it's ugly and not yet tested against anything but Safari 3.1. But I hope this helps.

Topic Closed

This topic has been closed to new replies.

About this Topic