Joomla Templates Club 406,261 posts

[tabbus Friend tabbusJoin date: July 2015Posts: 123Downloads:3Uploads:25 Thanks: 10]

#1052224

Hello,

I have a number of modifications I’d like to perform and wondered if anyone could be of assistance?

1. Can I make the header bar static and not disappear when scrolling down, but follow the scroll down?

2. Can I add a smaller logo to the header bar when a user scrolls down?

3. Can the off canvas be set to appear only at a certain screen resolution?

If anyone can point out where i can adapt the code for these elements, much appreciated.

Thanks

[tabbus Friend tabbusJoin date: July 2015Posts: 123Downloads:3Uploads:25 Thanks: 10]

#1052300

Update
I have managed to create the static nabber, but it doesn’t function on all pages.
I have switched off the canvas nav until 992px this works.

If anyone can help with some of the other features that would be helpful

Thanks

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1052568

Hi,

Do you mean that you want to replace the current logo with a smaller one when scrolling down / up the page?

At this moment, there is no option to do that, you will need to customize a bit with css tweak:

.scrollDown .t3-header, .scrollUp .t3-header ..logo-image {
    background-image: url("path/to/your/smaller/logo/here");
    background-repeat: no-repeat;   
}

.scrollDown .t3-header, .scrollUp .t3-header .logo-img {
    display: none;
}

[tabbus Friend tabbusJoin date: July 2015Posts: 123Downloads:3Uploads:25 Thanks: 10]

#1059909

Many thanks,

I’ve been away will try this out and reply on the results.

[tabbus Friend tabbusJoin date: July 2015Posts: 123Downloads:3Uploads:25 Thanks: 10]

#1063538

Hello sorry for the delay,

I’ve tried this out and it hides the whole top bar on scroll down,

I’ve modified it to this:

.scrollDown .t3-header .logo-control .logo-img-sm {
display: block;
background-image: url("../../../images/logo.png");
}

.scrollDown .t3-header .logo-image .logo-img {
display:none;
}

Using the built in small logo feature and it works.

Many thanks

[tabbus Friend tabbusJoin date: July 2015Posts: 123Downloads:3Uploads:25 Thanks: 10]

#1063540

Update:

It doesn’t need the added url path to the small logo, if using the small logo function in the T3 template.
Just the class is needed with display:block and then some styling for logo-img-sm:

.logo-img-sm {
padding-top:10px;
}
.scrollDown .t3-header .logo-control .logo-img-sm {

display: block;
NOT REQUIRED-----/*background-image: url("../../../images/logo.png");
NOT REQUIRED-----/*background-repeat:no-repeat;*/

}

[Author]

Posts