Hello!
I am new at webflow. I’ve watched tutorials on this issue and still cannot fix the issue.
I’m trying to left align the text in the navbar. Any feedback would be so helpful!
Here is the link:
Thank you so much!
Hello @Whitney_Martin,
I don’t understand your question, so you want to left align the text inside the button? or just left align the navbar, if so, isn’t already there? Do you want something like this?
Yes! Thank you!
I know it must be simple but I’m not sure how you left aligned text in box?
Thank you!
Welcome to Webflow, @Whitney_Martin!
There are several ways to left-align items.
I often use Flexbox for this kind of task. Basically, you put your items (text elements) in a box (called a Div), and set the Div’s display mode to Flex.
This will give you the ability to align the children (the things inside the box) however you wish!
Perhaps you’ve already watched them, but the Webflow Flexbox tutorials are excellent, and to get familiar with the controls, I would recommend playing the Webflow Flexbox game.
There are other methods, but I believe this is the most applicable to your situation.
Hopefully this helps!
@ilikewebdesign, thank you so much for your feedback on this elementary but crucial lesson to learn webflow. I have watched the tutorials and still have questions about divs and containers. I will try the webflow flexbox game. Thank you!
As for my question, I put children inside div box and when I press left align through various methods, nothing happens! Is there something else I need to do? Thanks so much again.
Hello @Whitney_Martin,
Yes so you had your text inside your buttons and you aligned them the the left but they were still in the middle right, just put the margin and padding to 0. I hope this helps.
Good point by @Pablo_Cortes.
It’s hard to tell from your read-only project, but it appears that you have used a Webflow Navigation element and set it to Position:Absolute over to the left-hand side of the screen…
I would assume that you want to have your site navigation stick to the left side of the screen as the rest of the page scrolls; correct me if I’m wrong.
Here’s a site that I built that uses a from-scratch navigation bar (not the built-in one from Weblow). Maybe by looking at the way it’s constructed will be helpful… here’s a read-only link:
If you can, you might try reaching out to @PixelGeek and see if he knows of more resources that address your question.
Cheers!
So to be more clear @Whitney_Martin, select the links and put the padding and margin to zero like in the pictures below.
I hope this helps.
I think @Pablo_Cortes is on the right track.
I would recommend that you give each of your buttons the same CSS class (you have used “Nav Link” for the first…
This will allow you to edit the margin/padding, styling, and Flex children layout settings all at once (instead of changing each one manually).
1 Like
Thank you so much @Pablo_Cortes and @ilikewebdesign! Overall, do you think building navigation system from scratch then making a symbol instead of using webflow navigation might be easier? I wanted to use webflow navigation so that I could have a responsive navigation system.
I’m using all of today to make a simple site and understand how webflow works a little better.
Thanks again!
Using the built-in navigation bar is definitely easier… and is perfect for many simple navigation bars.
Sometimes I find that it can be a bit fustrating to work with, so I wound up making one myself. There’s a lot of Flexbox involved.
I would probably start by using the built-in Nav element and reference Webflow Navbar tutorials.
You’re welcome @Whitney_Martin. I don’t know what you mean by webflow navigation, do you mean a template? if that is the case, my advice would be to yes use a free template, modify it however you want then make symbols and see how everything works. Then afterwards when you feel more comfortable build a site from scratch. Also, check out webflow university and the webflow youtube channel, there is a ton of useful information there. In my experience watching the videos before building was very helpful to avoid frustrations. Have fun.
Thank you this has been so helpful!
One more question, what is the best resource to learn how to place div boxes and containers with precision in placement with other elements? I hope I am asking the right question for what I am thinking.
I am trying align ‘HOME’ with ‘MADELINE IS GETTING MARRIED’ and using padding and margins, I’m only estimating the correct placement. I am not sure which tutorial will cover placing things with precision and alignment with other elements.
I know that I can use webflow templates, but I’d really like to learn webflow from scratch as I’d like to build other custom sites. And in general, I’d like to know all that I can about software. The tutorials make it look so easy!
Thanks again!
Don’t worry just visit this url https://discourse.webflow.com/t/how-to-create-a-header-nav-bar-with-a-logo-aligned-left-and-login-link-aligned-right/814/2 and read carlos comment… which explain very nice.
1 Like