Joomla Templates Club 406,261 posts

[steelgoddess Friend steelgoddessJoin date: January 2010Posts: 17Downloads:0Uploads:1 Thanks: 2 Thanked: 1 times in 1 posts]

#165042

Is it possible in this template to easily make the menu and header fixed, so the content scrolls under them? I want the menu and header to be on top all the time when moving through the page.

Thanks in advance.

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#395566

Possible but would probably work better if the menu block was above the logo block. Is that what you wanted or do you want your logo and the search box etc in view all the time?

[steelgoddess Friend steelgoddessJoin date: January 2010Posts: 17Downloads:0Uploads:1 Thanks: 2 Thanked: 1 times in 1 posts]

#395600

It would be fine if they were in view all the time. That would work well actually, but if I have to sacrifice something I would be open to that as well. R T’s new template this month has a fixed menu and the logo on the menu bar.
I happen to like this template better though. I thought of combining elements of both…but I imagine that would be a hassle…so right now looking for the easiest solution. thanks!

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#395603

To make both fixed we would need to put them both in a single div and apply the “postiton: fixed;” css class to it. I think however (jut my numpties opinion) that keeping both fixed at the top takes up too much real estate so let’s see how we get on just moving the menu.

First go into the template manager ans swap the two blocks around. Go to the layouts tab and change the lines in red below from

<?xml version="1.0" encoding="utf-8"?>
<layout name="desktop">
<!--Extra css load for this layout-->
<stylesheets>
</stylesheets>
<blocks name="top" style="xhtml">
<block name="header" type="header" wrap-inner="1" main-inner="1"></block>
<block name="mainnav" type="mainnav" main-inner="1"></block>
<block name="cpanel" type="usertools/cpanel"></block>
<block name="slideshow" type="modules" style="raw">slideshow</block>
<block name="topsl" type="spotlight" main-inner="1">user1,user2,user3,user4,user5</block>
<block name="topsl1" type="spotlight" main-inner="1">user6,user7,user8,user9,user10</block>
</blocks>
<blocks name="middle" colwidth="22" fixheight="1">
<block name="content-mass-top">content-mass-top</block>
<block name="content-top" type="modules">content-top</block>
<block name="content-bottom" type="modules" style="raw">content-bot</block>
<block name="left-mass-top">left-mass-top</block>
<block name="left1">left</block>
<block name="left2">right</block>
</blocks>
<blocks name="bottom" style="xhtml">
<block name="botsl" type="spotlight" main-inner="1" wrap-inner="1" >content-bottom</block>
<block name="botsl1" type="spotlight" main-inner="1">user11,user12,user13,user14,user15</block>
<block name="navhelper" type="navhelper"></block>
<block name="botsl2" type="spotlight" main-inner="1">user16,user17,user18,user19,user20</block>
<block name="footer" type="footer" wrap-inner="1"></block>
</blocks>
</layout>

to

<?xml version="1.0" encoding="utf-8"?>
<layout name="desktop">
<!--Extra css load for this layout-->
<stylesheets>
</stylesheets>
<blocks name="top" style="xhtml">
<block name="mainnav" type="mainnav" main-inner="1"></block>
<block name="header" type="header" wrap-inner="1" main-inner="1"></block>
<block name="cpanel" type="usertools/cpanel"></block>
<block name="slideshow" type="modules" style="raw">slideshow</block>
<block name="topsl" type="spotlight" main-inner="1">user1,user2,user3,user4,user5</block>
<block name="topsl1" type="spotlight" main-inner="1">user6,user7,user8,user9,user10</block>
</blocks>
<blocks name="middle" colwidth="22" fixheight="1">
<block name="content-mass-top">content-mass-top</block>
<block name="content-top" type="modules">content-top</block>
<block name="content-bottom" type="modules" style="raw">content-bot</block>
<block name="left-mass-top">left-mass-top</block>
<block name="left1">left</block>
<block name="left2">right</block>
</blocks>
<blocks name="bottom" style="xhtml">
<block name="botsl" type="spotlight" main-inner="1" wrap-inner="1" >content-bottom</block>
<block name="botsl1" type="spotlight" main-inner="1">user11,user12,user13,user14,user15</block>
<block name="navhelper" type="navhelper"></block>
<block name="botsl2" type="spotlight" main-inner="1">user16,user17,user18,user19,user20</block>
<block name="footer" type="footer" wrap-inner="1"></block>
</blocks>
</layout>

As you can see, I have just swapped the two over so the nav appears above the header block.

So let’s now apply the position:fixed; class to the menu block.

Open templates>ja_travel>css>template.css and at line 741 please add the line highlighted in red below.


#ja-mainnav {
background: url("../images/mainnav-bg.gif") repeat-x scroll left bottom #73031A;
line-height: normal;
position: fixed;
z-index: 250;

}

We now need to apply some padding to push the header block down to the correct place. So open the same template.css file and add the line highlighted in red below at line 643ish


#ja-header {
background: url("../images/top-bg.gif") repeat scroll left top transparent;
padding-top: 50px;

}

1 user says Thank You to Phill for this useful post

1. ibs285

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#395607

Now for if you want both the menu and the header fixed do none of the above post but do this instead.

First open templates>ja_travel>css>template.css and add the following code at the end


.fixed {
clear: both;
position: fixed;
top: 0;
width: 100%;
z-index: 1000;

}

body.fs3 #ja-wrapper {
font-size: 100%;
padding-top: 174px;

}

Then open templates>ja_travel>blocks>header.php and add the line highlighted in red below

<?php
/*
# ------------------------------------------------------------------------
# JA Travel Template
# ------------------------------------------------------------------------
# Copyright (C) 2004-2010 JoomlArt.com. All Rights Reserved.
# @license - PHP files are GNU/GPL V2. CSS / JS are Copyrighted Commercial,
# bound by Proprietary License of JoomlArt. For details on licensing,
# Please Read Terms of Use at http://www.joomlart.com/terms_of_use.html.
# Author: JoomlArt.com
# Websites: http://www.joomlart.com - http://www.joomlancers.com
# Redistribution, Modification or Re-licensing of this file in part of full,
# is bound by the License applied.
# ------------------------------------------------------------------------
*/
?>
<div class="fixed">
<?php $this->genBlockBegin ($block) ?>
<?php
$app = & JFactory::getApplication();
$siteName = $app->getCfg('sitename');
if ($this->getParam('logoType', 'image')=='image'): ?>
<h1 class="logo">
<a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $siteName; ?></span></a>
</h1>

<?php else:
$logoText = (trim($this->getParam('logoText'))=='') ? $siteName : JText::_(trim($this->getParam('logoText')));
$sloganText = JText::_(trim($this->getParam('sloganText'))); ?>
<div class="logo-text">
<h1><a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $logoText; ?></span></a></h1>
<p class="site-slogan"><?php echo $sloganText;?></p>
</div>
<?php endif; ?>
<h3>Optional slogan here</h3>
<?php if( $this->countModules('top_menu')): ?>
<div id="ja-topheader">
<jdoc:include type="modules" name="top_menu" style="raw" />
</div>
<?php endif; ?>

<?php if( $this->countModules('search')): ?>
<div id="ja-search">
<jdoc:include type="modules" name="search" style="raw" />
</div>
<?php endif; ?>

<?php $this->genBlockEnd ($block) ?>

then open templates>ja_travel>blocks>mainnav.php and add the line highlighted in red below.

<?php
/*
# ------------------------------------------------------------------------
# JA Business Template
# ------------------------------------------------------------------------
# Copyright (C) 2004-2009 J.O.O.M Solutions Co., Ltd. All Rights Reserved.
# @license - Copyrighted Commercial Software
# Author: J.O.O.M Solutions Co., Ltd
# Websites: http://www.joomlart.com - http://www.joomlancers.com
# This file may not be redistributed in whole or significant part.
# ------------------------------------------------------------------------
*/
?>
<?php if ($this->hasSubmenu() && ($jamenu = $this->loadMenu())) : ?>
<div class="ja-mainnav-haschild">
<?php endif; ?>
<?php $this->genBlockBegin ($block) ?>
<?php if (($jamenu = $this->loadMenu())) $jamenu->genMenu (); ?>
<?php $this->genBlockEnd ($block) ?>
<!-- jdoc:include type="menu" level="0" / -->
<?php if ($this->hasSubmenu() && ($jamenu = $this->loadMenu())) : ?>
<div id="ja-subnav" class="wrap">
<div class="main clearfix">
<?php $jamenu->genMenu (1); ?>
<!-- jdoc:include type="menu" level="1" / -->
</div>
</div>
<?php endif;?>
<?php if ($this->hasSubmenu() && ($jamenu = $this->loadMenu())) : ?>
</div>
<?php endif; ?>
<ul class="no-display">
<li><a href="<?php echo $this->getCurrentURL();?>#ja-content" title="<?php echo JText::_("Skip to content");?>"><?php echo JText::_("Skip to content");?></a></li>
</ul>
</div>


It doesn’t look too bad actually though I still think that on smaller screens it would take up too much room. Just my opinion that, I really am no designer.

1 user says Thank You to Phill for this useful post

1. ibs285

[steelgoddess Friend steelgoddessJoin date: January 2010Posts: 17Downloads:0Uploads:1 Thanks: 2 Thanked: 1 times in 1 posts]

#395630

Thank you Phil.
I did every thing you said to do, step by step, but it didn’t work :((. The positions did change in the first example, but nothing remained static. I went back to the second set of instructions, and the positions did change again, but again, nothing remained static.
I followed to a t, and did twice. I did notice, some of your line verbage in the css was different than what i had in the template.css file.
Is there a difference between lets say what you are looking at vs the quick start?
Thanks again.

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#395652

I am using the quickstart on my local machine. Please make sure you have css optimization set to “No” then if you woild like to PM me an admin logon and ftp details I can make the changes for you.

1 user says Thank You to Phill for this useful post

1. steelgoddess

[steelgoddess Friend steelgoddessJoin date: January 2010Posts: 17Downloads:0Uploads:1 Thanks: 2 Thanked: 1 times in 1 posts]

#395721

My optimization was set to yes.. so i changed to no, and redid both variations.. They worked! Of course now I have to decide which I like better, as both have their merits. So, must I always have the optimization checked to no now?
Thanks so much for the very detailed and easy to follow instructions. It got me exactly what I needed.:)

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#395724

You should be able to safely re-enable your optimisation and clear all your caches. The reason we disabled it was just to check your changes are working. When you are making CSS edits it is better to not cache things so you can see the changes correctly. Once you are happy you can set it back to yes and clearing the cache will rewrite the new CSS into the cache.

[ibs285 Friend ibs285Join date: December 2011Posts: 4Downloads:0Uploads:0 Thanks: 3]

#434134

<em>@phill luckhurst 246079 wrote:</em><blockquote>Now for if you want both the menu and the header fixed do none of the above post but do this instead.

First open templates>ja_travel>css>template.css and add the following code at the end


.fixed {
clear: both;
position: fixed;
top: 0;
width: 100%;
z-index: 1000;

}

body.fs3 #ja-wrapper {
font-size: 100%;
padding-top: 174px;

}

Then open templates>ja_travel>blocks>header.php and add the line highlighted in red below

<?php
/*
# ------------------------------------------------------------------------
# JA Travel Template
# ------------------------------------------------------------------------
# Copyright (C) 2004-2010 JoomlArt.com. All Rights Reserved.
# @license - PHP files are GNU/GPL V2. CSS / JS are Copyrighted Commercial,
# bound by Proprietary License of JoomlArt. For details on licensing,
# Please Read Terms of Use at http://www.joomlart.com/terms_of_use.html.
# Author: JoomlArt.com
# Websites: http://www.joomlart.com - http://www.joomlancers.com
# Redistribution, Modification or Re-licensing of this file in part of full,
# is bound by the License applied.
# ------------------------------------------------------------------------
*/
?>
<div class="fixed">
<?php $this->genBlockBegin ($block) ?>
<?php
$app = & JFactory::getApplication();
$siteName = $app->getCfg('sitename');
if ($this->getParam('logoType', 'image')=='image'): ?>
<h1 class="logo">
<a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $siteName; ?></span></a>
</h1>

<?php else:
$logoText = (trim($this->getParam('logoText'))=='') ? $siteName : JText::_(trim($this->getParam('logoText')));
$sloganText = JText::_(trim($this->getParam('sloganText'))); ?>
<div class="logo-text">
<h1><a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $logoText; ?></span></a></h1>
<p class="site-slogan"><?php echo $sloganText;?></p>
</div>
<?php endif; ?>
<h3>Optional slogan here</h3>
<?php if( $this->countModules('top_menu')): ?>
<div id="ja-topheader">
<jdoc:include type="modules" name="top_menu" style="raw" />
</div>
<?php endif; ?>

<?php if( $this->countModules('search')): ?>
<div id="ja-search">
<jdoc:include type="modules" name="search" style="raw" />
</div>
<?php endif; ?>

<?php $this->genBlockEnd ($block) ?>

then open templates>ja_travel>blocks>mainnav.php and add the line highlighted in red below.

<?php
/*
# ------------------------------------------------------------------------
# JA Business Template
# ------------------------------------------------------------------------
# Copyright (C) 2004-2009 J.O.O.M Solutions Co., Ltd. All Rights Reserved.
# @license - Copyrighted Commercial Software
# Author: J.O.O.M Solutions Co., Ltd
# Websites: http://www.joomlart.com - http://www.joomlancers.com
# This file may not be redistributed in whole or significant part.
# ------------------------------------------------------------------------
*/
?>
<?php if ($this->hasSubmenu() && ($jamenu = $this->loadMenu())) : ?>
<div class="ja-mainnav-haschild">
<?php endif; ?>
<?php $this->genBlockBegin ($block) ?>
<?php if (($jamenu = $this->loadMenu())) $jamenu->genMenu (); ?>
<?php $this->genBlockEnd ($block) ?>
<!-- jdoc:include type="menu" level="0" / -->
<?php if ($this->hasSubmenu() && ($jamenu = $this->loadMenu())) : ?>
<div id="ja-subnav" class="wrap">
<div class="main clearfix">
<?php $jamenu->genMenu (1); ?>
<!-- jdoc:include type="menu" level="1" / -->
</div>
</div>
<?php endif;?>
<?php if ($this->hasSubmenu() && ($jamenu = $this->loadMenu())) : ?>
</div>
<?php endif; ?>
<ul class="no-display">
<li><a href="<?php echo $this->getCurrentURL();?>#ja-content" title="<?php echo JText::_("Skip to content");?>"><?php echo JText::_("Skip to content");?></a></li>
</ul>
</div>


It doesn’t look too bad actually though I still think that on smaller screens it would take up too much room. Just my opinion that, I really am no designer.</blockquote>

Thanks Phil for this post. Works get. How can I also include hot-news in the fixed header? It drops below the fixed header. I moved the hot-news block in the layout, but the only position it sticks is between the header and menu blocks, otherwise it drops to the main page layout that scrolls.

Thank you!

[Author]

Posts