Streaming live at 10am (PST)

HELP! My Portfolio is EXTREMELY unresponsive

Help! I am trying to make my portfolio responsive (first time using Webflow) and I can’t figure it out. My nav bar is especially bad. I would appreciate anyone’s help I’ve been super stuck :frowning:

https://preview.webflow.com/preview/laurens-ux-portfolio-622988?utm_medium=preview_link&utm_source=designer&utm_content=laurens-ux-portfolio-622988&preview=3e5b76821d6d4913fea1670c10fe2a1e&workflow=preview

@Lauren_Petronie - Have you taken advantage of the many courses available in the University? Webflow is complicated because CSS and HTML is not trivial. There is a learning curve.

I have but even the videos are so complex and there are so many of them. I wish I could hire someone from Webflow to help with my little quirks I cannot figure out :confused:

Welcome to web design. The forums are pretty helpful but we need details. You just need to be very specific and include some example screenshots to show the issues you have (best to keep it one per post topic).

Hey Lauren-

As far as your navbar goes, I would just redo the layout. Instead of the flex layout for your nav element, I would use grid. It will be a better fit for the layout you’re going for…

So start with a base div block with a set height of something like 60px, but set the display to grid. Don’t forget to make it fixed positioning with a high z-index so it is always over your other elements. Next make sure that the relative positioning is set to top, so that the navbar now takes the full width of the screen. Make your grid have three columns, one row. You will use the left cell for the first 2 navlinks, the middle cell for your logo/link, and the third cell for your last 2 navlinks.

Set the size of the first cell to 1FR, the second second to 60px (or however large you want your logo to be), and the third to 1FR. Now add a div block to the first cell and name it something like “navlink wrapper”. Next add a link block to the middle cell. Finally add a div to the right cell with the same class as the first, e.g. “navlink wrapper”. You’re now ready to add your links and logo.

For the “navlink wrapper” class, set display to flex with a horizontal direction and alignment and justification set to “center”. Then add your links with the class “navlinks”. For these links, set a margin on the links something like 4.5 vw. You can then add all your cool text styling like the neat hover animation!

For your logo/link in the center, set the display of the link block to flex and align and justify center.
Then merely add the image of you logo to your link block. Do not do this using background image, add an actual image element. That way if you want to change the size of the logo, just change the width and height properties of the image element.

This should make your navbar responsive. It will get cramped on mobile breakpoints, but you can alleviate this by making the text smaller and lessening the margin on the links. However, I would recommend you use a hamburger menu once you get to mobile breakpoints. It will make it much easier for your users to read and be able to click the links they want. I know it seems sort of standard, but there are ways to customize it to look more unique.

Responsiveness can be a bit tricky, especially if you’re like me and change your design as you go along :laughing:. Hope this helps you out! :grinning:

1 Like

THANK YOU SO SO MUCH!!! I followed your directions to a ‘T’. The only thing that is still looking weird is as soon as I change breakpoints to tablet it looks like the design breaks. Did I miss a step?

There are plenty of us on here that you can hire :wink: just send me a DM if you’d like to discuss.

Sounds like you’re making progress though which is great! I checked out your read-only link and think you may find value in this video about preventing unwanted horizontal scrolling:

Keegan

1 Like

Actually, I fixed it by just adjusting the VW margins. The only thing I am struggling with now is finding out how I can create a hamburger menu on tablet/mobile view. :confused:

@Lauren_Petronie the default Webflow Navbar component has a hamburger menu already built in. Best option for starting out.

If you want to go crazy, refer to the legend @PixelGeek How to Webflow: Full screen menu - Tutorial (2019) - YouTube

@Lauren_Petronie can you send the live link of your website?

@Lauren_Petronie if you want to use Webflow’s default hamburger menu, you must use the basic navbar element.

So the first step is to go to your mobile breakpoint and set your current navbar element to display: none. Now it should be hidden. Next go to the add elements tab in the designer and under components there is a navbar. Add this to your project, and set the same setting such as fixed positioning to the top. Now you can add your logo. Sometimes the logo doesn’t want to go where you want to go, so my favorite way of doing this is setting the link block to flex and set align and justify to center. Next I give the link block a height of 60px and a width of 90px. Also remove the padding on the link block. This gives is plenty of room on the sides and ensure your logo is vertically centered. For your hamburger menu, it comes with a default three links. To add a link, click on the hamburger menu, go to the settings panel, and at the very bottom of the tab “navbar settings”, click “add link”. Also, I would suggest that you give your navbar a background color, even if is not opaque. The hamburger menu can be hard to see otherwise.

When you want to style the dropdown menu, click on your navbar and go under settings there will be a slide you can click that says “show” and “hide”. Now you should be able to see your menu, and can customize the color, width, etc.

When I was getting started in Webflow, navbars were the thing I most struggled with :rofl:. Hope this helps!

I forgot to mention, you will also need to set the navbar with the hamburger menu to display: none on your larger breakpoints.