ThemeShaper Forums » Thematic

[closed]

Horizontally align logo and menu

(4 posts)
  • Started 9 years ago by 02rilund
  • Latest reply from helgatheviking
  • This topic is not resolved
  1. 02rilund
    Member

    Hi!

    I've searched the forum but haven't found anything on this. Does anybody know how to align the logo with the menu? I've moved the menu to the right using float:right and added a logo using:

    http://www.cozmoslabs.com/2009/05/28/add-a-header-image-to-thematic-the-easy-way/comment-page-1/

    Help would be much appreciated!

    Posted 9 years ago #
  2. i do know that both #branding div and #access ul.menu have widths of 940px. so first you probably have to give them much smaller widths... try 400px at first or something. then you can probably float the #branding and #access divs and they might line up?

    Posted 9 years ago #
  3. rashadpleasant
    Member

    did you ever find the answer for this issue... i've tried dif widths but it hasn't worked yet...

    Posted 9 years ago #
  4. how about

    function remove_access(){
    	remove_action('thematic_header','thematic_access',9);
    	remove_action('thematic_header','thematic_brandingopen',1);
    }
    add_action('init','remove_access');
    
    add_action('thematic_header','thematic_access',9);
    add_action('thematic_header','thematic_brandingopen',2);
    
    function header_inner_open(){
    echo '<div id="header-inner" class="clearfix">';
    }
    add_action('thematic_header','header_inner_open',1);
    
    function header_inner_close(){
    echo '</div><!--#header-inner-->';
    }
    add_action('thematic_header','header_inner_close',9);

    and for css:

    /* new clearfix
    * http://perishablepress.com/press/2009/12/06/new-clearfix-hack/
    */
    .clearfix:after {
    	visibility: hidden;
    	display: block;
    	font-size: 0;
    	content: " ";
    	clear: both;
    	height: 0;
    	}
    * html .clearfix             { zoom: 1; } /* IE6 */
    *:first-child+html .clearfix { zoom: 1; } /* IE7 */
    
    #header-inner{
    width: 940px;
    margin: 0 auto;
    }
    
    #branding{
    width: 350px;
    float: left;
    }
    
    #access{
    width: 350px;
    float: right;
    }

    you may need to do something w/ .menu too, but i'm not 100% sure.. i didn't fully test this, but it ought to get you the proper markup to do what you are trying to accomplish.

    Posted 9 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.