Navigation css is bunched up

[steve berchtold]

Hi Bill, I just changed a site theme to your Photobug theme and my CSS Nav is messed up.

How do I get this styling to go across like normal navigation?

Thanks,
Steve

Attachments:

1. 

   BillPhotobug.jpg
   

[Bill Robbins]

Steve,

Sorry for the trouble and thanks for the screenshot. Could you send over a link to where you’re working with the theme so I can take a closer look at it for you.

Thanks,
Bill

[steve berchtold]

Sure Bill. http://southfloridabiztv.com/

[Bill Robbins]

Thanks Steve. I took a look and it appears that a few of the menu items are set to be sub-menus. The Photobug theme isn’t set up to use a drop-down menu so you’ll want to leave all your navigation items on the top level. If you’ll move them all back to the top-level that should take care of the bunching.

If you have any trouble, let me know,
Bill

[steve berchtold]

Ohhh. Do you have another theme that has drop down capability that would also use video?

[Bill Robbins]

You could add them in to Photobug if you need to. Here’s how:

1. Go to the Theme Options page and select the Styling tab.
2. Scroll down to the Custom CSS box and paste this:

   
   header.primary {
   	overflow: visible;
   }
   
   .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; }
   
   
   ul.menu li li:hover ul,
   ul.menu li li.sfHover ul {
   	width: 160px;
   	left:  160px; 
   	top: -10px;
   }
   
   ul.menu li li li:hover ul,
   ul.menu li li li.sfHover ul {
   	left:	160px; 
   	top:	0;
   }
   
   header.primary ul.menu li ul {
   	background-color: #36afd8;
   	margin-top: -5px;
   	width: 200px;
   }
   
   header.primary ul.menu li ul ul {
   	margin-top: 10px;
   	margin-left: -10px;
   }
   
   
   

3. Update your settings.

That would add in drop-down navigation for you. If you have any trouble, let me know.

Photobug is my only theme that doesn't support drop-downs out of the box. The others do and should also work well with video too.

Hope that helps out,
Bill

[steve berchtold]

Thanks Bill. Appreciate it.

Now I can use it they way I needed to!

Thanks,
Steve

[Bill Robbins]

Anytime Steve. Have a great weekend!

[Author]

Posts