Changing Logo in Relation to Browser Size

I have searched and could not find the answer, so now I’m Knocking…

I am creating a site (My Site) where my nav logo incorporates the full logo signature ( Graphic and Text ). Because I fixed the nav to the top of the browser when I preview on the Cell phone preview the length of the logo drops the menu icon down making the nabe bar taller.

This only happens in the Portrait width of the Cell Phone Preview.

I would like to find a way to change the logo from the full Logo Signature to just the logo graphic when it is pulled up on the smallest screen so that the Menu Icon is in line with the logo and stops the navigation bar from doubling in height.

Any known solutions, tutorials, or previous threads illustrating this that I could not find?

Cheers,
Jeff

Hi Jeff,

Can you send the share link?

Steve

STEVE HOLMES
Creative Director

ENERGI.DESIGN

MOTION_WEB_UXUI

Please standby Steve, This is the first time I have been asked this and didn’t know I could do it. :slight_smile: Let me see if I can figure out how to do that.

Cheers
Jeff

I think this is what you asked for… jeffswork.webflow.io

My apologies… apparently I did not publish what I have done so far.

Hi Jeff,

That allows me to see the site, but not check the structure. If you go to the Project Settings and click Share at the top, you can generate a share-only link.

Steve

STEVE HOLMES
Creative Director

ENERGI.DESIGN

MOTION_WEB_UXUI

Ah ha…

Here you go. https://preview.webflow.com/preview/jeffswork?preview=1a0ae84ddcb8f5d5bde8eb70f1d4744e

Thanks for sending, now I took a look and can assist :slight_smile:

So, seeing as your logo image is free-floating in a link block, its size will always affect what’s happening around it, especially when you get to mobile portrait sizing, as you have found.

It makes things a lot easier (and editable/customisable) if you use the logo as a background image instead. Here’s what I would suggest:

Delete the image from the link block, select the link block and in the class set the width to 300 and height to 80, which matches your image size from before.

Then scroll down to Background and add your logo image as a background image, fix to left side, set to Cover mode (for sizing), no tile, and fixed off.

So now you have the same as you started with, but as a background image with more flexibility.

On Mobile Portrait mode now, you can simply change the width of the link block to 90px, which crops out the rest of the image, and allows your mobile nav to move back up to where it was.

Hope this helps! :slight_smile:

Steve

STEVE HOLMES
Creative Director

ENERGI.DESIGN

MOTION_WEB_UXUI

1 Like

This helps a lot Steve, Thank you for the detail in your instruction. I had found another way to work it too but a lot more clunky and with more steps. I am all for saving steps.

I’m all about minimal steps, less to contend with later :wink:

Steve

STEVE HOLMES
Creative Director

ENERGI.DESIGN

MOTION_WEB_UXUI

Will others be able to alter my site with the share link I posted? Or is it just a sandbox thing? Do I need to go in and turn it off?

No one can edit the site with that link, when it’s opened it states that no changes can be saved. So people can edit and tweak (like I did, to find the issue) but cannot save any of those changes.

But if you feel safer, by all means disable the link. Safe either way :slight_smile:

Steve

STEVE HOLMES
Creative Director

ENERGI.DESIGN

MOTION_WEB_UXUI

1 Like