How can I make a line 5px wide (height)

Mockups 3
1

I want to create an underline for the main nav.

I can change the thickness of an H Rule line so i created an image.

The issue is when I try to make the 5px line longer (width) it reverts to a minimum of 10px (height).

Any ideas/suggestions?

1 Like
2

Hi @GJankowski!

If you type the width value in the property window does it still revert the height to 10px?

Here’s a quick workaround for creating a 5px line:

  1. Create two “H.Rule” lines.
  2. Place them directly on top of each other.
  3. Group both the lines.
  4. Crop the grouped lines in half.

Once you have cropped the image of the grouped lines, you should be able to change the width to whatever you’d like without affecting the height. You can also duplicate this cropped group as many times as you want for more 5px lines. :smile:

Let me know if I explained that well and/or if you have any other questions!

3

Much easier that the way I did it with h.rule lines.

Thanks

1 Like
4

For anyone still needing to do this, it’s easier to group the lines before placing them adjacent to each other. Trying to select adjacent 1px lines is tricky! So:

  1. create a line
  2. copy and paste until you have the thickness you want e.g. 5 x 1px lines
  3. select and group them
  4. editing the group, line them up adjacent to each other - X position of the lines will be 0, 1, 2, 3, 4…
  5. exit the group
    You can now move and size the whole group as required.
1 Like
5

For me, it’s much easier to:

  1. Overlap two rectangles
  2. Fill the top rectangle with white / background color
  3. Group these rectangles

image

4 Likes