T3 Community Discussion & Support

Let's build the best free Joomla template framework, together!
  1. Igor Cunha
  2. Vanity Monster Sherlock Holmes The Voice
  3. General Discussion
  4. Friday, 12 September 2014
  5.  Subscribe via email
Create a block header-p and put this:




<?php
/**
* @package T3 Blank
* @copyright Copyright (C) 2005 - 2012 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/

defined('_JEXEC') or die;

// get params
$sitename = $this->params->get('sitename');
$slogan = $this->params->get('slogan', '');
$logotype = $this->params->get('logotype', 'text');
$logoimage = $logotype == 'image' ? $this->params->get('logoimage', T3Path::getUrl('images/logo.png', '', true)) : '';
$logoimgsm = ($logotype == 'image' && $this->params->get('enable_logoimage_sm', 0)) ? $this->params->get('logoimage_sm', T3Path::getUrl('images/logo-sm.png', '', true)) : false;

if (!$sitename) {
$sitename = JFactory::getConfig()->get('sitename');
}

$logosize = 'col-sm-3';
if ($headright = $this->countModules('head-search or languageswitcherload')) {
$logosize = 'col-sm-3';
}

?>



<!-- MAIN NAVIGATION -->
<nav id="t3-mainnav" class="wrap navbar navbar-default t3-mainnav">
<div class="container">

<!-- LOGO -->
<div class="col-md-3 <?php echo $logosize ?> logo">
<div class="logo-<?php echo $logotype, ($logoimgsm ? ' logo-control' : '') ?>">
<a href="/<?php echo JURI::base(true) ?>" title="<?php echo strip_tags($sitename) ?>">
<?php if($logotype == 'image'): ?>
<img class="logo-img" src="/<?php echo JURI::base(true) . '/' . $logoimage ?>" alt="<?php echo strip_tags($sitename) ?>" />
<?php endif ?>
<?php if($logoimgsm) : ?>
<img class="logo-img-sm" src="/<?php echo JURI::base(true) . '/' . $logoimgsm ?>" alt="<?php echo strip_tags($sitename) ?>" />
<?php endif ?>
<span><?php echo $sitename ?></span>
</a>
<small class="site-slogan"><?php echo $slogan ?></small>
</div>
</div>
<!-- //LOGO -->


<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">

<?php if ($this->getParam('navigation_collapse_enable', 1) && $this->getParam('responsive', 1)) : ?>
<?php $this->addScript(T3_URL.'/js/nav-collapse.js'); ?>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".t3-navbar-collapse">
<i class="fa fa-bars"></i>
</button>
<?php endif ?>

<?php if ($this->getParam('addon_offcanvas_enable')) : ?>
<?php $this->loadBlock ('off-canvas') ?>
<?php endif ?>

</div>

<?php if ($this->getParam('navigation_collapse_enable')) : ?>
<div class="t3-navbar-collapse navbar-collapse collapse"></div>
<?php endif ?>

<div class="t3-navbar navbar-collapse collapse">
<jdoc:include type="<?php echo $this->getParam('navigation_type', 'megamenu') ?>" name="<?php echo $this->getParam('mm_type', 'mainmenu') ?>" />
</div>

</div>
</nav>
<!-- //MAIN NAVIGATION -->





//==============================================================================//

custom.css put this:

.t3-mainnav {
width: 100%;
position:fixed;
top:0;
left:0;
transition: top .2s ease-in;
z-index:9999;
}

.js-t3-mainnav-scrolling {
top: -4em; /* Height of the header */
}

@media (max-width:767px) {
.t3-mainnav {
position:fixed;
}
.js-t3-mainnav-scrolling {
top: 0px;
}
}

//==============================================================================//

put between <head> and </head>.


<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script type="text/javascript">
//Requires JQuery or Zepto
$(document).ready(function(){

// Cache header
var $header = $('.t3-mainnav');

// Get height of t3-mainnav to use later as starting point
var $hHeight = $header.height();

// Set initial position to current position on page
var prevTop = $(window).scrollTop();

// Scroll event
$(window).on('scroll', function(e) {
st = $(this).scrollTop(); // Set scroll location
if (st > prevTop && st > $hHeight) {
$header.addClass('js-t3-mainnav-scrolling');
} else {
$header.removeClass('js-t3-mainnav-scrolling');
}
prevTop = st;
});

});
</script>

</head>
//==============================================================================//

Base http://codepen.io/markmichon/pen/yicGB
Comment
There are no comments made yet.
Accepted Answer Pending Moderation
0
Votes
Undo
Oh, it's great Igor Cunha ;)
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 1
Accepted Answer Pending Moderation
0
Votes
Undo
thank you for sharing, Igor cunha, very useful!!
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 2
  • Page :
  • 1


There are no replies made for this post yet.
However, you are not allowed to reply to this post.