Adjusting positions of logo, nav, and menu layers

[Whispar1]

I am tweaking the look of the default theme in 1.6 and would like input on the safest way to achieve this layout with css.

Image 1 is default layout

Image 2 is how I would like to have it laid out.

Basically, I want to split the screen and have the logo layer to fill up to the banner and the nav/user info layer and block-top to the right - hope the images are clear. Also would like to add divider pipes to menu titles

 

 

 

 

Edited July 28, 2014 by Whispar1 (see edit history)

[Whispar1]

After looking at this further, because of the container layout, It may be easier to layout like this instead - just move top menu next to logo? Any ideas?

 

[Whispar1]

Also, I have disable the quick search. Anyone have a tip to show how to align menu right of the logo?

[vekia]

in header.tpl you've got code:

<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>
								{if isset($HOOK_TOP)}{$HOOK_TOP}{/if}
							</div>
						</div>

change it to:

						<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 class="row">
                            {if isset($HOOK_TOP)}{$HOOK_TOP}{/if}
                            </div>
						</div>

and in global.css use styles:
 

header .row {width:50%; float:left;}

[Whispar1]

Thank you Vekia! I really appreciate it.

Can you clarify which instance of header .row I need to change (there are a lot of instances in global.css)

I am assuming it is line 5288

 header .row {
    position: relative; }

Do I leave the position as relative?

If I change header .row to 50%, it also shrinks the logo by 50% and also the nav row with the cart and login shifts to the left because row is now 50% (see photo)

Edited July 20, 2014 by Whispar1 (see edit history)

[Whispar1]

I took care of the logo size by changing global.css

#header_logo {
width: 33.33333%;

to

#header_logo {
width: 66.66667%;

This is an acceptable size visually for the logo. Just need to fix the nav row to the right. (see photo)

The other issue I see is in responsive (mobile) the category/logo is crowded... any ideas how to adjust this? (see photo)

[vekia]

Thank you Vekia! I really appreciate it.

Can you clarify which instance of header .row I need to change (there are a lot of instances in global.css)

I am assuming it is line 5288

 header .row {
    position: relative; }

Do I leave the position as relative?

If I change header .row to 50%, it also shrinks the logo by 50% and also the nav row with the cart and login shifts to the left because row is now 50% (see photo)

 

don't alter any style, just add new instance of code for header .row

[Whispar1]

Thanks Vekia,

Sorry if I am not understanding your instructions. Here is the section of global.css where I applied your suggestion of adding width:50%; float: left;

 header .row {
    position: relative;
	width: 50%;
	float: left; }

Edited July 22, 2014 by Whispar1 (see edit history)

[vekia]

okay, and how the website look like at the moment?

any chance to see your changes live?

[Whispar1]

Post #6 shows what it is like so far and here it it live http://lux-puff.com/index.php

The only additional change I made was enlarge the logo because the 50% width made it too small.

#header_logo {
width: 66.66667%;

The banner is now also smaller and the cart/login is shifted to the left (because of float left)

Edited July 23, 2014 by Whispar1 (see edit history)

[vekia]

it looks like exactly as you expected

i missed something? 

[Whispar1]

Yes Vekia - the menu and the logo are as expected. However, because the cart and user_info also uses header.row, it is now shifted to the left. (see attachment #1) - It should be to the far right (see attachment #2)

 

The top banner also uses header.row so it has also shrunk to 50% size. You can see that although it stretches across the entire screen - it is 50% smaller (shorter)

[Whispar1]

Vekia,

Do you think it might be easier to make a separate css entry for the nav and banner row so that it has it's own style and then we can float the nav layer right?

[Whispar1]

I figured it out - here is what I did.

 

Added .row2 to global.css

header .row {
    position: relative;
	/*width: 50%;
	float: left;*/ }
	
   /*Add .row2 to position menu next to logo*/	
	header .row2 {
    position: relative;
	width: 50%;
	float: left; }

Modified header.tpl as follows to reflect row2

<div class="row2">
								<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 class="row2">
                            {if isset($HOOK_TOP)}{$HOOK_TOP}{/if}
                            </div>

Because other elements use row, this was the only way to make sure the modifications only affect the row that holds the logo and menu. 

 

If anyone has an an idea how to add hash pipe separators as seen in attached image, please advise.

 

Thanks!

 

Edited July 28, 2014 by Whispar1 (see edit history)

[dioniz]

As i know you can only add hash separator as an background image.

So create an image and set it as li background image.

[Whispar1]

Yes Dioniz, I figured that was probably the best way to achieve this - thanks for the confirmation.

 

Okay so everything is looking okay but the tablet and mobile device screen look terrible (all jumbled up)

The menu wraps around into two lines on smaller screens and tablet/mobile looks a bit off.

Any thoughts on how to best clean this up?