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

Hi Stefan,

Are you referring to a completely different image or text?

Cheers
Paul

Hey Paul,

the logo of my website is an image.

Cheers
Stefan

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

Hi Paul,

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

Cheers,
Stefan

HI Stefan,

Can you remind me of your site link

thanks
Paul

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

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

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

Hi Stefan,

Can you take a backup of the custom.css file

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}
}

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

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

Yes, it can be done. Here's a crude method I've used: put both logos in the same custom html module.



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



then in custom.css, you would toggle with code such as

Thanks Blueshift

Sean, does this do the trick for you?

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

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.

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

another idea would be to be able to change the position of the menu icon when in mobile screen size?