Joomla Templates Club 406,261 posts

[sakari Friend sakariJoin date: February 2009Posts: 171Downloads:111Uploads:79 Thanks: 43 Thanked: 15 times in 1 posts]

#198316

Hello friends,
have a question for you! 🙂

Can you fix the whole menu header fixed this template?
Just like the Tempalte JA Muzic where the whole menu stops when scrolling!

Were that possible, if so, what would you change?

Actually, you should this possibility all the Templates Future be selectable!

Thanks in advance.

regards 🙂
Sakari

[fmfame Friend fmfameJoin date: October 2013Posts: 228Downloads:4Uploads:39 Thanks: 8 Thanked: 25 times in 1 posts]

#537233

Hi sakari,

It is possible. BUT…..

Every template has its own style and header layout. In decor template for example, the header has a height o 80px and the content inside has its own alignment. So if you will fix this header you have to style the header to lower height or you have to use the 80px height (and thats very much for a fixed header)

We have much different styles with and without fixed headers, so users can choose which template and layout is cool for the project they use.

however, to fix the header you can add custom.css in templates/css and add the line:

.t3-header{
position:fixed;
}

So thats the easiest way to fix the header in all device widths.

But maybe you dont want to use the height of 80px, so you have to customize many other css parameters for navigation height, alignment, displaying overflowing elements etc..

I hope you understand what i mean.

1 user says Thank You to fmfame for this useful post

1. sakari

[sakari Friend sakariJoin date: February 2009Posts: 171Downloads:111Uploads:79 Thanks: 43 Thanked: 15 times in 1 posts]

#537303

No, it’s enough for me with the whole height of the header!

It works great!

Thanks for the help! 🙂

[sakari Friend sakariJoin date: February 2009Posts: 171Downloads:111Uploads:79 Thanks: 43 Thanked: 15 times in 1 posts]

#540030

Have overlooked something! : (
Fixation problem with the iPhone with header!
Header bar with logo is not displayed!
Please Look at the screenshots, then you can see what I mean!

Without header fixation!

With header fixation!

Can anyone help? 🙂

Thanks in advance

Regards 🙂

Sakari

---

Attachments:

1. 
2. 

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

#540259

I see you added this declaration below in the custom.css file:

.t3-header{
position:fixed;
}


That’s reason why the header bar is always fixed on top of your site.

[sakari Friend sakariJoin date: February 2009Posts: 171Downloads:111Uploads:79 Thanks: 43 Thanked: 15 times in 1 posts]

#540590

I’ve also added this code, but in the iPhone the logo is no longer displayed!
Am I doing this code out again, then the logo is displayed!
What happens when your inserting it?

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

#540768

This tweak will help to fix the problem on mobile phone.

Open templates/ja_decor/css/custom.css file and add this rule:

@media screen and (max-width: 992px) {
.t3-header {
position: relative !important;
}
}

1 user says Thank You to Ninja Lead for this useful post

1. sakari

[sakari Friend sakariJoin date: February 2009Posts: 171Downloads:111Uploads:79 Thanks: 43 Thanked: 15 times in 1 posts]

#540799

Perfect!
Thank you for your help! 🙂

[Author]

Posts