Hello,
I would like to know how I can place the Logo in between the NavBar Links as shown in this Picture. Also how do I make the moving orange bar below the Nav Link?
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Hello!
Here are some steps to get the look you want:
- Create a div block that will act as your nav wrapper and set it’s width to 100%
- Place another div block inside of that and make the width long enough to contain your links and logo and make the height whatever your desired height it. Set the margins to auto to center it and then give it a horizontal flex property.
- Add link blocks or text links into the smaller div until you have the amount you want on the left side.
- Add an image block to the smaller div.
- Add the rest of the links to the smaller div. You should now have links on both sides of the image.
- Make the first link link to the page you are on to give it a Current state.
- Change the bottom border property of the link to give it that bar underneath.
Here is a quick one I made that you can look at to get a better understanding of how everything is laid out. If you have any questions feel free to ask!
-Ryan
Hey Ryan! Thanks so much! I do have a few things that I need fixing. This is my first ever Webflow Design Project. So I would really appreciate it if you could help me whenever you can.
-
I placed all the text blocks as you mentioned. Worked perfectly. But I have some trouble spacing out the blocks and making the logo in the dead center. Here is my project. https://preview.webflow.com/preview/vanguard-gaming?utm_source=vanguard-gaming&preview=3f0ccc3474a412168164f17df1a9892e
-
I did not understand point no 6. Can you help me understand better?
-
How do I add the Border around the SHOP text. I tried to make the changes with the Border Property but was not able to make it work.
Looking forward to hear from you 
So as far as making the logo dead center it doesn’t look off to me. Maybe change the width of the smaller div to 80%? But for number 6 I’ll add some pictures for what I mean. I see you have an interaction on each element to get the hover color but there is a way easier way of doing it.
So select the Home block and change the link of that block to link to the Home Page:
Now when you select that element again you’ll see it has a Current state:
While this link is in its current state change the text color and border bottom colors to that yellow:
Now when you assign each link to their specific page it will have these properties when the user is on that page. So when a user goes to the about page the About text will be yellow and will have the bar underneath. That simple!
for the hover effect, just click on a non-current state link like about and then in the states menu select Hover:
While hover is selected just change the text color to that yellow. Then change the selector to none and all of your links will have that yellow hover property. You can then delete the interactions.
Hey Ryan! It worked perfectly. I even added some transition effect to the SHOP button.
But now I have 2 more things to finish.
- I want the bottom Yellow Bar to move as I hover the other text links in the Navigation Bar.
- I added the screen shot of my prototype from Invision for Reference to see if the spacing is correct. It looks like its not. Can you help me out with that?
To have to yellow bar move underneath the other links when you hover do the sames steps as before with setting the state to hover and adding the the bottom border. Exactly the same as setting the state to hover and change the text color but now you are also changing the border. One thing you can do is wrap all the links on the left in a div and then wrap all the links on the right in a div. Set both divs to display flex and make the max width something like 40% or 45% of the div they are inside of.
If I do as you mentioned, wont it be like a simple fade in and fade out animation? I need need too see the Yellow Bar ACTUALLY move from side to side. Is that possible?
Oh you want the bar to actually slide left to right?
Yes. I want it to slide
Also, this actually worked better for me. I put the links in divs and I set the div widths to 50% and display flex and it looks good.
In that case I suggest making another div underneath all of the links. This div will act as a sort of track. Then make a small div inside is that will act as the bar. Then set a hover animation on each element that moves that bar on the x-axis until it’s under that link
EDIT: You will also have to increase and decrease the size of the bar based on the length of text of the link
Looks like that will take it. I shall do that in the end. For now, I just need help to place the Logo in the Centre and have the right spacing. I added 2 div blocks ans set it to 50%. But still, I have some trouble.
Change the width of the div on the right from 80% to 50% and then remove the margins on the SHOP button.
It looks AMAZING! Thanks so much Will get back to you with more questions later
