Navbar: Getting started with Bubble (Lesson 1.10)

now one of my favorite elements to design the navigation bar and you will be interacting with navigation bars every day of the week and all of the software that you use now there is a lot to a navigation bar for instance we have a logged out view with the login buttons or the sign up buttons then we have this the logged in view such as we might see a little Avatar icon that we can click to reveal a drop down so we will continue to build this navigation bar through the duration of the course in this particular lesson we're going to do three things we're going to create the Navar reusable element then we're going to set up the structure of that navigation bar into three parts or three columns and then we're going to drop the elements inside those particular columns such as The Branding on the left the links in the middle and the buttons on the right let's dive in here is a logged out view okay the user is not signed in so therefore they see the login and sign up but this is at a desktop width of course this design won't work very well on mobile so if we go down to mobile you can see that we now have an icon here where we can reveal the navigation in a more mobile formatted design so let's go ahead and create a new reusable element I'm going to call this navbar and we're going to create we're going to bring up the property editor first thing we're going to do is set this to a column layout we're going to match the page width which is 1,400 and we're going to set the height to 80 both on the Min height a and the max height we're going to set Left Right padding of 32 and 32 over on the parents tab what I'd like to do is just have a bottom border now we don't currently have a border color of which I would like to set up now