Simple Link in Topbar

Post Reply
UlrichC
Posts: 16
Joined: 03 Sep 2015, 23:49

09 Jan 2019, 09:37

Hi,

I bought Avalon theme and now I try to integrate a direct link into the topbar, which should look like the other "menus", but don't work like the menu (open a sub-menu). I have this here in the topbar:

Code: Select all

                <li class="profile-item" style="margin-top: -3px;">
                    <span>
                        <h:link outcome="login">
                            <span class="topbar-item-name">Anmelden</span>
                        </h:link>
                    </span>
                </li>
Image

This looks fine and works, but when the screen is getting smaller and the Hamburger Icon appears, it looks very bad:
Image

If I remove the <span> around the h:link, then it looks alright, but then the Link did not work.

Can someone point me to the right direction? Many thanks in advance, Ulrich

User avatar
aragorn
Posts: 3406
Joined: 29 Jun 2013, 12:38

11 Jan 2019, 13:45

Please try;

Code: Select all

<li class="profile-item">
      <h:link outcome="login">
              <span class="topbar-item-name">Anmelden</span>
      </h:link>
 </li>

UlrichC
Posts: 16
Joined: 03 Sep 2015, 23:49

12 Jan 2019, 12:53

Thanks for the response.
The "view"-part works, the menu-item is rendered correctly in the menubar and the "Hambuger"-menu, but the link is not triggert there is no request fired.

One solution is following:

Code: Select all

<li class="profile-item" onclick="location.href='/login.xhtml';">
    <a href="#">
        <span class="topbar-item-name">Anmelden</span>
    </a>
</li>

In addition, then you can use the following to call a backend-method from that link:

Code: Select all

<p:remoteCommand name="logoff" update="@all" actionListener="#{userSession.logout}" />
<li class="profile-item" onclick="logoff();" jsf:rendered="#{userSession.loggedIn}">
    <a href="#">
        <span class="topbar-item-name">Abmelden</span>
    </a>
</li>
Clearly not the best solution, but it worked without modification of the theme or custom-css ;-)

User avatar
aragorn
Posts: 3406
Joined: 29 Jun 2013, 12:38

14 Jan 2019, 09:21

Please add the following line to layout.js;

Code: Select all

...
         this.topbarLinks.off('click.topbarLink').on('click.topbarLink', function(e) {
             ...
//line 229
            var href = link.attr('href');
            if(href && href !== '#') {
                window.location.href = href;
            }
            
            e.preventDefault();         
        });
Then,

Code: Select all

<li class="profile-item">
    <h:link outcome="login">
                <span class="topbar-item-name">Anmelden</span>
    </h:link>
 </li>
 
 OR
 
 <li class="profile-item">
    <a href="login.xhtml">
        <span class="topbar-item-name">Anmelden</span>
    </a>
</li>

UlrichC
Posts: 16
Joined: 03 Sep 2015, 23:49

23 Jan 2019, 19:27

Thank you very much, interesting solution, I will try that out on weekend...

User avatar
aragorn
Posts: 3406
Joined: 29 Jun 2013, 12:38

24 Jan 2019, 07:53

Thanks a lot for the update!

Post Reply

Return to “Avalon - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest