Support » Theme: Buttercream » Adding a Navigational bar

  • Resolved Vikkivik


    Ive been working on modifying this AWESOME theme ( Thank you Caroline Moore!) and I have run into a snag
    I want to place a navigational bar in a specific area but I cant seem to add it correctly. The site is temporarily at so you can see what my issue is. The nav bar is in the right spot but it will not properly align no matter what I do. I made it as a 775×50 img sliced up to fit correctly but the coding will not allow it to stay there. Is there any way you can look at it and let me know what Im doing wrong?
    Thank you!
    Vikki ( PS Caroline- Thanks for answering me on Twitter! )

    here is a copy of the header.php code:

     * The Header for our theme.
     * Displays all of the <head> section and everything up till <div id="main">
     * @package Buttercream
     * @since Buttercream 1.0
    ?><!DOCTYPE html>
    <html <?php language_attributes(); ?>>
    <meta charset="<?php bloginfo( 'charset' ); ?>" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10" />
    	 * Print the <title> tag based on what is being viewed.
    	global $page, $paged;
    	wp_title( '|', true, 'right' );
    	// Add the blog name.
    	bloginfo( 'name' );
    	// Add the blog description for the home/front page.
    	$site_description = get_bloginfo( 'description', 'display' );
    	if ( $site_description && ( is_home() || is_front_page() ) )
    		echo " | $site_description";
    	// Add a page number if necessary:
    	if ( $paged >= 2 || $page >= 2 )
    		echo ' | ' . sprintf( __( 'Page %s', 'buttercream' ), max( $paged, $page ) );
    <link rel="profile" href="" />
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
    <!--[if lt IE 9]>
    <link rel="stylesheet" type="text/css" media="all" href="<?php echo get_template_directory_uri(); ?>/layouts/ie.css"/>
    <?php wp_head(); ?>
    <script type="text/javascript">
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    <body <?php body_class(); ?> onLoad="MM_preloadImages('','','','','','','')">
    <div id="page" class="hfeed site">
    	<?php do_action( 'buttercream_before' ); ?>
    	//If we're using a custom header that is not the default, use a custom prefix
    	$buttercream_header_image = get_header_image();
    	if ( false == buttercream_is_a_default_header() ) {
    		$buttercream_custom = 'custom-';
    	else {
    		$buttercream_custom = '';
    	<?php if ( ! empty( $buttercream_header_image ) ) { ?>
    		<div id="<?php echo $buttercream_custom; ?>header-image">
    			<a>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
    				<img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" />
    	<?php } // if ( ! empty( $buttercream_header_image ) ) ?>
    		if ( empty( $buttercream_custom ) && ! empty( $buttercream_header_image ) ) { //If so, add the responsive versions here ?>
    			<div id="header-imagesm"></div>
    			<div class="bluebar"></div>
    	<?php } // if ( $buttercream_custom ) ?>
    	<header id="masthead" class="site-header" role="banner">
    			<h1 class="site-title"><a>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
    			<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
    <!-- Save for Web Slices (Untitled-2.psd) -->
    <table id="Table_01" width="775" height="50" border="0" cellpadding="0" cellspacing="0">
    	  <td width="91"><a href=""><img src="" name="Home" width="91" height="50" border="0"></a></td>
    	  <td width="77"><a href=""><img src="" name="Shop" width="77" height="50" border="0"></a></td>
    	  <td width="73"><a href="//"><img src="" name="FAQ" width="73" height="50" border="0"></a></td>
    <td width="108"><a href=""><img src="" name="Designs" width="108" height="50" border="0"></a></td>
    	  <td width="120">
    	  <a href=""><img src="" name="About Us" width="120" height="50" border="0"></a></td>
    	  <td width="166">
    	  <a href="//"><img src="" name="Join Us" width="166" height="50" border="0"></a></td>
    	  <td width="140"><a href="#"><img src="" name="Contact Us" width="140" height="50" border="0"></a></td>
    <!-- End Save for Web Slices -->
    	</header><!-- #masthead .site-header -->
    	<div id="main">

    [Moderator Note: Please post code or markup snippets between backticks or use the code button. Or better still – use the pastebin. As it stands, your code has now permanently damaged/corrupted by the forum’s parser.]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Theme Author Caroline Moore


    Hi! Buttercream adds padding to all table cells by default (td tags), which is causing the extra space.

    Ideally you would use divs instead of tables for layout like this, but adding style="padding: 0;" to each td tag should take care of it.

    Hope this helps!

    Hi again Caroline
    Thanks for the advice. It JUST about fixed the problem and now there are little white lines between some of the buttons. Is there any way to get rid of those or something? Can you take another quick look? Im so sorry to bother you but this blog is going to work so well for me. Thank you for developing it and thanks in advance!

    Theme Author Caroline Moore


    I saw that earlier, and it looks like you need to adjust the widths on the td tags slightly, they’re off by a pixel here or there.

    Hi I think I fixed it would you mind taking a look? And also in the original theme the three columns below werent there or were they? What are they for?
    Thank you for all your help You rock!

    Theme Author Caroline Moore


    Everything is lined up properly for me now!

    The three columns underneath the content are widget areas, which you can configure by going to Appearance -> Widgets in your Dashboard.

    awesome…thank you for everything. I sent you an email via your esty shop because I couldnt find one anywhere else but of course you referred me here before I got an answer via email. Thank you again!

    Thank you yet again…I have another question but I think I will post it as a new topic.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Adding a Navigational bar’ is closed to new replies.