Vector Menu Positioning ?

[Nik Grey]

Hi All,

 

It's been a few days and my store is now open but I'm back with another little issue I would like to fix:

 

 

I would like the menu which is currently squashed to the right to become just One line all across the top - so it starts above the Mug?

 

Firebug doesn't tell me too much

 

 

 

 

 

 

[bsmither]

Let's try this: Putting the logo below the "Shop-by-Category" bar.

 

Find the template file that has the <nav id="headerbottom"> tag (main.php, line 118). Swap these two blocks of code, and remove the class="span#":

Was:
<div id="logo" class="span3">
  ....
</div>
<div id="widget-header-lower" class="span9">
  ....
</div>
 
Now:
<div id="widget-header-lower">
  ....
</div>
<div id="logo">
  ....
</div>

That opens up a huge amount of white space to the right of the logo: Feel free to redesign your store's main logo.
 

[Nik Grey]

Hadn't you already removed the 'class=span#' in the replacement code you supplied ?

[Nik Grey]

It didn't quite work out as expected

 

[bsmither]

Did you restore the code? Or is this on the test store?

 

"Hadn't you already removed the 'class=span#' in the replacement code you supplied ?"

 

Must have been different code. I used Firebug to make the changes.

[Nik Grey]

I restored it - I will re-do it now so you can see.

ok, its restored.

[bsmither]

Remove the edits to the skin code (restore it back to stock).

 

When I said "Swap these two blocks of code, and remove the class="span#"," I meant the entire blocks - from <div> to </div>. It looks like you swapped only the individual <div> statements.

 

So, now I will list the complete code blocks to swap (and not dot-dot-dots to indicate "include this, but I don't need to show it).

 

Was:

                            <div id="logo" class="span3">
                                <a href="{$STORE_URL}/index.php" title="{$LANG.common.home}">
                                    {if $STORE_LOGO}
                                        <img src="{$STORE_LOGO}" alt="{$META_TITLE}" />
                                    {else}
                                        <img src="{$STORE_URL}/images/logos/{$SKIN_FOLDER}-{$SKIN_SUBSET}.php" alt="{$META_TITLE}" />
                                    {/if}
                                </a>
                            </div>
                            <div id="widget-header-lower" class="span9">
                                {foreach from=$layout.regions.header_lower item=widget}
                                    {if file_exists("skins/{$SKIN_FOLDER}/templates/widgets/{$widget}.php")}
                                        {include file="skins/{$SKIN_FOLDER}/templates/widgets/{$widget}.php"}
                                    {else if file_exists("skins/{$SKIN_FOLDER}/templates/widgets/global/{$widget}.php")}
                                        {include file="skins/{$SKIN_FOLDER}/templates/widgets/global/{$widget}.php"}
                                    {else}
                                        {${$widget|upper}}
                                    {/if}
                                {/foreach}
                            </div>

Now:

                            <div id="widget-header-lower">
                                {foreach from=$layout.regions.header_lower item=widget}
                                    {if file_exists("skins/{$SKIN_FOLDER}/templates/widgets/{$widget}.php")}
                                        {include file="skins/{$SKIN_FOLDER}/templates/widgets/{$widget}.php"}
                                    {else if file_exists("skins/{$SKIN_FOLDER}/templates/widgets/global/{$widget}.php")}
                                        {include file="skins/{$SKIN_FOLDER}/templates/widgets/global/{$widget}.php"}
                                    {else}
                                        {${$widget|upper}}
                                    {/if}
                                {/foreach}
                            </div>
                            <div id="logo">
                                <a href="{$STORE_URL}/index.php" title="{$LANG.common.home}">
                                    {if $STORE_LOGO}
                                        <img src="{$STORE_LOGO}" alt="{$META_TITLE}" />
                                    {else}
                                        <img src="{$STORE_URL}/images/logos/{$SKIN_FOLDER}-{$SKIN_SUBSET}.php" alt="{$META_TITLE}" />
                                    {/if}
                                </a>
                            </div>

[Nik Grey]

Sorry, I miss undersstood the dots.

 

That's looking more like it - can we move it all to the left now ?

[bsmither]

You will need to find the CSS for this rule (style.less, line 467):

#widget-header-lower

Adjust the text-align to left.

[Nik Grey]

Outstanding, yet again I bow and am very grateful for the help

 

Off to Photoshop again (been in there all day) to re-do my Logo..