icwid with fixed header and top-margin

kathleen.d · #1 03-19-2015, 10:43 AM

Hi all,
I need to use a fixed navbar in my new custom website.
I use Bootstrap 2.3.2 to build it.
The navbar is fixed on top and is 120px high.
So, I added 120px top-margin to body css.
The first icwd page shows correctly but subsequent pages (category, products...) will not honor the top-margin rule. and some content of the icwd is covered by the fixed header.
I tried to tweac the icwid css but I can't make it works.
Here are two screenshots:

1 - first page containing icwd

2 - subsequent pages

How can I fix this?
TIA
tony

Rick G · #2 03-20-2015, 04:38 PM

Quote:

Originally Posted by antonio d.

Hi all,
I need to use a fixed navbar in my new custom website.
I use Bootstrap 2.3.2 to build it.
The navbar is fixed on top and is 120px high.
So, I added 120px top-margin to body css.
The first icwd page shows correctly but subsequent pages (category, products...) will not honor the top-margin rule. and some content of the icwd is covered by the fixed header.
I tried to tweac the icwid css but I can't make it works.
Here are two screenshots:

1 - first page containing icwd

2 - subsequent pages

How can I fix this?
TIA
tony

Hi,

Thank you for contacting us.

Judging by the screenshots you provided, I see that you have a fixed header in your website and when you navigate in your Ecwid store pages, sometimes the navigation menu overlaps the Ecwid store, right?

Please try to add the code from this article: http://help.ecwid.com/customer/portal/articles/1174628 right after your <body> tags and see if it fixes the issue.

Also, can you please provide a link to the website so I can inspect it? Thank you.

kathleen.d · #3 04-01-2015, 01:42 PM

Hi,
I tried to add the code snippet

Code:

<div id="ecwid_product_browser_scroller"></div>

to the prodotti.php page that contains the ecwid code, but nothing changes.
Here is the link in case you may want to investigate the problem:
http://www.pippolascopa.it/prodotti.php
The very first page (prodotti.php) works as expected but when you go deep into any category/product, you will see the header covering part of the shop title/text...
TIA for any help.

Tony

Rick G · #4 04-03-2015, 04:05 PM

Quote:

Originally Posted by antonio d.

Hi,
I tried to add the code snippet

Code:

<div id="ecwid_product_browser_scroller"></div>

to the prodotti.php page that contains the ecwid code, but nothing changes.
Here is the link in case you may want to investigate the problem:
http://www.pippolascopa.it/prodotti.php
The very first page (prodotti.php) works as expected but when you go deep into any category/product, you will see the header covering part of the shop title/text...
TIA for any help.

Tony

Hi,

Thank you for contacting us.

I did some further testing and I think I found a solution that will work for you.

Please go to Ecwid control panel > System settings > Design > Custom CSS Themes and add the following code:

Code:

#ecwid_product_browser_scroller {
	    position: absolute;
    	top: 0px;
}

After you add it, save the changes and see how it works on your website.

Please let me know how it goes,
Thank you.

kathleen.d · #5 04-03-2015, 04:15 PM

Thanks! It works.
tony