Joomla Templates Club 406,261 posts

[matgray87 Friend matgray87Join date: November 2011Posts: 159Downloads:0Uploads:17 Thanks: 33 Thanked: 8 times in 1 posts]

#196166

Hi,
I am trying to create the top header and menu across 100% of the width of the screen, and also appear fixed. I can create this by

div#top-header.t3-top-header {
position: fixed;
width: 100%;
background-color: #222222;
z-index: 300;
top: 0;
}


and

.t3-mainnav {
border: none;
margin-bottom: 0;
border-radius: 0;
z-index: 100;
position: fixed;
top: 40px;
width: 100%;
background-color: #ffffff;
}


however, this throws the positioning of the rest of the site.

Any suggestions how to fix this?

Do I need to move the top-header and header into a separate block below, or is it just a case of adding a 120px top-margin somewhere?

<div class="t3-wrapper home"> <!-- Need this wrapper for off-canvas menu. Remove if you don't use of-canvas -->

<?php $this->loadBlock('top-header') ?>

<?php $this->loadBlock('header') ?>

<?php $this->loadBlock ('slideshow') ?>

<?php $this->loadBlock('mainbody-home') ?>

<?php $this->loadBlock ('masshead') ?>

<?php $this->loadBlock('footer') ?>

</div>


Thanks,
Matt

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

#528178

Open this File : templatesja_biztplsblockshead.php

Add this code


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

[matgray87 Friend matgray87Join date: November 2011Posts: 159Downloads:0Uploads:17 Thanks: 33 Thanked: 8 times in 1 posts]

#528213

Thanks Chavan – is there a way to do it with just CSS?

Cheers

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

#528250

yes, there is another way to get this done, please check this tutorial http://t3-framework.org/documentation/menu-system.html#sticky-menu

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#528272

@matgray87: If you want to full width (100%) top header and menu, you have to change with my suggest below

+ menu

Open templates/ja_biz/tpls/blocks/top-header.php file and remove container div, find and remove line 18: <div class=”container”> and line 57: </div>

+ top-header

Open templates/ja_biz/tpls/blocks/header.php file and remove container div, find and remove line 25: <div class=”container”> and line 76: </div>

Hope it helps

[Author]

Posts