Make menu bar to full page width
Hi there, I'm using the ElegantThemes.com theme called DeepFocus and have the site here... http://www.kitchensofdenver.com/
I need to make just the main menu bar full width on the page. Everything else stays the same, centered like it is. Any idea what to change in css of header.php file?
I spliced up an image of the menu bar that is 11px wide that I can repeat. I'm assuming we need to adjust the css to do a repeat-x and 100% but now sure what or where the exact style changes would need to be done in the style.css file.
Any ideas experts?
I need to make just the main menu bar full width on the page. Everything else stays the same, centered like it is. Any idea what to change in css of header.php file?
I spliced up an image of the menu bar that is 11px wide that I can repeat. I'm assuming we need to adjust the css to do a repeat-x and 100% but now sure what or where the exact style changes would need to be done in the style.css file.
Any ideas experts?
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
here's the complete code if you can't follow above...
<!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" dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Sander and Sons | Custom Kitchen/Bath Cabinetry and Countertops</title>
<link rel="stylesheet" href="http://www.kitchensofdenver.com/wp-content/themes/DeepFocus/style.css" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title=" RSS Feed" href="http://www.kitchensofdenver.com/feed/" />
<link rel="alternate" type="application/atom+xml" title=" Atom Feed" href="http://www.kitchensofdenver.com/feed/atom/" />
<link rel="pingback" href="http://www.kitchensofdenver.com/xmlrpc.php" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="http://www.kitchensofdenver.com/wp-content/themes/DeepFocus/css/ie6style.css" />
<script type="text/javascript" src="http://www.kitchensofdenver.com/wp-content/themes/DeepFocus/js/DD_belatedPNG_0.0.8a-min.js"></script>
<script type="text/javascript">DD_belatedPNG.fix('img#logo, #search-form, #featured, span.date, .footer-widget ul li, span.overlay, a.readmore, a.readmore span, #recent-posts a#left-arrow, #recent-posts a#right-arrow, h4#recent, div#breadcrumbs, #sidebar h4');</script>
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="http://www.kitchensofdenver.com/wp-content/themes/DeepFocus/css/ie7style.css" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="http://www.kitchensofdenver.com/wp-content/themes/DeepFocus/css/ie8style.css" />
<![endif]-->
<script type="text/javascript">
document.documentElement.className = 'js';
</script>
<link rel="alternate" type="application/rss+xml" title=" » Feed" href="http://www.kitchensofdenver.com/feed/" />
<link rel="alternate" type="application/rss+xml" title=" » Comments Feed" href="http://www.kitchensofdenver.com/comments/feed/" />
<meta content="DeepFocus v.4.1" name="generator"/><link rel='stylesheet' id='portfolio_slideshow-css' href='http://www.kitchensofdenver.com/wp-content/plugins/portfolio-slideshow-pro/css/portfolio-slideshow.min.css?ver=1.8.3' type='text/css' media='screen' />
<link rel='stylesheet' id='fancybox-css' href='http://www.kitchensofdenver.com/wp-content/plugins/portfolio-slideshow-pro/js/fancybox/jquery.fancybox-1.3.4.css?ver=1.3.4a' type='text/css' media='screen' />
<link rel='stylesheet' id='ps-photoswipe-style-css' href='http://www.kitchensofdenver.com/wp-content/plugins/portfolio-slideshow-pro/css/photoswipe.min.css?ver=1.8.3' type='text/css' media='screen' />
<link rel='stylesheet' id='DOPTS_JScrollPaneStyle-css' href='http://www.kitchensofdenver.com/wp-content/plugins/dopts/libraries/gui/css/jquery.jscrollpane.css?ver=3.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='DOPTS_ThumbnailScrollerStyle-css' href='http://www.kitchensofdenver.com/wp-content/plugins/dopts/assets/gui/css/jquery.dop.ThumbnailScroller.css?ver=3.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='et_responsive-css' href='http://www.kitchensofdenver.com/wp-content/themes/DeepFocus/css/responsive.css?ver=3.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='et-shortcodes-css-css' href='http://www.kitchensofdenver.com/wp-content/themes/DeepFocus/epanel/shortcodes/css/shortcodes.css?ver=3.0' type='text/css' media='all' />
<link rel='stylesheet' id='et-shortcodes-responsive-css-css' href='http://www.kitchensofdenver.com/wp-content/themes/DeepFocus/epanel/shortcodes/css/shortcodes_responsive.css?ver=3.0' type='text/css' media='all' />
<link rel='stylesheet' id='gpp_gallery-css' href='http://www.kitchensofdenver.com/wp-content/plugins/gpp-slideshow/css/style.css?ver=3.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='et_page_templates-css' href='http://www.kitchensofdenver.com/wp-content/themes/DeepFocus/epanel/page_templates/page_templates.css?ver=1.8' type='text/css' media='screen' />
<script type='text/javascript' src='http://www.kitchensofdenver.com/wp-includes/js/jquery/jquery.js?ver=1.7.2'></script>
<script type='text/javascript' src='http://www.kitchensofdenver.com/wp-content/plugins/gpp-slideshow/js/jquery.flexslider-min.js?ver=3.4.2'></script>
<script type='text/javascript' src='http://www.kitchensofdenver.com/wp-content/plugins/gpp-slideshow/js/jquery.fader.js?ver=3.4.2'></script>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js?ver=3.4.2'></script>
<script type='text/javascript' src='http://www.kitchensofdenver.com/wp-content/plugins/dopts/assets/js/jquery.dop.ThumbnailScroller.js?ver=3.4.2'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.kitchensofdenver.com/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://www.kitchensofdenver.com/wp-includes/wlwmanifest.xml" />
<meta name="generator" content="WordPress 3.4.2" />
<!-- All in One SEO Pack 1.6.15.3 by Michael Torbert of Semper Fi Web Design[364,374] -->
<link rel="canonical" href="http://www.kitchensofdenver.com/" />
<!-- /all in one seo pack -->
<script type="text/javascript">
jQuery(document).ready(function($){
var imgcount = 0;
$(".flexslider").flexslider({
animation: "fade",
animationDuration: 1000,
slideshowSpeed: 3500,
pauseOnHover: true,
controlNav: true,
directionNav: true,
manualControls: ".gpp_slideshow_thumbnails li a"
});
});
</script><!-- <meta name="NextGEN" version="1.9.10" /> -->
<!-- Portfolio Slideshow-->
<noscript><link rel="stylesheet" type="text/css" href="http://www.kitchensofdenver.com/wp-content/plugins/portfolio-slideshow-pro/css/portfolio-slideshow-noscript.css?ver=1.8.3" /></noscript><style type="text/css">.centered .ps-next {} .scrollable {height:150px;} .ps-prev {top:80px} .ps-next {top:-85px} .slideshow-wrapper .pscarousel img {margin-right:8px !important; margin-bottom:8px !important;}</style><script type="text/javascript">/* <![CDATA[ */var psTimeout = new Array(); psAudio = new Array(); var psAutoplay = new Array(); var psDelay = new Array(); var psFluid = new Array(); var psTrans = new Array(); var psRandom = new Array(); var psCarouselSize = new Array(); var touchWipe = new Array(); var psPagerStyle = new Array(); psCarousel = new Array(); var psSpeed = new Array(); var psLoop = new Array(); var psClickOpens = new Array(); /* ]]> */</script>
<!--//Portfolio Slideshow-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /><style type="text/css" id="custom-background-css">
body.custom-background { background-color: #E2D9CD; background-image: url('http://kitchensofdenver.seozones1.com/wp-content/uploads/2012/12/bg9.png'); background-repeat: repeat; background-position: top left; background-attachment: scroll; }
</style>
<style type="text/css">
div.pp_default .pp_content_container .pp_details { color: #666; }
</style>
</head>
<body id="home-featured" class="home blog custom-background gecko et_includes_sidebar">
<div id="top">
<div id="header">
<table id="home_table1" style="width: 960px;" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td align="left" valign="top" width="679"><a href="/" title="Sander and Sons, Inc. | Custom Kitchen/Bath Cabinetry and Countertops"><img src="/images/logo.png" border="0" alt="Sander and Sons, Inc. | Custom Kitchen/Bath Cabinetry and Countertops" width="679" height="136"></a></td>
<td align="right" valign="top" width="281">
<div class="header-right1">
<h3 class="header-right-h3">Sander and Sons, Inc. </h3>
<h3 class="header-right-tagline">“Beautifully Designed Kitchens<br />of Denver Since 1996!”</h3>
<p>7540 S. Grant St.<br />Littleton, CO 80122<br />Phone: 303.347.1345<br />Fax: 303.347.0992<br /><a class="blacklink" href="mailto:info@kitchensofdenver.com">info@kitchensofdenver.com</a></div>
</td>
</tr>
</tbody>
</table>
<div id="menu" class="clearfix"><div class="container">
<ul id="primary" class="nav"><li id="menu-item-737" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-737"><a title="Home" href="/">Home</a></li>
<li id="menu-item-997" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-997"><a title="Kitchen/Bath Cabinetry" href="http://www.kitchensofdenver.com/cabinetry/">Kitchen/Bath Cabinetry</a></li>
<li id="menu-item-996" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-996"><a title="Countertops" href="http://www.kitchensofdenver.com/countertops/">Countertops</a></li>
<li id="menu-item-995" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-995"><a title="Remodel Process" href="http://www.kitchensofdenver.com/remodel-process/">Remodel Process</a></li>
<li id="menu-item-998" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-998"><a title="Portfolio" href="http://www.kitchensofdenver.com/portfolio/">Portfolio</a></li>
<li id="menu-item-735" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-735"><a title="Our Story" href="http://www.kitchensofdenver.com/our-story/">Our Story</a></li>
<li id="menu-item-744" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-744"><a title="Contact Us" href="http://www.kitchensofdenver.com/contact-us/">Contact Us</a></li>
<li id="menu-item-1005" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1005"><a href="http://www.kitchensofdenver.com/our-blog/">Blog</a></li>
</ul>
<div id="social-header">
<a href="https://www.facebook.com/SanderAndSons" title="Facebook" target="_blank"><img src="/images/social/facebook-sm.png" border="0" width="32" height="32" alt="Facebook"></a> <a href="http://twitter.com/sanderandsons" title="Twitter" target="_blank"><img src="/images/social/twitter-sm.png" border="0" width="32" height="32" alt="Twitter"></a> <a href="http://www.youtube.com/user/sanderandsons" title="You Tube" target="_blank"><img src="/images/social/youtube-sm.png" border="0" width="32" height="32" alt="You Tube"></a> <a href="#" title="Google Plus" target="_blank"><img src="/images/social/googleplus-sm.png" border="0" width="32" height="32" alt="Google Plus"></a>
</div>
<p> <!-- end #search-form --></p>
<a href="#" id="mobile_nav" class="closed">Navigation Menu<span></span></a> </div> <!-- end #menu -->
</div> <!-- end #header -->
</div> <!-- end .container -->
</div> <!-- end #top -->
<div id="content-full">
<div id="home-top"></div>
<div id="hr">
<div id="hr-center">
<div id="intro">
<div class="center-highlight">
<div class="container">
<div class="flex-container"><div id="featured" class="flexslider et_slider_auto et_slider_speed_3500">
<span id="left-shadow"></span>
<span id="right-shadow"></span>
<ul class="slides">
<li class="slide">
<img src="http://www.kitchensofdenver.com//images/home_banners/top-banner-3.jpg" alt='home banner 3' width='960' height='447' /> <div class="overlay"></div>
<div class="overlay2"></div>
<div class="description">
<div class="outer-content">
<div class="inner-content">
<h2 class="title"><a href="http://www.kitchensofdenver.com/home-banner-3/">home banner 3</a></h2>
<p></p>
</div> <!-- end .inner-content -->
</div> <!-- end .outer-content -->
<div class="bottom">
<a href="http://www.kitchensofdenver.com/home-banner-3/" class="readmore"><span>Read More</span></a>
</div> <!-- end .bottom -->
</div> <!-- end .description -->
</li> <!-- end .slide -->
<li class="slide">
<img src="http://www.kitchensofdenver.com//images/home_banners/top-banner-2.jpg" alt='home banner 2' width='960' height='447' /> <div class="overlay"></div>
<div class="overlay2"></div>
<div class="description">
<div class="outer-content">
<div class="inner-content">
<h2 class="title"><a href="http://www.kitchensofdenver.com/home-banner-2/">home banner 2</a></h2>
<p></p>
</div> <!-- end .inner-content -->
</div> <!-- end .outer-content -->
<div class="bottom">
<a href="http://www.kitchensofdenver.com/home-banner-2/" class="readmore"><span>Read More</span></a>
</div> <!-- end .bottom -->
</div> <!-- end .description -->
</li> <!-- end .slide -->
<li class="slide">
<img src="http://www.kitchensofdenver.com//images/home_banners/top-banner-1.jpg" alt='home banner 1' width='960' height='447' /> <div class="overlay"></div>
<div class="overlay2"></div>
<div class="description">
<div class="outer-content">
<div class="inner-content">
<h2 class="title"><a href="http://www.kitchensofdenver.com/home-banner-1/">home banner 1</a></h2>
<p></p>
</div> <!-- end .inner-content -->
</div> <!-- end .outer-content -->
<div class="bottom">
<a href="http://www.kitchensofdenver.com/home-banner-1/" class="readmore"><span>Read More</span></a>
</div> <!-- end .bottom -->
</div> <!-- end .description -->
</li> <!-- end .slide -->
</ul> <!-- end .slides -->
<div id="controllers-wrapper">
<div id="controllers">
<a href="#" id="left-arrow">Previous</a>
<a href="#" rel="1" class="switch active">1</a>
<a href="#" rel="2" class="switch">2</a>
<a href="#" rel="3" class="switch">3</a>
<a href="#" id="right-arrow">Next</a>
</div> <!-- end #controllers -->
<div id="controllers-right"></div>
</div> <!-- end #controllers-wrapper -->
</div> <!-- end #featured -->
</div> <!-- end .flex-container -->
</div> <!-- end .container -->
</div> <!-- end .center-highlight -->
</div> <!-- end #intro -->
</div> <!-- end #hr-center -->
</div> <!-- end #hr -->
<div class="center-highlight">
<div class="container">
<center><div class="DOPThumbnailScrollerContainer" id="DOPThumbnailScroller1">
<a href="http://www.kitchensofdenver.com/wp-content/plugins/dopts/frontend-ajax.php"></a>
</div>
<script type="text/JavaScript">
jQuery(document).ready(function(){
jQuery('#DOPThumbnailScroller1').DOPThumbnailScroller();
});
</script></center>
<table id="home_table" style="width: 960px;" border="0" cellspacing="0" cellpadding="0" align="left">
<tbody>
<tr>
<td colspan="3" align="left" valign="top" width="648">
<div style="padding-bottom:25px;">When it’s your home, your gathering place, your family, we want nothing more than to create the kitchen that reflects your style.</p>
<p>Sander and Sons will personally work with you to achieve the dream kitchen or bathroom you’ve always wanted. Whether it is cozy and relaxing, sleek and modern, or ergonomic and functional, Denver based Sander and Sons will customize a design plan to fit your style, budget, and schedule. We specialize in Custom Kitchen and Bathroom Remodeling and Design.</p>
<p>Our design specialists will help you choose the best product for your needs; whether it is a simple countertop replacement to help redecorate an outdated room, or a full remodel complete with cabinets designed to make an old room new again. </p>
<p>We pride ourselves in combining old world craftsmanship and classic styles with the latest trends and ideas. We’ll listen to your desires and transform them into something you will love. Each kitchen or bath will always have the most important element incorporated into the design…you! We feel strongly that this is our main purpose because, above all, it’s your home.</p>
<p>Visit our Facebook and You Tube pages and follow us on Twitter for our latest news and updates, along with inspiration and trends for kitchens and baths!</p></div>
</td>
<td rowspan="2" align="left" valign="top" width="312">
<div style="padding-left:35px;">
<div style="padding-bottom:16px;padding-left:5px;">Fill out the form below, then click Send.</div>
<!-- Fast Secure Contact Form plugin 3.1.8 - begin - FastSecureContactForm.com -->
<div id="FSContact1" style="width:240px;background: #E2D9CD;border:1px solid #88463A;padding:15px;border-radius: 8px;-webkit-border-radius: 8px;-webkit-background-clip: padding-box;-webkit-background-origin: padding-box;">
<form action="http://www.kitchensofdenver.com/#FSContact1" id="si_contact_form1" method="post">
<div>
<input type="hidden" name="si_contact_CID" value="1" />
</div>
<div style="text-align:left; padding-top:5px;color:#000000;">
<label for="si_contact_name1">Name:</label>
</div>
<div style="text-align:left;">
<input style="text-align:left; margin:0;width:230px; height:19px;" type="text" id="si_contact_name1" name="si_contact_name" value="" size="38" />
</div>
<div style="text-align:left; padding-top:5px;color:#000000;">
<label for="si_contact_email1">E-Mail Address:</label>
</div>
<div style="text-align:left;">
<input style="text-align:left; margin:0;width:230px; height:19px;" type="text" id="si_contact_email1" name="si_contact_email" value="" size="38" />
</div>
<div style="text-align:left; padding-top:5px;color:#000000;">
<label for="si_contact_ex_field1_1">Phone:</label>
</div>
<div style="text-align:left;">
<input style="text-align:left; margin:0;width:230px; height:19px;" type="text" id="si_contact_ex_field1_1" name="si_contact_ex_field1" value="" size="38" />
</div>
<div style="text-align:left; padding-top:5px;color:#000000;">
<label for="si_contact_ex_field1_2">Type of Service:</label>
</div>
<div style="text-align:left;">
<select style="width:235px;max-width:235px;" id="si_contact_ex_field1_2" name="si_contact_ex_field2">
<option value="Kitchen Cabinets">Kitchen Cabinets</option>
<option value="Kitchen Remodeling">Kitchen Remodeling</option>
<option value="Bathroom Remodeling">Bathroom Remodeling</option>
<option value="Bathroom Cabinets">Bathroom Cabinets</option>
<option value="Countertops">Countertops</option>
<option value="Other">Other</option>
</select>
</div>
<div style="text-align:left; padding-top:5px;color:#000000;">
<label for="si_contact_ex_field1_3">How May We Assist You?</label>
</div>
<div style="text-align:left;">
<textarea style="height:75px;width:225px;max-width:225px;max-height:75px;resize:none;" id="si_contact_ex_field1_3" name="si_contact_ex_field3" cols="50" rows="10"></textarea>
</div>
<input type="hidden" name="si_postonce_1" value="d5d5add8b77e3cb560a67fe4a8b77f79,1359693947" />
<div style="text-align:left; padding-top:20px; padding-bottom:30px; padding-left:0px;">
<input type="hidden" name="si_contact_action" value="send" />
<input type="hidden" name="si_contact_form_id" value="1" />
<input type="submit" id="fsc-submit-1" style="background:url(/images/send.png) no-repeat; width:46px; height:31px; padding:0; float: left; border:none; font-size:0px; cursor:pointer;" value="Send" />
</div>
</form>
</div>
<!-- Fast Secure Contact Form plugin 3.1.8 - end - FastSecureContactForm.com --></div>
</td>
</tr>
<tr>
<td align="left" valign="top" width="289">
<div style="padding-bottom: 16px;">
<h3 class="hometitle">Kitchen/Bath Cabinetry</h3>
</div>
<p>At Sander and Sons, we offer a free in-home consultation with one of our talented designers to go over the details of your project. We recognize that your project is a big investment in your home and that is why we offer a ‘no obligation’ consultation and complete estimate for your project. It is important for you to find a company that you can trust and you are comfortable working with. To schedule an appointment or check on current monthly promotions, please visit or call our showroom at 303-347-1345.<br /><a href="/cabinetry" class="readmore"><span>Learn More</span></a></td>
<td align="left" valign="top" width="70"> </td>
<td align="left" valign="top" width="289">
<div style="padding-bottom: 16px;">
<h3 class="hometitle">Countertops</h3>
</div>
<p>At Sander and Sons, we offer a free in-home consultation with one of our talented designers to go over the details of your project. We recognize that your project is a big investment in your home and that is why we offer a ‘no obligation’ consultation and complete estimate for your project. It is important for you to find a company that you can trust and you are comfortable working with. To schedule an appointment or check on current monthly promotions, please visit or call our showroom at 303-347-1345.<br /><a href="countertops" class="readmore"><span>Learn More</span></a></td>
</tr>
</tbody>
</table>
<div class="clear"></div>
</div> <!-- end .container -->
<div id="footer">
<div id="footer-wrapper">
<div id="footer-center">
<div class="container">
<p id="copyright">© 2013 <a href="/" title="">Sander and Sons, Inc.</a> All Rights Reserved. <a href="privacy-policy" title="Privacy Policy">Privacy Policy</a></p>
<div id="my_right">Web Design and Web Hosting by <a href="https://www.seozones.com" target="_blank" title="SEO Zones, Inc.">SEO Zones, Inc.</a>, a Denver Company</div>
</div> <!-- end .container -->
</div> <!-- end #footer-center -->
</div> <!-- end #footer-wrapper -->
</div> <!-- end #footer -->
</div> <!-- end .center-highlight -->
</div> <!-- end #content-full -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.kitchensofdenver.com/wp-content/themes/DeepFocus/js/jquery.cycle.all.min.js"></script>
<script type="text/javascript" src="http://www.kitchensofdenver.com/wp-content/themes/DeepFocus/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="http://www.kitchensofdenver.com/wp-content/themes/DeepFocus/js/superfish.js"></script>
<script type="text/javascript" src="http://www.kitchensofdenver.com/wp-content/themes/DeepFocus/js/scrollTo.js"></script>
<script type="text/javascript" src="http://www.kitchensofdenver.com/wp-content/themes/DeepFocus/js/serialScroll.js"></script>
<script type="text/javascript">
//<![CDATA[
jQuery.noConflict();
jQuery('ul.nav').superfish({
delay: 300, // one second delay on mouseout
animation: {opacity:'show',height:'show'}, // fade-in and slide-down animation
speed: 'fast', // faster animation speed
autoArrows: true, // disable generation of arrow mark-up
dropShadows: false // disable drop shadows
});
jQuery('ul.nav > li > a.sf-with-ul').parent('li').addClass('sf-ul');
et_search_bar();
if (jQuery('#blog').length) {
jQuery('#blog').serialScroll({
target:'.recentscroll',
items:'li', // Selector to the items ( relative to the matched elements, '#sections' in this case )
prev:'#controllers2 a#cright-arrow',// Selector to the 'prev' button (absolute!, meaning it's relative to the document)
next:'#controllers2 a#cleft-arrow',// Selector to the 'next' button (absolute too)
axis:'y',// The default is 'y' scroll on both ways
duration:200,// Length of the animation (if you scroll 2 axes and use queue, then each axis take half this time)
force:true // Force a scroll to the element specified by 'start' (some browsers don't reset on refreshes)
});
}
var $portfolioItem = jQuery('.item');
$portfolioItem.find('.item-image').css('background-color','#000000');
jQuery('.zoom-icon, .more-icon').css('opacity','0');
$portfolioItem.hover(function(){
jQuery(this).find('.item-image').stop(true, true).animate({top: -10}, 500).find('img.portfolio').stop(true, true).animate({opacity: 0.7},500);
jQuery(this).find('.zoom-icon').stop(true, true).animate({opacity: 1, left: 43},400);
jQuery(this).find('.more-icon').stop(true, true).animate({opacity: 1, left: 110},400);
}, function(){
jQuery(this).find('.zoom-icon').stop(true, true).animate({opacity: 0, left: 31},400);
jQuery(this).find('.more-icon').stop(true, true).animate({opacity: 0, left: 128},400);
jQuery(this).find('.item-image').stop(true, true).animate({top: 0}, 500).find('img.portfolio').stop(true, true).animate({opacity: 1},500);
});
function et_cycle_integration(){
var $featured = jQuery('#featured'),
$featured_content = jQuery('#slides'),
$controller = jQuery('#controllers'),
$slider_control_tab = $controller.find('a.switch');
if ($featured_content.length) {
jQuery('div.slide .description').css({'visibility':'hidden','opacity':'0'});
$featured_content.css( 'backgroundImage', 'none' );
if ( $featured_content.find('.slide').length == 1 ){
$featured_content.find('.slide').css({'position':'absolute','top':'0','left':'0'}).show();
jQuery('#controllers-wrapper').hide();
}
$featured_content.cycle({
fx: 'fade',
timeout: 0,
speed: 700,
cleartypeNoBg: true
});
var et_leftMargin = parseFloat( $featured.width()- $featured.find('#controllers-wrapper').outerWidth(true)) / 2;
$featured.find('#controllers-wrapper').css({'left' : et_leftMargin});
var pause_scroll = false;
jQuery('#featured .slide').hover(function(){
jQuery('div.slide:visible .description').css('visibility','visible').stop().animate({opacity: 1, top:43},500);
pause_scroll = true;
},function(){
jQuery('div.slide:visible .description').stop().animate({opacity: 0, top:33},500,function(){
jQuery(this).css('visibility','hidden');
});
pause_scroll = false;
});
};
$slider_control_tab.hover(function(){
jQuery(this).find('img').stop().animate({opacity: 1},300);
}).mouseleave(function(){
if (!jQuery(this).hasClass("active")) jQuery(this).find('img').stop().animate({opacity: 0.7},300);
});
var ordernum;
function gonext(this_element){
$controller.find("a.active").removeClass('active');
this_element.addClass('active');
ordernum = this_element.attr("rel");
$featured_content.cycle(ordernum-1);
//SjQuery('div.slide:visible .description').stop().animate({opacity: 0, top:33},500);
if (typeof interval != 'undefined') {
clearInterval(interval);
auto_rotate();
};
}
$slider_control_tab.click(function(){
gonext(jQuery(this));
return false;
});
var $nextArrow = $featured.find('a#right-arrow'),
$prevArrow = $featured.find('a#left-arrow');
$nextArrow.click(function(){
var activeSlide = $controller.find('a.active').attr("rel"),
$nextSlide = $controller.find('a.switch:eq('+ activeSlide +')');
if ($nextSlide.length) gonext($nextSlide)
else gonext($controller.find('a.switch:eq(0)'));
return false;
});
$prevArrow.click(function(){
var activeSlide = $controller.find('a.active').attr("rel")-2,
$nextSlide = $controller.find('a.switch:eq('+ activeSlide +')');
if ($nextSlide.length) gonext($nextSlide);
else {
var slidesNum = $slider_control_tab.length - 1;
gonext($controller.find('a.switch:eq('+ slidesNum +')'));
};
return false;
});
auto_rotate();
function auto_rotate(){
interval = setInterval(function() {
if (!pause_scroll) $nextArrow.click();
}, 3500);
}
};
<!---- Search Bar Improvements ---->
function et_search_bar(){
var $searchform = jQuery('#menu div#search-form'),
$searchinput = $searchform.find("input#searchinput"),
searchvalue = $searchinput.val();
$searchinput.focus(function(){
if (jQuery(this).val() === searchvalue) jQuery(this).val("");
}).blur(function(){
if (jQuery(this).val() === "") jQuery(this).val(searchvalue);
});
};
var $footer_widget = jQuery("#footer .widget");
if ($footer_widget.length) {
$footer_widget.each(function (index, domEle) {
// domEle == this
if ((index+1)%3 == 0) jQuery(domEle).addClass("last").after("<div class='clear'></div>");
});
};
jQuery(window).load(function(){
var $single_gallery_thumb = jQuery('.gallery-thumb');
if ($single_gallery_thumb.length) {
var single_gallery_thumb = $single_gallery_thumb.width(),
offset = single_gallery_thumb-434;
if ( offset < 0 ) {
jQuery('.gallery-thumb-bottom').css({'width':'auto','padding':'0 '+(single_gallery_thumb / 2)+'px'});
}
else jQuery('.gallery-thumb-bottom').css('width',offset);
}
});
//]]>
</script>
<script type='text/javascript'>/* <![CDATA[ */ var portfolioSlideshowOptions = { psFancyBox:true, psHash:0, psThumbSize:'175', psFluid:false, psTouchSwipe:false, psKeyboardNav:false, psBackgroundImages:false, psInfoTxt:'of' };/* ]]> */</script><script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-28678004-40']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script><script type='text/javascript' src='http://www.kitchensofdenver.com/wp-content/plugins/portfolio-slideshow-pro/js/scrollable.min.js?ver=1.2.5'></script>
<script type='text/javascript' src='http://www.kitchensofdenver.com/wp-content/plugins/portfolio-slideshow-pro/js/portfolio-slideshow.min.js?ver=1.8.3'></script>
<script type='text/javascript' src='http://www.kitchensofdenver.com/wp-content/plugins/portfolio-slideshow-pro/js/fancybox/jquery.fancybox-1.3.4.pack.js?ver=1.3.4a'></script>
<script type='text/javascript' src='http://www.kitchensofdenver.com/wp-content/plugins/portfolio-slideshow-pro/js/code.photoswipe.jquery-3.0.4.min.js?ver=3.0.4'></script>
<script type='text/javascript' src='http://www.kitchensofdenver.com/wp-content/plugins/portfolio-slideshow-pro/js/jquery.cycle.all.min.js?ver=2.99'></script>
<script type='text/javascript' src='http://www.kitchensofdenver.com/wp-content/themes/DeepFocus/js/jquery.fitvids.js?ver=1.0'></script>
<script type='text/javascript' src='http://www.kitchensofdenver.com/wp-content/themes/DeepFocus/js/jquery.flexslider-min.js?ver=1.0'></script>
<script type='text/javascript' src='http://www.kitchensofdenver.com/wp-content/themes/DeepFocus/js/et_flexslider.js?ver=1.0'></script>
<script type='text/javascript' src='http://www.kitchensofdenver.com/wp-content/themes/DeepFocus/epanel/page_templates/js/fancybox/jquery.easing-1.3.pack.js?ver=1.3.4'></script>
<script type='text/javascript' src='http://www.kitchensofdenver.com/wp-content/themes/DeepFocus/epanel/page_templates/js/et-ptemplates-frontend.js?ver=1.1'></script>
</body>
</html>
<!-- This Quick Cache file was built for ( www.kitchensofdenver.com/ ) in 0.18026 seconds, on Feb 1st, 2013 at 4:45 am UTC. -->
<!-- This Quick Cache file will automatically expire ( and be re-built automatically ) on Feb 1st, 2013 at 5:45 am UTC -->
<!-- +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
<!-- Quick Cache Is Fully Functional :-) ... A Quick Cache file was just served for ( www.kitchensofdenver.com/ ) in 0.00055 seconds, on Feb 1st, 2013 at 4:54 am UTC. -->ASKER
okay, I'll try that.
ASKER
Okay, I tried but then the whole page was jacked up so I reverted it back.
ASKER
what am I doing wrong?
Close the div before the menu, then reopen it after there menu. That should keep the rest normal
ASKER
so are you saying:
<div id="menu" class="clearfix"></div><di
Do I also close the container div as well?
<div id="menu" class="clearfix"></div><di
Do I also close the container div as well?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks!
ASKER