Second Logo in header / Correct positioning / CSS

[Brent]

Zen V1.5.5f using a custom template built with the standard Responsive Classic Template.

I'm trying to add a second logo to my header but I'm stuck on getting the positioning to work correctly.

The code in my tpl_header.php for the second logo is as follows:

<!--bof branding display-->
<div id="logoWrapper" class="group onerow-fluid">
    <div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT, HEADER_LOGO_WIDTH, HEADER_LOGO_HEIGHT) . '</a>'; ?>
    <div id="logoRight"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGORIGHT_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGORIGHT_IMAGE, HEADER_ALT_TEXT, HEADER_LOGORIGHT_WIDTH, HEADER_LOGORIGHT_HEIGHT) . '</a>'; ?>
<?php if (HEADER_SALES_TEXT != '' || (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2))) { ?>
    <div id="taglineWrapper">
<?php
  if (HEADER_SALES_TEXT != '') {
?>
      <div id="tagline"><?php echo HEADER_SALES_TEXT;?></div>
<?php
  }
?>
<?php
  if (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2)) {
    if ($banner->RecordCount() > 0) {
?>
  <div id="bannerTwo" class="banners"><?php echo zen_display_banner('static', $banner);?></div>
<?php
    }
  }
?>
  </div>
<?php } // no HEADER_SALES_TEXT or SHOW_BANNERS_GROUP_SET2 ?>
  </div>
  </div>
</div>

<!--eof branding display-->

First I assume I got this right? I did this by reading old threads but they were based on 1.3 code. Secondly how do I get the second logo (logoRight) positioned on the far right of my header so I have the default logo left and the new one right.

As a starting point I tried the following but how do I extend this to force it far right and not just right of my default logo?

#logoRight {float:right;}

I can move it by adding margin-left settings but I assume this then messes up the responsive features and the logo will shift down when the browser window is too small.

Any pointers please.

[carlwhat]

a link to your site with the logo up would be helpful....

[Brent]

Understood. Was hoping the code above was enough as the site is running locally during the build. The last time I posted a link to my test site Google went and indexed that and started directing customers there.

I'll get it online and post a link if that's what it takes though as I'm still struggling.

Was just experimenting with the following but from what I was reading I think the main div wrapper then needs to be relative. Also logo and logoRight are then out of line. Lastly when you reduce the window size they overlap as they haven't been told to wrap.

#logoRight {right: 0; top: 0; position: absolute;}

[keneso]

Try this (moved logo-right div), and add the following css to your stylesheet, of course you then need to tweak it to your needs

#logoRight {
float: right;
}

<!--bof branding display-->
<div id="logoWrapper" class="group onerow-fluid">
    <div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT, HEADER_LOGO_WIDTH, HEADER_LOGO_HEIGHT) . '</a>'; ?>
<?php if (HEADER_SALES_TEXT != '' || (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2))) { ?>
    <div id="taglineWrapper">
<?php
  if (HEADER_SALES_TEXT != '') {
?>
      <div id="tagline"><?php echo HEADER_SALES_TEXT;?></div>
<?php
  }
?>
<?php
  if (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2)) {
    if ($banner->RecordCount() > 0) {
?>
  <div id="bannerTwo" class="banners"><?php echo zen_display_banner('static', $banner);?></div>
<?php
    }
  }
?>
  </div>
<?php } // no HEADER_SALES_TEXT or SHOW_BANNERS_GROUP_SET2 ?>
  
  </div>

<div id="logoRight">
<?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGORIGHT_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGORIGHT_IMAGE, HEADER_ALT_TEXT, HEADER_LOGORIGHT_WIDTH, HEADER_LOGORIGHT_HEIGHT) . '</a>'; ?>
</div>

</div>

<!--eof branding display-->

[Brent]

Sooo easy when you just know how. I couldn't work out how to split the div and where to place it as I think my logoRight was within the div for logo?

Thank you so much for the help. All sorted.

For anyone else trying the same the only modification I made was to the css. This matched the #logo div and lined the logos up with eachother.

#logoRight {float: right;margin:10px 0;}

[keneso]

Welcome, glad I could help.

[dbltoe]

Understood. Was hoping the code above was enough as the site is running locally during the build. The last time I posted a link to my test site Google went and indexed that and started directing customers there.

So often we fail to read all the instructions. At the bottom of the posting tips is

*NOTE: Search engines index this Zen Cart® support site very quickly. Posting your URL will cause your site and your post to show up in search engines. If you want to prevent that, put spaces between each letter of the domain name in your URL.