Joomla Templates Club 406,261 posts

[rodrago Friend rodragoJoin date: May 2015Posts: 30Downloads:41Uploads:0 Thanks: 17]

#208894

How can i fixed topbar and header??

I tried inserting into /templates/your_template_name/tpls/blocks/header.php this some pieces of code

<header id="t3-header" class="wrap t3-header" data-spy="affix" data-offset-top="60">

And in my custom.css i insert :

.t3-header.affix {
position: fixed;
width: 100%;
z-index: 1030;
top: 0;
}

My header is fixed but my topbar no… how can i fixed this position??

Thanks in advance

[Css Magician Friend Css MagicianJoin date: October 2014Posts: 741Downloads:43Uploads:53 Thanks: 114 Thanked: 366 times in 263 posts]

#577726

Hi @rodrago,

I made some changes on your site and it’s working fine now. Below are my tweak:
[PHP]

<?php $this->loadBlock(‘topbar’) ?>

<?php $this->loadBlock(‘header’) ?>

[/PHP]

with
[PHP]
<div class=”t3-header-wrap” data-spy=”affix”>
<?php $this->loadBlock(‘topbar’) ?>

<?php $this->loadBlock(‘header’) ?>
</div>
[/PHP]
in /templates/your_template_name/tpls/default-content-left.php

And replace
[PHP]
<header id=”t3-header” class=”wrap t3-header” data-spy=”affix” data-offset-top=”60″>
[/PHP] with
[PHP]
<header id=”t3-header” class=”wrap t3-header”>
[/PHP] in /templates/your_template_name/tpls/blocks/header.php

Replace


.logo {margin-top: -85px!important; max-width: 300px!important}
.t3-mainnav {margin-left: 250px!important}
.t3-header {padding-top: 15px!important; padding-bottom: 15px!important}
.navbar-header {display: none!important;}
.t3-header.affix {position: fixed;width: 100%;z-index: 1030;top: 0;}
.t3-topbar.affix .affix {position: fixed;width: 100%;z-index: 1030;top: 0;}

with


.logo {margin-top: -85px!important; max-width: 300px!important}
.t3-mainnav {margin-left: 250px!important}
.t3-header {padding-top: 15px!important; padding-bottom: 15px!important}
.navbar-header {display: none!important;}
.t3-header-wrap.affix {position: fixed;width: 100%;z-index: 1030;top: 0;}
.t3-topbar.affix .affix {position: fixed;width: 100%;z-index: 1030;top: 0;}
.t3-header-wrap.affix + .t3-mainbody { margin-top: 158px; }

in the custom.css file.

2 users say Thank You to Css Magician for this useful post

1. Saguaros
2. rodrago

[rodrago Friend rodragoJoin date: May 2015Posts: 30Downloads:41Uploads:0 Thanks: 17]

#578029

Thanks for reply…

Top and header are fixed now but i cant fill login/registration fileds.

[rodrago Friend rodragoJoin date: May 2015Posts: 30Downloads:41Uploads:0 Thanks: 17]

#644320

Thanks for reply…

Top and header are fixed now but i cant fill login/registration fileds.

[rodrago Friend rodragoJoin date: May 2015Posts: 30Downloads:41Uploads:0 Thanks: 17]

#742953

Thanks for reply…

Top and header are fixed now but i cant fill login/registration fileds.

[Css Magician Friend Css MagicianJoin date: October 2014Posts: 741Downloads:43Uploads:53 Thanks: 114 Thanked: 366 times in 263 posts]

#578101

I just added some additional css rules below:


.modal-open .t3-header-wrap.affix + .t3-mainbody { margin-top: 0; }
.modal-open .t3-header-wrap.affix {position: static; z-index: 1;}

in the custom.css file.

Kindly take a look.

[Author]

Posts