Navigation Template

HTML & CSS
1

Looking for a nav bar template like the Sitepoint navigation bar… Anyone know of any instead of starting from scratch… Client wants to change there bar to something simple and that menu really works with there colors/layout.

Figured would check the easier route before creating. Looking for more of a complete css/html than javascript.

Thanks again.

2

Hi FPMSI, do you mean the menu at the top of these pages, or the new SP home page menu?

Either way, a menu is normally a simple UL with the LIs floated or display inline. The rest is all the styling specific to your site. So I’d say start from scratch.

3

Yea i was looking at the new one on the SP home page the grey/orange.

Thanks again - I will start creating a new one today.

4

Created the navigation bar - having an issue with the second layer ul bottom-border.

When highlighting an item in the third ul (solutions - webmarketing- seo), the bottom border line is showing in the orange.

www.mymarketingsolutions.com

Any ideas?

Thanks
Ryan.

5

Also having issues with the navigation font color on the blog site compared to the regular pages that are not on wordpress.

Thanks again.

6

I can’t tell what you are referring to there. Where is that? Also, what browser are you looking at?

Again, not quite clear what you are referring to. Could you specify the pages concerned, and identify the elements that aren’t colored the same?

7

Sorry i got the blog issue all set with the font colors. There was a setting set under theme options for wordpress that i needed to clear for the css to take over.

As for the main site if you highlight over Solutions and highlight Web marketing and then go to on of the sub menus, it will turn orange and you can see the “bottom-border” going over into the third drop down menu. You will see it if you hightlight search engine optimization using firefox or chrome.

Ryan.

8

You could set z-indexes on those ULs to set the stacking order. E.g.

#nav ul {
  background: none repeat scroll 0 0 #F6F6F6;
  border: 1px solid #D5D5D5;
  border-radius: 10px 10px 10px 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  display: none;
  left: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 35px;
  width: 185px;
  [COLOR="Red"]z-index: 10;[/COLOR]
}

#nav ul ul {
  left: 181px;
  top: -3px;
  [COLOR="Red"]z-index: 20;[/COLOR]
}
9

Thank you - Works great.

10

Great; glad it helped. :slight_smile: