[solved] Problem with Fixed Header

[ankur]

I was following this Link(http://mypresta.eu/en/art/developer/)for Fixed Header but when i did every step correct, I got this problem please check my website http://www.rationwale.com/ to see the problem in header

 

While scrolling you will see the problem that at top background is showing it's may be because i add one line at header top. Please see this problem can be solved..

 

Any help would be greatly appreciated

[yaniv14]

Move the marquee inside the header id

 

right below this line

<div id="header" class="grid_9 alpha omega" style="position:fixed; background:#FFF;">

 

Also you should incease the top value on columns & footer

[vekia]

exactly yaniv! you've got right,

it's necessary to move the marquee to the header dir, otherwise it will not work as he expect

[ankur]

Yaniv,

 

can you please tell me what excatly and where to put if possible as it would be simple for you bur for me i have to do some R&D.

 

can you please give me the code statement..thanks for help.

[yaniv14]

you need to edit 'header.tpl' which located in 'themes/default' with some text editor (notepad++)

 

take (ctrl-x) lines 82-90 which look like this

 

<marquee behavior="alternate">

<font color="black" style="font-size:14px; font-weight:bold;">PAY CASH ON DELIVERY </font>

<img width="30" height="30" src="http://www.rationwale.com/img/rupee.jpg">

<font style="font-size:14px;font-weight:bold;">Store to Door Delivery ONLY IN GHAZIABAD </font>

<img width="30" height="30" src="http://www.rationwale.com/img/deliveryboy.jpg">

<font color="black"style="font-size:14px;font-weight:bold;">[spam-filter]-880 259 6642 (4.00-6.00 pm) </font>

<img width="30" height="30" src="http://www.rationwale.com/img/telephone.jpg">

 

</marquee>

and move (ctrl-v) them between lines 93-94, right now you have:

line 93:

<div id="header" class="grid_9 alpha omega" style="position:fixed; background:#FFF;">

line 94:

<a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}">

 

so after you move it it will look like this:

<div id="header" class="grid_9 alpha omega" style="position:fixed; background:#FFF;">

<marquee behavior="alternate">

<font color="black" style="font-size:14px; font-weight:bold;">PAY CASH ON DELIVERY </font>

<img width="30" height="30" src="http://www.rationwale.com/img/rupee.jpg">

<font style="font-size:14px;font-weight:bold;">Store to Door Delivery ONLY IN GHAZIABAD </font>

<img width="30" height="30" src="http://www.rationwale.com/img/deliveryboy.jpg">

<font color="black"style="font-size:14px;font-weight:bold;">[spam-filter]-880 259 6642 (4.00-6.00 pm) </font>

<img width="30" height="30" src="http://www.rationwale.com/img/telephone.jpg">

 

</marquee>

<a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}">

[ankur]

Thanks for the response, will try it and let you know the result..

[ankur]

I have tired this method and it works also but I am getting an white border within the horizontal category menu because of this my vertical category is hiding.. anyway to correct it.

[ankur]

Also this isn't compatible in Mozilla firefox when i did the changes the whole header is gone to extreme right !!

[yaniv14]

in the same file (header.tpl) change line #102 from

<div id="columns" class="grid_9 alpha omega clearfix" style="Position:relative; top:150px;">

to

<div id="columns" class="grid_9 alpha omega clearfix" style="Position:relative; top:230px;">

 

and in 'themes/default/footer.tpl' line #37 from

<div id="footer" class="grid_9 alpha omega clearfix" style="position:relative; top:150px;">

to

<div id="footer" class="grid_9 alpha omega clearfix" style="position:relative; top:230px;">

 

About the issue with firefox I will check later, it has nothing to do with recent change, it has a problem with fixed position in general

Edited June 1, 2013 by yaniv14 (see edit history)

[vekia]

to center header in mozilla firefox use this:

<div id="header" class="grid_9 alpha omega" style="display:block;  position: fixed; ">

[ankur]

Thanks Yaniv and Vekia,

 

My problem is solved !!!

[vekia]

You're welcome

 

So i marked this thread as solved

 

Feel free to write if you've got any questions related to this case

 

regards

[ankur]

Thanks !! My problem is solved but still i have one question which is related to this topic..this is not exactly a problem but still i would like to see if you can help me because it will look more nicer.. When you scroll down the page at my website you'll see that Horizontal category bar height is quite long which, I want to remove lower space from category bar..

 

I have marked with red line below category bar !!

[vekia]

instead the argin-bottom: 1em; use the: margin-bottom:0px;

(in .sf-menu)

 

.sf-menu {
float: left;
margin-bottom:0px;
}

 

to .sf-right add display:none;

 

will work

 

 

effect:

[ankur]

Thanks Vekia,

 

did the changes in Modules/Blocktopmene/CSS/ superfish-modified.css and it worked like a cham also checked in all browsers .. thanks for your help..

 

This issue has been completely solved

[vekia]

yeah, I'm really glad that it works now as you expect. Moreover, thank you for this thread - I will update my article mentioned by you above (in your first post here)

 

regards