Move logo to another <div>

[Ckay]

Hi

 

I want to move the logo, I have in my header, from one div to another. (see image)

 

At the moment the logo is displayed in the lower div. I want to move it to the upper div and get rid of the lower div completely.

 

Any help please?

 

Thanks in advance.

 

 

[NemoPS]

HArd to tell you exactly what to do, without seeing the code. It looks like you need to move it to a generic "nav" area, inside header.tpl

[Ckay]

Hi Nemo

 

Thanks for your reply.

 

I was hoping to do it purely with css but I suspect you are right. This is the code in the header.tpl :-

 

<div class="header-container">
                <header id="header">
                    <div class="banner">
                        <div class="container">
                            <div class="row">
                                {hook h="displayBanner"}
                            </div>
                        </div>
                    </div>
                    <div class="nav">
                        <div class="container">
                            <div class="row">
                                <nav>{hook h="displayNav"}</nav>
                            </div>
                        </div>
                    </div>
                    <div class="box_logo">
                        <div class="container">
                            <div class="row">
                                <div id="header_logo">
                                    <a href="{$base_dir}" title="{$shop_name|escape:'html':'UTF-8'}">
                                        <img class="logo img-responsive" src="{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}"{if isset($logo_image_width) && $logo_image_width} width="{$logo_image_width}"{/if}{if isset($logo_image_height) && $logo_image_height} height="{$logo_image_height}"{/if}/>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="hook_top_box">
                        <div class="container">
                            <div class="row">
                                {if isset($HOOK_TOP)}{$HOOK_TOP}{/if}
                            </div>
                        </div>
                    </div>
                </header>
            </div>

 

Any help would be greatly appreciated.

[Ckay]

I'm not sure if this is best practice but I've resolved the issue by inserting the code directly in header.tpl with the following code:-

 

<div class="nav">
                        <div class="container">
                          <div class="row">
                                <div class="ilogo"> <a href="#"><img src="http://www.mysite.com/img/header-logo.png" /></a>
                              </div>
                                <nav>{hook h="displayNav"}</nav>
                            </div>
                        </div>
                    </div>

 

I then positioned the logo absolutely within the containing div.

Edited September 11, 2015 by Ckay (see edit history)

[pedroserapio]

I'm not sure if this is best practice but I've resolved the issue by inserting the code directly in header.tpl with the following code:-

 

<div class="nav">

                        <div class="container">

                          <div class="row">

                                <div class="ilogo"> <a href="#"><img src="http://www.mysite.com/img/header-logo.png" /></a>

                              </div>

                                <nav>{hook h="displayNav"}</nav>

                            </div>

                        </div>

                    </div>

 

I then positioned the logo absolutely within the containing div.

 

To make sure you don't have any future problems and following the original Prestashop code, add the following:

<img class="img-responsive" src="{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}"{if isset($logo_image_width) && $logo_image_width} width="{$logo_image_width}"{/if}{if isset($logo_image_height) && $logo_image_height} height="{$logo_image_height}"{/if}/>

The logo set and uploaded in Preferences -> Themes will be displayed, and if you move the website to new domain will be also displayed correctly.

Edited September 17, 2015 by pedroserapio (see edit history)