Different logo for mobile

This topic has 11 replies, 3 voices, and was last updated 4 years ago by Ying.

Viewing 12 posts - 1 through 12 (of 12 total)

Author

Posts
March 13, 2022 at 6:08 pm #2153401
Richard
I added this to generate_before_header_content:
```
<div class="hide-on-mobile">
      <div class="site-logo">
            <img src="/wp-content/uploads/2020/02/200x40-vector-sparked-logo-for-flux-checkout-white-1.svg" alt="" />
      </div>
</div>
<div class="hide-on-desktop">
      <div class="site-logo">
            <img src="/wp-content/uploads/2022/03/Square-S-Sparked-Innovations-logo.svg" alt="" />
      </div>
</div>
```
The small logo is not showing in the “Prime” GP layout
https://watch.screencastify.com/v/auxbEceBa91n06FW15nn
March 13, 2022 at 6:09 pm #2153402

Richard

This is a followup to thread https://generatepress.com/forums/topic/just-sticky-menu-on-mobiles-rather-than-sticky-after-scroll/#post-131226

March 13, 2022 at 6:37 pm #2153412
Fernando
Customer Support
There are two reasons why the images aren’t rendering.

1. They don’t have a width and height. Try adding a width and height parameter to resolve this.

Example: <img src="/wp-content/uploads/2022/03/Square-S-Sparked-Innovations-logo.svg" alt="" width=“200px” />

The height will adjust automatically with this. Do this for both images you have.

2. For mobile, it seems that you have this custom code that hides all classes of site-logo screen sizes smaller than 680px:
```
@media screen and (max-width: 680px) {
  .site-logo {
   display:none;
  }

}
```
Kindly remove this and test again.

Hope this clarifies. 🙂
March 13, 2022 at 6:49 pm #2153417

Richard

OK. Did that but now we have different problems. Two logos appear and the square logo doesn’t show in mobile view

March 13, 2022 at 7:08 pm #2153425

Fernando
Customer Support

The other logo image seems to be coming from Appearance > Customize > Site Identity: https://share.getcloudapp.com/JruOv4Q2

This where you can normally set your Site Logo. Moreover, by going to Appearance > Customize > Layout > Header, and setting Mobile header to “On”, you can set a Mobile Logo through the customizer too: https://share.getcloudapp.com/OAu6OP16

Lastly, if you want to add the Mobile Logo through the Hook Element your adding, you can try removing the left margin/setting it to margin-left:0px to make the image appear. This can be found through Appearance > Customize > Additional CSS.

See: https://share.getcloudapp.com/BluoJ4w0

Hope this clarifies. 🙂

March 14, 2022 at 8:23 am #2154239

Richard

Both logos are displaying in tablet view
https://watch.screencastify.com/v/qJl91wd5K3hkCKqnr5Kx

March 14, 2022 at 8:36 am #2154255

Richard

Also, can’t seem to get the .textwidget to hide below 768px
https://watch.screencastify.com/v/weEOii0ey4Mj55MaxA1i

March 14, 2022 at 1:24 pm #2154540

Ying
Staff
Customer Support

Both logos are displaying in tablet view

Add hide-on-tabletclass to the logo that you don’t want it to show on tablet.

Also, can’t seem to get the .textwidget to hide below 768px

It’s hidden on your site and in your video as well, let me know if I miss anything.

March 14, 2022 at 2:15 pm #2154575
Richard
I took care of the .textwidget issue. Adding the code gave me a new issue:
https://watch.screencastify.com/v/UAG54E5f8OSArVRcAvvV
```
<div class="hide-on-mobile">
		<div class="site-logo">
			<a href="/"><img alt="Sparked Innovations rectangle logo" height="40px" src="/wp-content/uploads/2020/02/200x40-vector-sparked-logo-for-flux-checkout-white-1.svg" width="200px"></a>
		</div>
	</div>
	<div class="hide-on-desktop">
		<div class="site-logo">
			<a href="/"><img alt="Sparked Innovations square S logo" height="40px" src="/wp-content/uploads/2022/03/Square-S-Sparked-Innovations-logo.svg" width="40px"></a>
		</div>
	</div>
	<div class="hide-on-tablet">
		<div class="site-logo">
			<a href="/"><img alt="Sparked Innovations square S logo" height="40px" src="/wp-content/uploads/2022/03/Square-S-Sparked-Innovations-logo.svg" width="40px"></a>
		</div>
	</div>
```
March 14, 2022 at 3:05 pm #2154602
Ying
Staff
Customer Support
Eh…I mean to the either of the existing logo, not to create a new one, so something like this:
```
<div class="hide-on-mobile ">
		<div class="site-logo">
			<a href="/"><img alt="Sparked Innovations rectangle logo" height="40px" src="/wp-content/uploads/2020/02/200x40-vector-sparked-logo-for-flux-checkout-white-1.svg" width="200px"></a>
		</div>
	</div>
	<div class="hide-on-desktop hide-on-tablet">
		<div class="site-logo">
			<a href="/"><img alt="Sparked Innovations square S logo" height="40px" src="/wp-content/uploads/2022/03/Square-S-Sparked-Innovations-logo.svg" width="40px"></a>
		</div>
	</div>
```
March 16, 2022 at 5:44 pm #2157303

Richard

Thank you. I got that working now.

Separate issue… I’m trying to add elements to the generate_after_header_content and can’t seem to figure out how to keep the text in those blocks from wrapping to the next line, especially when there is soooo much room in the search bar. I know it’s got flex in there but I’m not familiar with that.

https://third-pavement.flywheelstaging.com/

March 16, 2022 at 6:00 pm #2157306

Ying
Staff
Customer Support

Can you open a new topic for non-related questions?

Thanks!
Author

Posts

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

[Resolved] Different logo for mobile

Popular Articles

[Resolved] Different logo for mobile

Popular Articles

Start building better websites today.