Sticky header and other issues

[bozze]

1) Hi, I was trying to put my whole header as sticky header, and I did this tweak on the CSS and works partially:

#header-section {
position: fixed;
top: 0px;
}

The issue is that the top bar overlays the header, and the header overlays the revolution slider or any content below it. Please help me to solve this, I’ve attached some pictures to show you better.

2) I wanted to put a vertical lines between my best sellers, top rated and sale products on my index page, and I’ve created theses CSS rules:

.center {
		border-left: 0.1px solid #cccccc;
                float: left;
                margin-left: 10px;
                padding-left: 10px;
              			}
.left {
		float: left;
                margin-left: 35px;
              			}
.right {
		border-left: 0.1px solid #cccccc;
                padding-left: 10px;
                float: left;
                margin-left: 10px;
              			}

It’s working on Firefox, IE, but in Chrome does not shows those lines. Also, if I minimize the window in any browser, the third box moves down, I would like to keep it align with the other boxes. I’ve also attached some pictures to show you this.

My site is http://www.bozze.cl I will really will appreciate your help.

[Mohammad – SUPPORT]

Hi,
Please enable sticky header again so i can see this change.
Thanks 🙂
With Best Regards
Swift Ideas

[bozze]

It’s enabled again.

[Mohammad – SUPPORT]

Hi,
Please try this custom css code :
.inner-page-wrap{margin-top:160px !important}
Hope that will help you sure.
Thanks

[bozze]

It does the trick partially, the top bar is still overlaying the header.

And what about with my issue N°2?

[Mohammad – SUPPORT]

Hi,
Please remove code to vertical lines . I will provide you correct code.
Thanks 🙂
With Best Regards
Swift Ideas

[bozze]

Hello,

I’ve already removed the code for the vertical lines.

[Swift Ideas – Ed]

Use this code for the sticky header, as you will need the top bar to be sticky too:

.header-wrap {
position: fixed;
top: 0px;
}

Try this for the dividers:

.span4.center, .span4.right {
margin-left: 15px;
padding-left: 14px;
border-left: 1px solid #e3e3e3
}

– Ed

[bozze]

Hi Ed!

About the dividers, now they appear in any browser but it didn’t solve the alignment problem when I reduce the size of the window.

[Mohammad – SUPPORT]

Hi,
Please try to use this custom css code :
.span4.center, .span4.right{margin-left:5px !important}

Thanks 🙂
With Best Regards
Swift Ideas