WordPress.org

1. Selorian
   Member
   Posted 4 years ago #
   

   I am trying to incorporate a Glossy Horizontal Menu found here (http://www.dynamicdrive.com/style/csslibrary/item/glossy_horizontal_menu/) into a WordPress site I'm building using the free version of the Mimbo theme.

   Here is the code from the glossy menu:

   <style type="text/css">
   
   /*Credits: By Santosh Setty (http://webdesigninfo.wordpress.com) */
   /*Posted to: Dynamic Drive CSS Library (http://www.dynamicdrive.com/style/) */
   
   .glossymenu{
   	position: relative;
   	padding: 0 0 0 34px;
   	margin: 0 auto 0 auto;
   	background: url(media/menur_bg.gif) repeat-x; /*tab background image path*/
   	height: 46px;
   	list-style: none;
   }
   
   .glossymenu li{
   	float:left;
   }
   
   .glossymenu li a{
   	float: left;
   	display: block;
   	color:#000;
   	text-decoration: none;
   	font-family: sans-serif;
   	font-size: 13px;
   	font-weight: bold;
   	padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/
   	height: 46px;
   	line-height: 46px;
   	text-align: center;
   	cursor: pointer;
   }
   
   .glossymenu li a b{
   	float: left;
   	display: block;
   	padding: 0 24px 0 8px; /*Padding of menu items*/
   }
   
   .glossymenu li.current a, .glossymenu li a:hover{
   	color: #fff;
   	background: url(media/menur_hover_left.gif) no-repeat; /*left tab image path*/
   	background-position: left;
   }
   
   .glossymenu li.current a b, .glossymenu li a:hover b{
   	color: #fff;
   	background: url(media/menur_hover_right.gif) no-repeat right top; /*right tab image path*/
   }
   
   </style>

   And here is the navigation code from Mimbo:

   #nav {
   	background:#777;
   	font-size:1.1em;
   	}
   
   #nav, #nav ul {
   	list-style: none;
   	line-height: 1;
   	}
   
   #nav a, #nav a:hover {
   	display: block;
   	text-decoration: none;
   	border:none;
   	}
   
   #nav li {
   	float: left;
   	list-style:none;
   	border-right:1px solid #a9a9a9;
   	}
   
   #nav a, #nav a:visited {
   	display:block;
   	font-weight:bold;
   	color: #f5f5f4;
   	padding:6px 12px;
   	}
   
   #nav a:hover, #nav a:active, .current_page_item	a, #home .on {
   	background:#000;
   	text-decoration:none
   	}

   Iève worked for the last 24 hours trying to get this to work together without having to resort to doing it where I have to manually add the navigation links. Does anyone have any suggestionsÉ I would greatly appreciate it.

   Thanks

Topic Closed

This topic has been closed to new replies.