Creating my own simple custom nav bar

Design help General
1

I have been trying to create a rounded link block on each sides of my nav bar, but I am having such difficulties trying to keep the image and the link block together, it seems impossible to move them to the right side of the container. I have tried making them relative but they just won’t go the other side. Please let me know if there’s an easy way to go about doing this.

Thank you!
Ivan

https://preview.webflow.com/preview/mentworking-international?preview=32d6dc153aa9c908a1dbbeeb34714cd4

2

Welcome to the Webflow forums Ivan!

Could you illustrate or explain a bit more what it is exactly that you want?

Thanks!

3

Thanks Dharma!

I would like to have 2 icons on each side of my logo, given that I have placed my logo on the center of the nav bar. So ideally I would like to see (Our Story) (Blog) (Logo) (FAQ) (Contact Us)

I am having difficulties moving two of them to the right side, they are all stuck on the left now. When I move them, they either go down to the hero section or squeezed the logo out of the container.

Thank you!

4

You could use rows for this, i made a video tutorial how to place them how you want them:
http://quick.as/33rqsoxvo

Hope this helps! :wink:

1 Like
5

Wow Dharma!

Thank you SO MUCH! that step by step guide is the best!!

Thanks again,
Ivan

1 Like
6

Here is similar method - except with DIVs…

https://preview.webflow.com/preview/navbar-ecbb68?preview=404da8749a2822281bf091578385f796

7

Revolution,

I tried using DIVs but the tricky part is getting the link block inside the image.

8

try the opposite way… put the image in the link block.

Do it inside the navigator. That way you can control the precise location.

9

@revolution How do you wrap the DIVs inside a navigator?

10

@IvanT - Sorry. I’m not sure I understand the question.

I’m sure you know… but I’ll state the obvious for others who may not:

An image is not a container element - therefore it cannot enclose a link block… or anything in fact.

A link block on the other hand - is a container element.

Webflow simply places whatever you want - text / image / etc inside the <a href and more before the closing </a>.

Using the Navigator… you can drag the image onto the link block… then drop it.

See video
http://quick.as/2keoTp2L1

11

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