Main logo and nav align to center
Posted: Fri Oct 31, 2014 1:50 pm
I'm trying to figure out how to get my logo and nav bar to display centered
This is what it currently looks like
This is my template
This is what it currently looks like
Code: Select all
{strip}
{process_pagedata}
{* With cms_lang_info we retrieve current language information, assign gives us $nls variable we can work with *}
{cms_lang_info assign='nls'}
{* using strip as we don't want useless whitespace, especially not before doctype *}
{/strip}<!doctype html>
<__html lang='{if isset($nls)}{$nls->htmlarea()}{/if}' dir='{if isset($nls)}{$nls->direction()}{/if}'>
<head>
{embed header=true}
<meta charset='{if isset($nls)}{$nls->encoding()}{/if}'>
<title>{title} - {sitename}</title>
<meta name='viewport' content='initial-scale=1.0 maximum-scale=1.0 user-scalable=no' />
<meta name='HandheldFriendly' content='true' />
{* Don't remove this! Metadata is entered in Site Admin/Global settings. *}
{metadata}
{* See in news detail template how cannonical url can be assigned from module *}
{if isset($canonical)}<link rel='canonical' href='{$canonical}' />{elseif isset($content_obj)}<link rel='canonical' href='{$content_obj->GetURL()}' />{/if}
{* This is how all the stylesheets attached to this template are linked to *}
{cms_stylesheet}
{* using google fonts *}
<link href='//fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
{* learning IE lower then Version 9 some html5 *}
<!--[if lt IE 9]>
<__script__ src="//html5shiv.googlecode.com/svn/trunk/html5.js"></__script>
<![endif]-->
{* Relational links for interconnections between pages, good for accessibility and Search Engine Optmization *}
{cms_selflink dir='start' rellink='1'}
{cms_selflink dir='prev' rellink='1'}
{cms_selflink dir='next' rellink='1'}
</head>
</__body id='boxed'>
<!-- #wrapper (wrapping content in a box) -->
<div class='container centered' id='wrapper'>
<!-- accessibility links, jump to nav or content -->
<ul class="visuallyhidden">
<li>{anchor anchor='nav' title='Skip to navigation' accesskey='n' text='Skip to navigation'}</li>
<li>{anchor anchor='main' title='Skip to content' accesskey='s' text='Skip to content'}</li>
</ul>
<!-- accessibility //-->
<!-- .top (top section of page containing logo, navigation search...) -->
<header class='top'>
<div class='row header'>
<!-- .logo (cmsms logo on the left side) -->
<div class='logo grid_4'>
<a href='{root_url}' title='{sitename}'>
<img src='http://easttowestdiversity.com/logosmall.jpg' alt='{sitename}' />
</a>
</div>
<!-- .logo //-->
<!-- .main-navigation (main navigation on the right side) -->
<nav class='main-navigation grid_13 noprint' id='nav' role='navigation'>
{menu template='Simplex_Navigation.tpl'}
</nav>
<!-- .main-navigation //-->
</div>
<!-- .header-bottom (bottom part of header containing catchphrase and search field) -->
<div class='row header-bottom'>
<section class='phrase'>
<span class="grid_7">Helping Aboriginal People, Helping Oil and Gas Industry</span>
{strip}
{search assign='is_search'}{* assigned search module tag, now we can build different search template for this site template and have fun with html5, Read http://www.w3.org/TR/html-markup/input.search.html for full attirbute specs *}
{if isset($is_search)}
<div class='grid_5 search noprint' role='search'>
{$startform}
<label for='{$search_actionid}searchinput' class='visuallyhidden'>{$searchprompt}:</label>
<input type='search' class='search-input' id='{$search_actionid}searchinput' name='{$search_actionid}searchinput' size='20' maxlength='50' value='' placeholder='{$searchtext}' />
{if isset($hidden)}{$hidden}{/if}
{$endform}
</div>
{/if}{/strip}
</section>
</div>
<div class='clear'></div>
<!-- .header-bottom //-->
<!-- .banner (banner area for a slider or teaser image) -->
<section class='banner row noprint' role='banner'>
<div class='banner-text'>
<ul>
<li>Professional</li>
<li>Reliable</li>
<li>Passionate</li>
<li>Experienced</li>
</ul>
</div>
<div class='banner-image cf'>
<div><img src='http://easttowestdiversity.com/uploads/simplex/teaser/albertaoil1.jpg' width='852' height='275' alt='' /></div><div><img src='http://easttowestdiversity.com/uploads/simplex/teaser/oilandgas.jpg' width='852' height='275' alt='' /></div> </div>
</section>
<!-- .banner //-->
</header>
<!-- .top //-->
<!-- .content-wrapper (wrapping div for content area) -->
<div class='content-wrapper cf'>
<!-- .content (display content first) -->
<div class='content-inner grid_8 push_4'>
<!-- .content-top (breadcrumbs and print button) -->
<!-- .content-top //-->
<!-- .content (actual content with title and content tags) -->
<article class='content' id='main' role='main'>
<h1>{title}</h1> {* title tag *}
{content} {* content entered in page editor area *}
</article>
<!-- .content //-->
</div>
<!-- .content-inner //-->
</div>
<!-- .content-wrapper //-->
<!-- .footer (footer area) -->
<footer class='row footer'>
<span class='back-top'>{anchor anchor='main' text='↑'}</span>
<section class='grid_4 copyright'>
<ul class='social cf'>
<li class='twitter'><a title='Twitter' href='https://twitter.com/E2WDS'target="_blank">Twitter</a></li>
<li class='facebook'><a title='Facebook' href='https://www.facebook.com/groups/EastToWestDiversitySolutions/'target="_blank">Facebook</a></li>
<li class='linkedin'><a title='LinkedIn' href='https://www.linkedin.com/company/east-to-west-diversity-solution'target="_blank">LinkedIn</a></li>
<li class='youtube'><a title='YouTube' href='http://www.youtube.com/'target="_blank">YouTube</a></li>
</ul>
{global_content name='footer'}
</section>
</footer>
<div class='clear'></div>
</div>
<!-- #wrapper //-->
{cms_jquery exclude='jquery-ui.min.js,jquery.ui.nestedSortable.js,jquery.json.min.js' append='uploads/simplex/js/functions.min.js'}
<__body>
</__html>