HomeОбразованиеRelated VideosMore From: Webflow

Styling a responsive navigation bar - Web design tutorial

100 ratings | 30863 views
Webflow's navbar element is very flexible when it comes to styling. In this video, we're going to focus on five areas that give us that control: 1. Size of the navbar 2. Positioning of the navbar 3. Nav link states 4. Navbar and nav link backgrounds 5. Nav link transitions ---------- Get started with Webflow: https://help.webflow.com/courses/getting-started http://webflow.com http://twitter.com/webflow http://facebook.com/webflow
Html code for embedding videos on your blog
Text Comments (25)
Anjunakitchen (2 months ago)
Webflow UI is really complex, some labels would definitely help newcomers. I think I'll stick to WordPress Elementor / Divi.
Anjunakitchen (2 months ago)
Can I make the nav menu not collapse on mobile?
pixelgeek (2 months ago)
Yes. In the navbar settings panel, you can set it to never collapse. Here is a screenshot: https://cl.ly/fd8e03a5792e Hope this helps :)
Jason Hebert (7 months ago)
webflow is such a god damn mess
Jason Hebert (6 months ago)
I'm coming from wordpress using Divi mainly. This seems lightyears behind the times. I feel like I"m using something build 10 years ago. Maybe i'm the only one, I was just expecting way more.
Jake Morrison (6 months ago)
It all boils down to what you're using it for. If you're comparing it to Wix, SquareSpace, etc. then it definitely comes out on top. But if you're able to properly code a responsive, interactive, and secure site from scratch, then that would typically make more sense as long as it doesn't take too much more time, relatively.
Jason Hebert (6 months ago)
Kinda getting it but I still think this is severely limiting. 100% backing up my no serious project should actually use this. So much easier working from scratch
Jake Morrison (6 months ago)
+Jason Hebert It takes about a week to become comfortable with. After then, it's a breeze.
Webflow (7 months ago)
Hi Jason, making a navbar transparent involves: 1. Selecting the navbar 2. Setting the background to transparent If you're still having trouble with this, please feel free to reach out to us at [email protected]
Rom DD (8 months ago)
ok but what if i want my logo at the center at the top and the nav bar underneath? why all the webflow tutorials present the same nav bar option? I am quite beginner in webflow but it seems so far not very customisable to me...
Rom DD (7 months ago)
thanks a lot!
Jason Hebert (7 months ago)
i think Rom DD is onto something... you're trying to make something to HELP with development.. But when it's this convoluted to do something that would normally take a couple lines of code it's extremely frustrating... especially with options like divi on wordpress.
Webflow (8 months ago)
Do you mean something like this: https://cl.ly/5291b1a4ada1 ? You can use flexbox to quickly flip the layout from a horizontal layout to a vertical layout. You can lean much more on how to use Webflow features and how to fully customize them on Webflow University (https://university.webflow.com/) Check it out! Hope this is helpful. If you have any other questions, please don't hesitate to reach out to us, and we'll be happy to help! If you're having any trouble implementing any design in Webflow, you can always post on the Webflow Community Forum (https://forum.webflow.com/) with as much information as possible (read-only link, screenshots and a description of the issue), and our amazing community and staff can help you there.
Emil Klingberg (10 months ago)
Changing the font color on nav bar text elements does not work they will always stay black, not matter the state
Webflow (10 months ago)
Hi Emil and Angelica. To change the font color of the Nav links, you'll need to select the Nav link itself and apply the styling directly to the nav link. All link elements do not inherit typography styling from their parents and to style them you need to select the element itself. Like this: https://cl.ly/0Y3Q021i2i0C If you are both selecting the nav link and applying the color and still cannot change it, can you please contact the support team so they can help you resolve your issue. Hope this is helpful. If you have any other questions, please don't hesitate to reach out to us, and we'll be happy to help! If you have trouble implementing any design in Webflow, you can always post on the Webflow Community Forum (https://forum.webflow.com/) with as much information as possible (read-only link, screenshots and a description of the issue), and our amazing community and staff can help you there.
Angélica Medeiros (10 months ago)
It happens with me too.. I spent 2 hours trying to change it but is doens't works.. The software Webflow is so much expensive for it!
Aurasaris Cotton (1 year ago)
Which software you are using??
Webflow (10 months ago)
What you see in the video is Webflow: a professional web design tool and hosting solution which lets us build dynamic, interactive, responsive websites visually without having to code. Check it out! www.webflow.com
Kingdom Songwriting (1 year ago)
I really love Webflow and am determined to learn it.
keisi ji (1 year ago)
hear hear to that, me too webflow is my dream.come true tool.
Kingdom Songwriting (1 year ago)
Webflow omg thats so cute! That song is gonna be stuck in my head all day now. Thanks! 😂😂😂
Webflow (1 year ago)
go for it! we're here to help you learn. also, remember these wise words: https://www.youtube.com/watch?v=6ox6eX2wG3Y
Kingdom Songwriting (1 year ago)
Ugh all this stuff is hard to remember. Im overwhelmed.

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.