Public Forums 71,145 posts

[svalambhia Friend svalambhiaJoin date: February 2013Posts: 7Downloads:0Uploads:0 Thanks: 4 Thanked: 2 times in 1 posts]

#185257

I want to fix top header and menu on my site. to do it, i fix header and for topnav, i also fix it and give margin-top equal to my header in order to stop overlapping with each other. now for topsl i gave margin equal to header + topnav in order to stop overlapping. then i give margin to main content equal to header +top nav +topsl…. it works fine on home page but when topsl is not present on subpages, in this case also it applies margin-top and it does not look good… can anyone tell me how to do it ? similar thing is done in http://themechurch.com/swift/ but there is no topsl present…. in this one…..

[svalambhia Friend svalambhiaJoin date: February 2013Posts: 7Downloads:0Uploads:0 Thanks: 4 Thanked: 2 times in 1 posts]

#484357

Here are changes I had made template.css inside my theme folder

1. Fixing the header at top by position : Fixed (full screen header)

#ja-header { background:#ffffff;
position: fixed; }

2. Fixing top menu using

#ja-mainnav {
position: fixed;
margin-top: 90px;}

3. after doing those changes topsl goes behind header and overlaps so topsl is not visitble so adding margin to it equal to header height + menu height
so adding margin

#ja-container .main {
margin-top: 135px;}

but when topsl is not present… it will also stays 135 px below the main nav(top menu).

[HeR0 Friend HeR0Join date: August 2011Posts: 3626Downloads:0Uploads:61 Thanks: 33 Thanked: 588 times in 549 posts]

#484398

Hi Svalambhia,

Please replace

#ja-container .main {
margin-top: 135px;}
to

.no-display {
margin-top: 136px;
}
Hope this help

[svalambhia Friend svalambhiaJoin date: February 2013Posts: 7Downloads:0Uploads:0 Thanks: 4 Thanked: 2 times in 1 posts]

#484531

Dear Hero,

I had tried it … it does not work… you can check same on my live site url is same as my last post…

[HeR0 Friend HeR0Join date: August 2011Posts: 3626Downloads:0Uploads:61 Thanks: 33 Thanked: 588 times in 549 posts]

#484551

Dear,

Please try create a new element as separator_block under mainhead block with css rule as below

.separator_block{
margin-top: 105px;
}
Check image http://prntscr.com/u7iua
Then you need to remove all margin css rule other element which you did.
Hope this helps and can work on all pages.

Regards

1 user says Thank You to HeR0 for this useful post

1. svalambhia

[svalambhia Friend svalambhiaJoin date: February 2013Posts: 7Downloads:0Uploads:0 Thanks: 4 Thanked: 2 times in 1 posts]

#485133

Dear Hero,

Some one posted almost same thing in another thread here and same thing is done in better way check this thread
http://www.joomlart.com/forums/topic/mega-menu-fixrelative-position/

[Author]

Posts