Problem Centering Responsive Main nav

[diez]

Hi there ,

 

I am trying to center my main responsive navigation , its a bit the mess right here some help would be great !

 

Using this theme : http://www.prestashop.com/forums/topic/244683-gratuit-simple-responsive-theme-15x/

 

my nav .css :

#responsive_links_top .top-bar {
 
    margin-bottom : 0;
    height: 46px;
    background: #000;
    border-top: 1px solid #222;
    border-bottom: 1px solid #222;
    max-width: 1020px;
}

#responsive_links_top .top-bar > ul .name h1 {
    line-height: 1.1;
}

#responsive_links_top .top-bar > ul .name h1 a {

padding-left: 10px;


}

#responsive_links_top .top-bar ul > li:hover a,
#responsive_links_top .top-bar ul > li.active a{
    color: #ffffff;

}

#responsive_links_top .top-bar ul > li a{

    color: #5c5c5c;
    font-weight: normal;
    font-size: 1.4em;
    text-decoration : none;
    border-right: 0px solid #000;
}

#responsive_links_top .top-bar ul > li.last a{
    border-right: none;

}

#responsive_links_top .top-bar ul > li:hover,
#responsive_links_top .top-bar ul > li.active {
    background: 0;

}

and here the .tpl :

 <div id="responsive_links_top" class="twelve columns">
       <div class="contain-to-grid">
            <nav class="top-bar">
            {assign var="first_link" value=""}
            {assign var="other_link_all" value=""}
            {foreach from=$responsiveLinks item=responsiveLink name=navResponsiveLink}
                {if $smarty.foreach.navResponsiveLink.first}
                    {capture name='links' assign='first_link'}
                        {assign var='first_link_link' value=''}
                        {assign var='first_link_name' value=''}

                        {if $responsiveLink['responsiveLinkObject']->id_category != 0}
                            {assign var='first_link_link' value={$link->getCategoryLink($responsiveLink['objectLink'])[spam-filter]
                            {assign var='first_link_name' value={$responsiveLink['objectLink']->name[spam-filter]
                        {elseif $responsiveLink['responsiveLinkObject']->id_cms != 0}
                            {assign var='first_link_link' value={$link->getCMSLink($responsiveLink['objectLink'])[spam-filter]
                            {assign var='first_link_name' value={$responsiveLink['objectLink']->meta_title[spam-filter]
                        {elseif $responsiveLink['responsiveLinkObject']->id_cms_category != 0}
                            {assign var='first_link_link' value={$link->getCMSCategoryLink($responsiveLink['objectLink'])[spam-filter]
                            {assign var='first_link_name' value={$responsiveLink['objectLink']->name[spam-filter]
                        {elseif $responsiveLink['responsiveLinkObject']->id_product != 0}
                            {assign var='first_link_link' value={$link->getProductLink($responsiveLink['objectLink'])[spam-filter]
                            {assign var='first_link_name' value={$responsiveLink['objectLink']->name[spam-filter]
                        {else}
                            {assign var='first_link_link' value=$responsiveLink['responsiveLinkObject']->url}
                            {assign var='first_link_name' value=$responsiveLink['responsiveLinkObject']->title}
                        {/if}

                        <ul>
                            <li class="name {if $first_link_link == $come_from}active{/if} {if !empty($responsiveLink['subLinks'])}has-dropdown{/if}">
                                <h1>
                                  <a href="{$first_link_link}">
                                      {$first_link_name}
                                    </a>
                                </h1>
                                <ul class="dropdown">
                                    {foreach from=$responsiveLink['subLinks'] item=child name=subLink}
                                        {if $smarty.foreach.subLink.last}
                                            {include file="$branche_tpl_path" node=$child last='true'}
                                        {else}
                                            {include file="$branche_tpl_path" node=$child last='false'}
                                        {/if}
                                    {/foreach}
                                </ul>
                            </li>
                            <li class="toggle-topbar"><a class="button-toggle" href="#"></a></li>
                        </ul>
                    {/capture}
                {else}
                    {capture name='links' assign='other_link'}
                        {assign var='other_link_link' value=''}
                        {assign var='other_link_name' value=''}

                        {if $responsiveLink['responsiveLinkObject']->id_category != 0}
                            {assign var='other_link_link' value={$link->getCategoryLink($responsiveLink['objectLink'])[spam-filter]
                            {assign var='other_link_name' value={$responsiveLink['objectLink']->name[spam-filter]
                        {elseif $responsiveLink['responsiveLinkObject']->id_cms != 0}
                            {assign var='other_link_link' value={$link->getCMSLink($responsiveLink['objectLink'])[spam-filter]
                            {assign var='other_link_name' value={$responsiveLink['objectLink']->meta_title[spam-filter]
                        {elseif $responsiveLink['responsiveLinkObject']->id_cms_category != 0}
                            {assign var='other_link_link' value={$link->getCMSCategoryLink($responsiveLink['objectLink'])[spam-filter]
                            {assign var='other_link_name' value={$responsiveLink['objectLink']->name[spam-filter]
                        {elseif $responsiveLink['responsiveLinkObject']->id_product != 0}
                            {assign var='other_link_link' value={$link->getProductLink($responsiveLink['objectLink'])[spam-filter]
                            {assign var='other_link_name' value={$responsiveLink['objectLink']->name[spam-filter]
                        {else}
                            {assign var='other_link_link' value=$responsiveLink['responsiveLinkObject']->url}
                            {assign var='other_link_name' value=$responsiveLink['responsiveLinkObject']->title}
                        {/if}

                        <li class="{if $other_link_link == $come_from}active{/if}{if !empty($responsiveLink['subLinks'])} has-dropdown{/if}">
                            <a href="{$other_link_link}">{$other_link_name}</a>
                            <ul class="dropdown">
                                {foreach from=$responsiveLink['subLinks'] item=child name=subLink}
                                    {if $smarty.foreach.subLink.last}
                                        {include file="$branche_tpl_path" node=$child last='true'}
                                    {else}
                                        {include file="$branche_tpl_path" node=$child last='false'}
                                    {/if}
                                {/foreach}
                            </ul>
                        </li>
                    {/capture}

                    {assign var="other_link_all" value=$other_link_all|cat:$other_link}
                {/if}
            {/foreach}
            {$first_link}
            <section>
                <!-- Left Nav Section -->
                <ul class="left">
                   {$other_link_all} 
                </ul>
                <!-- Right Nav Section -->
                





              </section>
            </nav>
        </div>
    </div>

I would like to center it ... i tryed many possibilities but only get something wrong ...

 

Some help would be great !

 

Thanks

R.

[vekia]

any chance to see how it looks like ? if so, please share url to your shop

[diez]

Hey Vekia ,

 

yes here is the url of my site : link

Edited March 5, 2014 by diez (see edit history)

[diez]

Anyone ?

[TreeTheme Dev]

Hi

 

Try this: first from tpl file part 

              <!-- Left Nav Section -->
                <ul class="left">
                   {$other_link_all} 
                </ul>

remove class="left"

 

then changes in css file responsivelinks.css change line 12 to

#responsive_links_top .top-bar {
margin-bottom: 0;
height: 46px;
background: #000;
border-top: 1px solid #222;
border-bottom: 1px solid #222;
max-width: 1020px;
text-align: center;
}

added text-align:center;

 

Then in same file add 

#responsive_links_top .top-bar ul, #responsive_links_top .top-bar ul {
display: inline-block;
}

#responsive_links_top .top-bar ul>li {
float: none;
display: inline-block;
}

That should center menu like this