1. pedra
  2. Sherlock Holmes
  3. Commercial Templates
  4. Monday, 26 June 2023
  5.  Subscribe via email
Hi Ciaran,

I would like to use Syklar for my next project. But I would also like to have Stella's hover effect for the top menu items.
How can I realize this effect?

Thank you in advance for helpful tips.
Pedra
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Stella

Are you referring to the animated bar above the parent menu item?

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 1
Accepted Answer Pending Moderation
0
Votes
Undo
Exactly, I like the animated bar very much, but I have no idea how I can realize it.

Pedra
  1. more than a month ago
  2. Commercial Templates
  3. # 2
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

To amend try adding the following to the Custom CSS field of your templates parameters (Extensions -> Templates -> [YourTemplateStyle] -> Custom CSS)....

.hornav>ul>li>a:after, .hornav>ul>li>span:after {
position: absolute;
content: "";
left: 50%;
right: 50%;
height: 4px;
background-color: rgba(100,100,100,0.1);
background-color: var(--primary);
opacity: 0;
transition: all .35s ease;
top: 0;
transition-delay: .1s;
}
.hornav>ul>li>a:hover:after, .hornav>ul>li>span:hover:after {
left: 0;
right: 0;
opacity: 1;
}


Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 3
Accepted Answer Pending Moderation
0
Votes
Undo
Great - this works wonderfully.
While working on the project, another question arose. Is it possible to link the logo to a menu item other than the home page?

Thank you very much for the support!

Pedra
  1. more than a month ago
  2. Commercial Templates
  3. # 4
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Pedra

The only option currently available would be to edit the templates ../inc/layouts/logo.php and replace the following with the URL you wish to use (line 13)...

<?php echo $this->baseurl ?>


Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 5
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran,

thanks for the tip. A first test also worked. Unfortunately, I did not consider that it is a bilingual homepage and with the second language I get an error message.
I suspect it's because I didn't use a child template, but a new style for the second language.
I still have to test that. Would you say that a child template is generally better suited for a multilingual site?

Thank you very much

Pedra
  1. more than a month ago
  2. Commercial Templates
  3. # 6
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

Another option may be to create multiple template styles and change the URL in each with some JS by adding the following to the Head Custom Code field of your templates parameters (Extensions -> Template Manager -> YourTemplate -> Custom Code -> Head Custom Code)...

<script>
document.addEventListener("DOMContentLoaded", function() {
const logoLink = document.querySelector(".logo a");
logoLink.setAttribute('href', "http://whatever.com");;
});
</script>


Replace http://whatever.com to the URL of your choice.

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 7
Accepted Answer Pending Moderation
0
Votes
Undo
Great, it doesn't get any better than this way.

Thank you very much for the great support.
Pedra
  1. more than a month ago
  2. Commercial Templates
  3. # 8
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!