How can i make the logo clickable with an anchor ?
Is't handled over css and i have problem surrounding it with <a tag...
thanks
logo with anchor
Forum rules
Please note that response time for technical support is within 3-5 business days.
Please note that response time for technical support is within 3-5 business days.
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Hi @spadovan,
Exp;
Hi @myaspm,
We have the following html structure in topbar.xhtml;
You need to override background-image of logo to change logo image;
Exp;
Exp;
Code: Select all
<a href="#" >
<p:graphicImage name="images/avatar1.png" library="ultima-layout" width="35"/>
</a>
We have the following html structure in topbar.xhtml;
Code: Select all
<div class="topbar-left">
<div class="logo"></div>
</div>
Exp;
Code: Select all
.layout-wrapper .topbar .logo {
background-image: ...
}
Github Profile: https://github.com/mertsincan
Hi,
I have the same problem as @spadovan. I put a link around the logo, e.g. with <a>, and it's not clickable. Funnily, as soon as I put a second link below, it suddenly works. I guess because it pushes it out of some non-clickable area.
Can you help me out there?
Thanks,
Jörg.
I have the same problem as @spadovan. I put a link around the logo, e.g. with <a>, and it's not clickable. Funnily, as soon as I put a second link below, it suddenly works. I guess because it pushes it out of some non-clickable area.
Can you help me out there?
Thanks,
Jörg.
PrimeFaces 8.0.2 | Tomcat 9 | Mojarra 2.2.20
PrimeVue 1.3.2
Win10, Chrome 84
PrimeVue 1.3.2
Win10, Chrome 84
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Could you please attach a sample code for us to replicate?
Github Profile: https://github.com/mertsincan
Sure. Instead of:
... you put for example:
It is not a problem of the logo background-image. If I add...
... the image is gone, but the link is still not clickable. There are two ways to make it work, but with undesirable side-effects:
Jörg.
Code: Select all
<div class="topbar-left">
<div class="logo"></div>
</div>
Code: Select all
<div class="topbar-left">
<div class="logo">
<a href="#">
This is a link
</a>
</div>
</div>
Code: Select all
<script type="text/css">
.layout-wrapper .topbar .logo {
background: none;
}
</script>
- Add another link, then the second one is clickable
- Remove "float: left" of <div class="topbar-left">
Jörg.
PrimeFaces 8.0.2 | Tomcat 9 | Mojarra 2.2.20
PrimeVue 1.3.2
Win10, Chrome 84
PrimeVue 1.3.2
Win10, Chrome 84
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Thanks for the sample codes. Please try;
Also, you can add the above css into _layout_styles.scss file.(src/main/webapp/resources/sass/)
Code: Select all
<style type="text/css">
.layout-wrapper .topbar .topbar-link {
color: white;
position: relative;
z-index: 100;
}
</style>
//topbar.xhtml
...
<div class="topbar-left">
<a href="#" class="topbar-link">
This is a link
</a>
</div>
...
Github Profile: https://github.com/mertsincan
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Glad to hear, thanks a lot for the update!
Regards,
Regards,
Github Profile: https://github.com/mertsincan
-
- Information
-
Who is online
Users browsing this forum: No registered users and 16 guests