Change image size inside div without changing size of div

Hey all,

I am quite new to Webflow. I want to change the size of my logo, but in the template I am using the whole nav bar gets bigger as I change the size of my logo. How can I make the logo independent? Please see below the place where it lives and the div hierarchy.

Thanks a lot!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hey Dylan, thanks for your reply.

I will try with what you just mentioned

1 Like

Hi Rex, no worries. That is your website url you have sent through. When sharing a link you will need to copy it from here.

1 Like

Thanks now I know how to do this :slight_smile:

I couldn’t figure out your previous solution by the way.

Change the following divs to these settings. See screenshots. This will fix your issue. This is how I would go about building my navbar for what you need. You can then mess around with the padding/margin or viewport size (VH/VW) for how big or small you want your navbar and where you would like to position the elements inside the nav. :+1:

Hey @rex9311, How are you?

Here’s your solution -

  1. Don’t put the brand link block inside a div. Bring it out and you can delete the div.

From this

Screenshot 2022-11-05 at 12.23.25 PM

To this
Screenshot 2022-11-05 at 12.24.18 PM

  1. Change Navbar Wrapper display settings to flex-box
    With the following settings -

Screenshot 2022-11-05 at 12.25.22 PM

  1. Add a class to the logo image, something like “Logo” & increase the width to 150px keeping height auto. Like this -

Screenshot 2022-11-05 at 12.27.02 PM

  1. If this increases the header height, you can decrease the Navbar padding a little bit like this -
    Screenshot 2022-11-05 at 12.27.56 PM

hope this helps my friend!