HELP…trying to center navigation in WP theme….

[aspirefly]

I’ve downloaded the Storefront Paper theme ( http://wordpress.org/themes/storefront-paper ) and am trying to modify it to center the logo at the top over a centered navigation bar….like this theme: http://wordpress.org/themes/themify-base

I’ve been pulling my hair out but nothing seems to work for me. Any help would greatly be appreciated!

[muncher39]

Hi

Try something like this to solve your problem.
Html

 <header>
        <div id="logo">
            <h1><a title="Title" href="/"><img src="/images/logo.png" title="title"/><span>Logo title</span></a></h1>
            <!--<p><span>creative.unique.efficient</span></p>-->
        </div>
        <nav>
            <ul>
                <li><a class="selected" href="javascript:void(0)">Home</a></li>
                <li><a href="javascript:void(0)">Our Services</a></li>
                <li><a href="javascript:void(0)">Our Projects</a></li>
                <li><a href="javascript:void(0)">About us</a></li>
                <li><a href="javascript:void(0)">Contact us</a></li>
            </ul>
        </nav>
    </header>

css

header {}
header h1 a img {display:block; max-width:100%; height: auto; width: auto\9; /* For IE8 */ margin:0 auto;  text-align: center; font-weight: 900; font-size: 2.5em;}
header h1 span {display:none;}
header #logo {padding: 15px 0 15px 0; background:#fff; text-transform: uppercase; width:100%;}

nav {background:#2a70e8;}
nav ul {margin: 0;  padding: 10px 0px 10px 0px; list-style: none; line-height: normal; text-align: center;}
nav ul li {display: inline-block;}
nav ul li a {display: block; padding: 1em 2em; letter-spacing: 1px; text-decoration: none; text-transform: uppercase; font-size: 1em; font-weight: 700; color: #FFF;}

Let me know if this helps at all?

Paul

[Author]

Posts