Move Top Left Logo Image

[enchanted1]

Hello everyone,


I want to move my top left logo image. I would like it underneath the top navigation bar. I know I need to do this in the stylesheet.css but I don't know what code to use. My website is enchantedcottageshop.com


Thanks!
Gina

[dbltoe]

Not familiar with the store-bought template but is should be a simple matter of moving the <div id="logo"> (branding display area) underneath the nave div.
The layout is different for your template but, you might try moving it under the <div id="top_nav"> inside the h-menu.

In standard Zen Cart, it would be in the tpl_header.php in the common folder of your template.

[enchanted1]

I found this in the tpl_header.php of my template:

<!--bof-header logo and navigation display-->
<?php
if (!isset($flag_disable_header) || !$flag_disable_header) {
?>
<div id="headerWrapper">

<!--bof-branding display-->
<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) . '</a>'; ?></div>
<!--eof-branding display-->

[enchanted1]

<div class="h-menu">
<?php
if (CATEGORIES_TABS_STATUS == '0')
require($template->get_template_dir('tpl_top_nav.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_top_nav.php');
?>

[enchanted1]

Maybe I should just leave it as is. I might like it better if I make the logo image larger. It is so small in the mobile version

[dbltoe]

IMHO, your mobile logo is fine.

We take the logo off most of our mobile setups.

The reasoning we employ is that the customers are there to shop. And, they are doing so in a rather small space. Anything that they have to "navigate around" adds to the frustration factor.

[keneso]

I agree with dbltoe, nevertheless I also understand the reasons to have the logo all the time, and I do it myself.

That said the place of your logo is fine, and don't see any reason to move it under your nav, unless strong personal taste, if you want to have it a bit bigger on mobile you could try either of the following, add to your stylesheet (stylesheet_res_extra.css)

The max-width could be changed (i.e. 767) depending on which screen size you want it to apply, anyhow not bigger than 767.

Solution 1

@media (max-width: 380px) {
#logo {
	width: 81%;
}
}

Solution 2

#logo {
	width: 63%;
}