WordPress.org

Ready to get started?Download WordPress

Forums

Quick Question (Logo Aligning) (2 posts)

  1. Gitominoti
    Member
    Posted 2 years ago #

    I am trying to align my logo with the body of my site, but I can't find that option anywhere in the style.css file.

    http://i.imgur.com/gN2YK.png

    So I would like the black box to line up with the white section below it.

    This is currently what I have in the header section:

    #header-wrap {
    	background:url(images/header-back.png) repeat;
    	box-shadow: 0px 3px 10px #111111;
    	width: 100%
    }
    
    #header {
    	width: 920px;
    	margin: 0 auto;
    	margin-top: 0px;
    	margin-bottom: 20px;
    	position: relative;
    	padding: 20px 30px;
    	padding-bottom: 16px;
    }
    #logo a{
    	font-size: 32px;
        font-weight: 700;
        color: #333;
    	padding: 0px;
    	margin-left: 0px;
        text-decoration: none;
    }
    #logo a:hover { color: #ef4034; }
    
    /*-------------------------------------------------*
    /* =  Navigation
    /*-------------------------------------------------*/
    #navigation {
    	position: absolute;
    	right: 0px;
    	bottom: 0px;
    }
    /*** ESSENTIAL Navigation Style ***/
    .sf-menu,
    .sf-menu * {
    	margin: 0;
        margin-bottom: 4px;
        padding: 0;
        list-style: none;
    }
    .sf-menu { line-height: 1.0 }
    .sf-menu ul {
        position: absolute;
        top: -999em;
        width: 160px; /* left offset of submenus need to match (see below) */
    }
    .sf-menu ul li { width: 100% }
    .sf-menu li:hover {
        visibility: inherit; /* fixes IE7 'sticky bug' */
    }
    .sf-menu li {
        float: left;
        position: relative;
    }
    .sf-menu a {
        display: block;
        position: relative;
    }
    .sf-menu li:hover ul,
    .sf-menu li.sfHover ul {
        left: 0;
        top: 40px; /* match top ul list item height */
        z-index: 99;
    }
    ul.sf-menu li:hover li ul,
    ul.sf-menu li.sfHover li ul { top: -999em }
    ul.sf-menu li li:hover ul,
    ul.sf-menu li li.sfHover ul {
        left: 180px; /* match ul width */
        top: 0;
    }
    /*** navigation skin ***/
    .sf-menu {
        float: left;
        margin-bottom: 1em;
    }
    .sf-menu a {
    	text-shadow: 0px 1px 0px #000;
    	height: 40px;
    	line-height: 40px;
    	font-size: 12px;
    	font-weight: bold;
        color: #fff;
    	margin-left: 20px;
        text-decoration: none;
    }
    .sf-menu a:focus,
    .sf-menu a:hover,
    .sf-menu a:active {
        color: #999999;
    }
    #navigation .current-menu-item > a:first-child {
        color: #999999;
    }
    /*Subs*/
    .sf-menu ul{
    	box-shadow: 0px 3px 10px #333333;
    	background:#2f3031;
    	padding: 0px;
    	border: 1px solid #121212;
        -moz-opacity: 0.98;
        -khtml-opacity: 0.98;
        opacity: 0.98;
    }
    .sf-menu ul a{
    	margin: 0px;
    	padding: 0 10px;
    }
    .sf-menu ul a:focus,
    .sf-menu ul a:hover,
    .sf-menu ul a:active {
    	color: #888888;
    }
    .sf-menu ul .current-menu-item a{
    	color: #888888;
    }
    .sf-menu ul li{
    	border-bottom: 1px solid #121212;
    }
    .sf-menu ul li:last-child{
    	border-bottom: 0px;
    }

    And this is what is in the header.php file for that part:

    <div id="header-wrap">
    <div id="header" class="clearfix">
            <div id="logo">
            	<?php
                	if($options['upload_mainlogo'] !='') { ?>
    					<a href="<?php bloginfo( 'url' ) ?>/" title="<?php bloginfo( 'name' ) ?>"><img src="<?php echo $options['upload_mainlogo']; ?>" alt="<?php bloginfo( 'name' ) ?>" /></a>
    			 	<?php } else { ?>
                	<a href="<?php bloginfo( 'url' ) ?>/" title="<?php bloginfo( 'name' ) ?>"><?php bloginfo( 'name' ) ?></a>
                <?php } ?>
    
            </div>
            <!-- END logo -->
    
            <div id="navigation" class="clearfix">
                <?php
                //define main navigation
                wp_nav_menu( array(
                    'theme_location' => 'menu',
                    'sort_column' => 'menu_order',
                    'menu_class' => 'sf-menu',
                    'fallback_cb' => 'default_menu'
                )); ?>
            </div>
            <!-- END navigation -->
    </div><!-- END header -->
    </div><!-- END header-wrap -->

    In the theme you have the option of uploading the logo via the Admin panel, so I'm assuming the #logo a{} in the style.css is a fallback.

    I am using the Bizz theme by WPExplorer if anyone needs that info. Any help would be great, thanks

  2. Gitominoti
    Member
    Posted 2 years ago #

    I fixed it. It turns out the body was larger than 920px because I had 30px padding in it. So I just changed the width to 980px; in the header {}

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.