WordPress.com

1. charlestaylortrial
   Member
   Aug 14, 2008, 5:19 PM

   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. boblets
   Member
   Aug 14, 2008, 5:21 PM

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

3. deltafoxtrot
   Member
   Aug 14, 2008, 5:25 PM

   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. boblets
   Member
   Aug 14, 2008, 5:33 PM

   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. charlestaylortrial
   Member
   Aug 14, 2008, 5:39 PM

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

6. lee9931
   Member
   Aug 14, 2008, 7:18 PM

   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. deltafoxtrot
   Member
   Aug 14, 2008, 7:23 PM

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

8. deltafoxtrot
   Member
   Aug 15, 2008, 10:03 AM

   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. deltafoxtrot
   Member
   Aug 15, 2008, 10:05 AM

   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.