Trouble with three equally sized column design

I’m looking to create a website based on this mockup:

However, right now the nav links are giving me a lot of trouble. I set up the header as a row of 3 equally sized columns, since you can’t actually size columns with exact dimensions(for example, making the middle column the exact width of the logo). I made the links hug the logo more closely by adding negative margins, but now since the columns overlap, you can’t click the links half of the time.

How can I cleanly set up the site how I want?

Also, the fact that the links are links and not just plain text has removed my ability to change their color and underlined status, which is really annoying. The typography settings have just become useless because they’re links. But that’s another problem entirely.


Here is my public share link: https://preview.webflow.com/preview/above-and-beyond?preview=d3317726474ecaee259ee4ebde817983

Instead of columns use Divs to make artificial columns.

Set a class to you link block and edit.

Hope this helps. :wink:

Place the links above everything else so they catch the hover.

To do this, select the link element, click on position:relative to be able to set a z:index. Enter a value like 10.

http://vincent.polenordstudio.fr/snap/zifli.jpg

http://vincent.polenordstudio.fr/snap/zifli.jpg

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.