Different logo for mobile

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

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. :)

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

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. :)

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

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

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.

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>

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>

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/

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

Thanks!