I've been looking on google and I can't find what elements I should change in order to recreate the apple style menu bar for my website. The website is www.elegantmoose.com/ositech I want the white top bar to mimic the www.apple.com one. I've looked in the header.php but I can't see anything that can be changed to reflect that. This is the header file <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>> <head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> <title><?php elegant_titles(); ?></title> <?php elegant_description(); ?> <?php elegant_keywords(); ?> <?php elegant_canonical(); ?> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /> <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/colorpicker.css" type="text/css" media="screen" /> <link href='http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold' rel='stylesheet' type='text/css'/> <link href='http://fonts.googleapis.com/css?family=Kreon:light,regular' rel='stylesheet' type='text/css'/> <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'/> <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" /> <link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" /> <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> <!--[if lt IE 7]> <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/ie6style.css" /> <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/DD_belatedPNG_0.0.8a-min.js"></script> <script type="text/javascript">DD_belatedPNG.fix('img#logo, span.overlay, a.zoom-icon, a.more-icon, #menu, #menu-right, #menu-content, ul#top-menu ul, #menu-bar, .footer-widget ul li, span.post-overlay, #content-area, .avatar-overlay, .comment-arrow, .testimonials-item-bottom, #quote, #bottom-shadow, #quote .container');</script> <![endif]--> <!--[if IE 7]> <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/ie7style.css" /> <![endif]--> <!--[if IE 8]> <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/ie8style.css" /> <![endif]--> <script type="text/javascript"> document.documentElement.className = 'js'; </script> <?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <div id="et-wrapper"> <div id="header"> <div class="container clearfix"> <?php global $default_colorscheme; $colorSchemePath = ''; $colorScheme = get_option('leanbiz_color_scheme'); if ( $colorScheme <> $default_colorscheme ) $colorSchemePath = strtolower($colorScheme) . '/'; ?> <a href="<?php echo home_url(); ?>"> <?php $logo = (get_option('leanbiz_logo') <> '') ? esc_attr(get_option('leanbiz_logo')) : get_template_directory_uri() . '/images/' . $colorSchemePath . 'logo.png'; ?> <img src="<?php echo $logo; ?>" alt="<?php echo esc_attr(get_bloginfo('name')); ?>" id="logo"/> </a> <?php $menuClass = 'nav'; if ( get_option('leanbiz_disable_toptier') == 'on' ) $menuClass .= ' et_disable_top_tier'; $menuID = 'top-menu'; $primaryNav = ''; if (function_exists('wp_nav_menu')) { $primaryNav = wp_nav_menu( array( 'theme_location' => 'primary-menu', 'container' => '', 'fallback_cb' => '', 'menu_class' => $menuClass, 'menu_id' => $menuID, 'echo' => false ) ); }; if ($primaryNav == '') { ?> <ul id="<?php echo $menuID; ?>" class="<?php echo $menuClass; ?>"> <?php if (get_option('leanbiz_home_link') == 'on') { ?> <li <?php if (is_home()) echo('class="current_page_item"') ?>><a href="<?php echo home_url(); ?>"><?php esc_html_e('Home','LeanBiz') ?></a></li> <?php }; ?> <?php show_page_menu($menuClass,false,false); ?> <?php show_categories_menu($menuClass,false); ?> </ul> <!-- end ul#nav --> <?php } else echo($primaryNav); ?> <div id="search-form"> <form method="get" id="searchform" action="<?php echo home_url(); ?>/"> <input type="text" value="<?php esc_attr_e('Search this site...', 'LeanBiz'); ?>" name="s" id="searchinput" /> <input type="image" src="<?php echo get_template_directory_uri(); ?>/images/search_btn.png" id="searchsubmit" /> </form> </div> <!-- end #search-form --> <?php do_action('et_header_top'); ?> </div> <!-- end .container --> </div> <!-- end #header --> <?php global $et_show_featured_slider; $et_show_featured_slider = is_home() && get_option('leanbiz_featured') == 'on'; ?> <div id="featured"<?php if ( $et_show_featured_slider ) echo ' class="home-featured-slider"'; ?>> <div id="featured-shadow"> <div id="featured-light"> <?php $et_slider_settings_class = ''; if ( $et_show_featured_slider ) { $et_slider_auto = 'on' == get_option('leanbiz_slider_auto') ? ' et_slider_auto' : ''; $et_slider_auto_speed = false !== get_option('leanbiz_slider_autospeed') ? get_option('leanbiz_slider_autospeed') : '7000'; $et_slider_auto_speed = ' et_slider_autospeed_' . $et_slider_auto_speed; $et_slider_pause = 'on' == get_option('leanbiz_slider_pause') ? ' et_slider_pause' : ''; $et_slider_settings_class = $et_slider_auto . $et_slider_auto_speed . $et_slider_pause; } ?> <div <?php if ( $et_show_featured_slider ) echo ' id="main-featured-slider"'; ?> class="container<?php echo $et_slider_settings_class; ?>"> <?php if ( $et_show_featured_slider ) get_template_part('includes/featured','home'); ?> Code (markup): and this is the style.css for the main layout. /*------------------------------------------------*/ /*---------------[MAIN LAYOUT INFO]---------------*/ /*------------------------------------------------*/ #et-wrapper { background: url(images/featured-light.png) no-repeat center 72px; } #header { background-color: #ffffff; padding-top: 20px; } .container { text-align: left; margin: 0 auto; width: 960px; position: relative; } #logo { float: left; padding-right: 34px; } #search-form { float: right; background: url(images/search-bg.png) no-repeat; width: 147px; height: 30px; margin-top: 2px; } #search-form #searchinput { background: none; border: none; float: left; margin: 6px 7px 0 4px; width: 100px; padding-left: 9px; font-size: 11px; color: #bebebe; font-family: Georgia, serif; text-shadow: 1px 1px 1px #ffffff; font-style: italic; } #search-form #searchsubmit { margin-top: 10px; margin-right: 11px; float: right; } ul#top-menu { float: left; } #breadcrumbs { padding-top:57px; padding-left: 10px; margin-bottom: 18px; color:#bcbbbb; font-family: Georgia, serif; text-shadow: 1px 1px 1px #ffffff; font-style: italic; } #breadcrumbs a { color:#929292; text-decoration: none; font-family:'Droid Sans',Arial,Verdana,sans-serif; font-style: normal; } #breadcrumbs a:hover { color: #676767; } #breadcrumbs .raquo { color:#929292; font-family:'Droid Sans',Arial,Verdana,sans-serif; font-style: normal; } #content-border { border: 1px solid #e4e4e4; position:relative; } #content-top-border-shadow { position: absolute; top:-28px; right: 0px; background: url(images/content-top-border-shadow.png) no-repeat; height:28px; width:960px; } #content-bottom-border-shadow { position: absolute; bottom:-28px; right: 0px; background: url(images/content-bottom-border-shadow.png) no-repeat; height:28px; width:960px; } #content { border: 1px solid #ffffff; background: url(images/content-bg.png); } #content-right-bg { background: url(images/content-right-bg.png) repeat-y top right; position: relative; padding-bottom: 35px; } #left-area { width: 686px; float:left; } #sidebar { width: 227px; float:left; padding-top: 43px; padding-left: 43px; } .post { padding:44px 55px 15px 48px; position:relative; } .post-meta { position: absolute; background:url(images/post-meta.png) no-repeat; top:44px; left:-15px; width:48px; height:104px; text-align:center; } span.post-meta-date { display:block; font-family: Arial, sans-serif; font-size:10px; text-transform:uppercase; color:#c3c3c3; text-shadow: 1px 1px 1px #ffffff; font-weight:bold; padding-right: 2px; padding-top:5px; } span.post-meta-date span { display:block; color:#9d9d9d; font-size:18px; margin-top: -3px; padding-right: 2px; } span.meta-comment { display:block; padding: 17px 12px 0 10px; position: absolute; width: 27px; left: 0; bottom: 25px; } span.meta-comment a { display: block; color:#ffffff; text-shadow: 1px 1px 1px rgba(0,0,0,0.4); font-weight: bold; } span.meta-comment a:hover { text-decoration: none; color: #eee; } .post-thumbnail { display:block; float:left; position:relative; margin-right: 35px; } span.post-overlay { background:url(images/post-overlay.png) no-repeat; display:block; height:191px; left:0px; position:absolute; top:0px; width:191px; } h2.title, h1.title { font-size: 32px; padding-bottom: 13px; font-family: 'Lobster', Arial, sans-serif; text-shadow: 1px 1px 1px #ffffff; } h2.title a, h1.title { color: #d7594c; text-decoration: none; } .post p.meta-info { padding-bottom:7px; font-family: 'Kreon', Arial, sans-serif; font-size: 16px; color: #678e8d; text-shadow: 1px 1px 1px #ffffff; } .post p.meta-info a { color: #678e8d; text-decoration: none; } .post p.meta-info a:hover { color: #527170; } .post p { font-size:13px; } a.read-more { background:url(images/read-more.png) no-repeat right bottom; color:#afafaf; display:block; text-shadow: 1px 1px 1px #ffffff; padding-right:22px; text-decoration:none; height: 31px; line-height: 31px; float:right; font-family: Georgia, serif; font-style: italic; font-size:11px; } a.read-more:hover { color:#9d9c9c; } a.read-more span { background:url(images/read-more.png) no-repeat; display:block; padding-left: 13px; height: 31px; padding-right: 9px; } #content-top-shadow { position: absolute; top:-1px; right: 270px; background: url(images/content-top-shadow.png) no-repeat; height:117px; width:23px; } #content-bottom-shadow { position: absolute; bottom:-1px; right: 270px; background: url(images/content-bottom-shadow.png) no-repeat; height:117px; width:23px; } #content-widget-light { position: absolute; top:-1px; right: 204px; background: url(images/content-widget-light.png) no-repeat; height:64px; width:65px; } .entry { padding-bottom: 40px; background: url(images/post-bottom-bg.png) no-repeat bottom left; } .post ul, .comment-content ul { list-style-type: disc; padding: 10px 0px 10px 20px; } .post ol, .comment-content ol { list-style-type: decimal; list-style-position: inside; padding: 10px 0px 10px 2px; } .post ul li ul, .post ul li ol, .comment-content ul li ul, .comment-content ul li ol { padding: 2px 0px 2px 20px; } .post ol li ul, .post ol li ol, .comment-content ol li ul, .comment-content ol li ol { padding: 2px 0px 2px 35px; } /*------------------------------------------------*/ /*---------------[DROPDOWN MENU]------------------*/ /*------------------------------------------------*/ ul#top-menu li { padding: 8px 11px 0; font-size: 13px; } ul#top-menu a { color: #5d5d5d; text-decoration: none; padding-bottom: 22px; } ul#top-menu a:hover, ul#top-menu li.sfHover > a { color: #d2d2d2;} span.et_active_menu_item { display: block; background: url(images/menu_arrow.png) no-repeat bottom center; position: absolute; left: 0; bottom: -10px; height: 10px; width: 100%;z-index: 10; } ul#top-menu > li.current-menu-item > a { color: #d2d2d2; font-family: Georgia, serif; font-style: italic; } ul#top-menu li ul { width: 169px !important; padding: 0 13px 5px 18px; background: #fff; top: 50px !important; -moz-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.1); box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.1); border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-top-left-radius: 0px;-moz-border-radius-topleft: 0px; border-top-right-radius: 0px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topright: 0px; -webkit-border-top-right-radius: 0px; z-index: 9999; display: none; } ul#top-menu ul li { margin: 0 !important; padding: 0 !important; background: url(images/menu-separator.png) no-repeat; } ul#top-menu ul li a { padding: 10px 0px 10px 20px !important; width: 160px; } ul#top-menu li:hover ul ul, ul#top-menu li.sfHover ul ul { top: -1px !important; left: 181px !important; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } ul#top-menu ul ul > li:first-child { background: none; } Code (markup): If I could get help on this I'd be thrilled and I would also be willing to pay for a change like this. Thanks!