Joomla Templates Club 406,261 posts

[ezaban Friend ezabanJoin date: August 2013Posts: 38Downloads:33Uploads:0 Thanks: 16 Thanked: 1 times in 1 posts]

#198158

Hi,

I want to have the header block (menu+logo and everything on it) to be sticky to the top. I saw documentation videos on t3-framework.org that says by adding navbar-fixed-top this would be handled. It is done by adding this code, but it only sticks the menu when we scroll. I want the whole header (menu+logo+the balck line contains them) to be sticky. Is there any way to manage it?

Thanks

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#536610

Try adding this code to this file: templatesja_sugitetplsblocksheader.php


<script src="http://stickyjs.com/jquery.sticky.js"></script> <script> jQuery(document).ready(function(){ jQuery("#t3-header").sticky({topSpacing:0}); }); </script>

[ezaban Friend ezabanJoin date: August 2013Posts: 38Downloads:33Uploads:0 Thanks: 16 Thanked: 1 times in 1 posts]

#536619

It works fine dear chavan, Thanks
But there is an issue there, when screen show the most top of the page, drop down menus open and everything works great, when we scroll down, on the middle of the page for instance, the menu is sticks there but drop down menus do not open!
Is there any way to fix it?

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#536627

Go to this File: /templates/ja_sugite/css/rtl/template.css

Replace this code


.ja-slideshow {
position: relative;
z-index: 2;
background: #ff9933 ;
}


with


.ja-slideshow {
position: relative;
z-index: 2;
background: #ff9933 ;
margin-top:84px;
}


[ezaban Friend ezabanJoin date: August 2013Posts: 38Downloads:33Uploads:0 Thanks: 16 Thanked: 1 times in 1 posts]

#536628

It looks working pretty good however, the code is changing CSS and is rewritten whenever I compile less to css. Sorry but I am a bit shaky in CSS; if I want to add it to custom.css is the code just the same? or do you have less code changing option instead?

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#536635

Revert the old suggestion and do the below

Add this on your custom.css page


.ja-slideshow { margin-top:84px; }

[Author]

Posts