Support Forum

Please note that this forum is only available to you in read only mode. In order to contribute to this conversation you will need to renew your subscription.

Change Logo after collapse

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Hi,

I would like to have a different logo in the mobile version of a website after collapse than on the desktop version of the website? Is it possible to do this within CSS?

Cheers
Stefan
  • Stefan Waldhauser's Avatar
  • Stefan Waldhauser
  • 6 Month Developer
  • 28 posts
  • Karma: 0
The administrator has disabled public write access.
Hi Stefan,

Are you referring to a completely different image or text?

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Hey Paul,

the logo of my website is an image.

Cheers
Stefan
  • Stefan Waldhauser's Avatar
  • Stefan Waldhauser
  • 6 Month Developer
  • 28 posts
  • Karma: 0
The administrator has disabled public write access.
Hi Stefan,

Not easily no I'm afraid

Could swap if out but then its background images which don't resize and would require more css to make the logo clickable

I will try and ask the devs on monday if they have an easier alternative

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Hi Paul,

have you found something yet? It's also not a problem if the logo is NOT clickable.

Cheers,
Stefan
  • Stefan Waldhauser's Avatar
  • Stefan Waldhauser
  • 6 Month Developer
  • 28 posts
  • Karma: 0
The administrator has disabled public write access.
HI Stefan,

Can you remind me of your site link

thanks
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
This is what I tried

@media screen and (max-width: 460px) {
.logo h2 a {display: none;}
.logo h2 {background: url(../images/logo/aquaorange.jpg) center center no-repeat;}
}

with an image folder called logo in \templates\nebula\images
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
I'm adding to the custom css file

I'm a little uncertain on width and height so I added them matching the height and width of the image e.g. 460px x 100px

so it becomes

.logo h2 {background: url(../images/logo/aquaorange.jpg) center center no-repeat; width:460px; height:100px;}

but this would depend on your image

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
The following user(s) said Thank You: Stefan Waldhauser
Hello Paul,

on the big logo (big_logo.jpg) there is a link to the HOME-site. Is it possible to add this feature to the small logo (small_logo.jpg) as well?

Cheers,
Stefan


www.moessinger.at
Attachments:
  • Stefan Waldhauser's Avatar
  • Stefan Waldhauser
  • 6 Month Developer
  • 28 posts
  • Karma: 0
The administrator has disabled public write access.
Hi Stefan,

Can you take a backup of the custom.css file
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Can you re-write your css to try this

/*Kleines LOGO*/
@media screen and (max-width: 460px) {
.logo h2 a {
display: block;
height: inherit;
}
.logo img {display:none}
.logo h2 {
background: url('/images/Homepage/logo/logo_k.png') left center no-repeat;
height: 52px !important; width: 300}
}
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
The following user(s) said Thank You: Stefan Waldhauser
Check to see if the mobile menu still works ok as the space across the full width where the logo is will be clickable

So it is a compromise

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
The following user(s) said Thank You: Stefan Waldhauser
Here you make it possible to change the logo image. I would just need it to shrink as our logo is quite wide and the menu icon overlaps on top when on mobile screen size.

Any easy way for this?
www.edgeneve.ch

thanks
Sean
  • Sean's Avatar
  • Sean
  • 12 Month basic
  • 207 posts
  • 1 Thanks
  • Karma: 0
Last Edit: 3 years 11 months ago by Sean.
The administrator has disabled public write access.
Yes, it can be done. Here's a crude method I've used: put both logos in the same custom html module.

logo-swap-1.jpg


Then wrap each in a uniquely named div, eg div id="logo1" and div id="logo2"

logo-swap-2.jpg


then in custom.css, you would toggle with code such as
<!-- normal-->
#logo1 (display:block;}
#logo2 {display:none;}

<!--tablet-->
@media screen
  and (min-width:800px)
  and (orientation : portrait) {
#logo1{display:none;}
#logo2{display:block;}
}
  • blueshift's Avatar
  • blueshift
  • 6 Month Developer
  • 2579 posts
  • 78 Thanks
  • Karma: 26
Last Edit: 3 years 11 months ago by blueshift.
The administrator has disabled public write access.
The following user(s) said Thank You: manh
Thanks Blueshift :)
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Sean, does this do the trick for you?
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Thanks Bueshift,

I am presuming I then publish the module to menu position? Do I then have to take the logo out of the template layout settings?

Sorry if this was obvious...
Sean
  • Sean's Avatar
  • Sean
  • 12 Month basic
  • 207 posts
  • 1 Thanks
  • Karma: 0
The administrator has disabled public write access.
Paul knows Nebula better than I, but knowing JB, there is a 'logo' position already defined. Remove the logo in the template manager, then publish the custom html module to 'logo.' You may need to make adjustments in custom.css to fine tune positioning. I'm sure Paul will weigh in soon with specific advice.
  • blueshift's Avatar
  • blueshift
  • 6 Month Developer
  • 2579 posts
  • 78 Thanks
  • Karma: 26
Last Edit: 3 years 11 months ago by blueshift.
The administrator has disabled public write access.
Hey thanks for the quick response.
alas in nebula there is no logo position it is controled only through the template settings (selecting an image)
maybe paul has a work around

Sean
  • Sean's Avatar
  • Sean
  • 12 Month basic
  • 207 posts
  • 1 Thanks
  • Karma: 0
The administrator has disabled public write access.
another idea would be to be able to change the position of the menu icon when in mobile screen size?
  • Sean's Avatar
  • Sean
  • 12 Month basic
  • 207 posts
  • 1 Thanks
  • Karma: 0
The administrator has disabled public write access.

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Happy Campers