So what I'm doing is to, I'm hitting all of the TDF files, hitting on style, waiting a little bit, making sure those were installed and there we are. So let me check if this is correct. I will select my text units and I'll change that to Comi.
Now Now I can install that. Let's just refresh the page just in case. Okay. Comi. Okay, there we are. I just have to refresh the page. So I am selecting all those text units and I am turning them into the text units that I require, but make sure that everything is properly aligned. Okay. Maybe this will be a little bit towards the bottom. Okay, I believe that that will do.
That That is, that's fine for me and very more than enough for this example. So what I'm going to do next is to go to Webflow, I'm going to hit the left upper corner. I'm going to go to site settings, but then I'm going to hit fonts. And in fonts, what I'm going to do is to search for this Comi. I don't want that, hope to pronounce that, I'm sorry. Comi font and then I'm going to install that. Com, com, com, come here. Where are you? Com, com, com, com, comi. All right, I'm going to hit 100, 200, 300 regular and all those styles.
I'm going to do that just now. What I'm going to do is to check this emo-link-block-12 element which is having currently two ems of margin of internal padding at the top and bottom and I'm going to increment that to three. It is not necessary to do that on those elements as well but I will do that. I mean this is a drop-down and this emo-link-block-1 is not a drop-down but I'm going to have those incremented as well just in case in the future I want to use a drop-down I'm having my margins kept in check by this element. Okay there's one more thing to do on desktop and that will be to work on the drop-down styles and of course the the actual elements that I'm having here. So let's back to workflow let's hit on this element. I'm having this element that is tagged as emo-drop-down-1. Let's go to the right of my interface to the gear icon and let's then go to drop-down settings and menu hit show. Just click show here and it will show you the drop-down menu. So what I'm going to do next is to select elements here and start tweaking things for this to be closer to what I'm having on my design. Back to workflow. Okay first thing I'm going to make this all to be a little bit towards the upper section
of of the website. Let me just get this upper. I will select emo-wrap-7 and I am going to create a negative margin here at the top of -2em. Maybe I can adjust this a little bit. Yeah so next I'm going to hit again in emo-wrap-7 and I'm going to get rid of this border for the element. So let me hit option or alt in your keyboard and hit here. Perfect. No more margins. Next I'm going to create a box shadow. So I'm hidden here in a fax box shadow and let me just record what the tiles are for this element. So I'm hitting the element on figment and hitting effects. I'm having 18 pixels of blur. I'm having this color at 11% of transparency. So let's get back here and use the same tiles or similar those tiles. I can use 18 pixels. I can use this color and I'm having that color to be transparent at the 11%. There we are. Okay I'm having also a little bit of radius on my block. Maybe 0.8em will do. Also I'm having this a little bit towards the left so that features can align with text. But first I'm going to add a little bit more of internal padding. So again I'm in emo-rep-7. I'm going to add a little bit of internal padding here and then I'm going to add some negative merging at the left. Let's add -2.5 ems. There we are. Perfect. Now I have 1.2 ems for the size of the text in here at the top. And on my figment I created those elements inside the drop-down the same size that are those at the top of the navigation bar. So I'm going to repeat that pattern here. I'm having 1.2 em then I'm going to have 1.2 ems here. So let me select those elements inside the drop-down which will be tagged with emo-link-3. And let's change this from 1.3 em to 1.2 ems. Also I'm going to repeat this color here which will be this color code. I'm going to copy that color code and paste it here just like this. Oh perfect. And finally I won't use columns so I'm going to select emo-rep-8
here here and get rid of one column. Let's go to layout, edit grid, then let's delete one column and that's it. Let me just copy the text for links here. So I'm having the first one to be podcast to blog article. Second one will be YouTube to blog article. The third one will be blog article to social post. And I don't have the fourth so you can just delete that one like that. And finally finally finally I am going to... maybe I'm going to have a little bit more of which for this blog like 24 will do perhaps. Okay it is kind of close visually. I believe
that that will do. Let me now hit this little icon of an eye for toggling to the preview and yeah it works. So that is my navigation... oh no I'm sorry there's one thing missing on the desktop navigation bar. That would be the color for this button over here. I used black here so I'm going to do the same on my website.
Let's Let's go to this area and change the typo color for black. Let me actually save that as a swatch. Black as well in here. There we are perfect. So now we are ready with a navigation bar... oh sorry... with a navigation bar for our desktop interface for our company website. And we did that with the help of our thick map resource and our free web flow resource from the QuoRepo project. Now let's go with the mobile version of this navigation bar and try to stick with me because navigation bars are pretty difficult of very often... they're very often difficult units to produce. It ain't easy and if you get to do this then you will be for sure going to pass through all of the other elements on the website. The footer section, the testimonials, all the rest of the sections of the websites are much much easier to develop to create than the navigation bar. There isn't being the mobile section and the more the mobile experience and that is what we will be working on next. Let's go for it.
Notice Notice at the top of the web flow interface there are those breakpoints which will be allowing us to go through different screen sizes and we have worked so far on the base breakpoint which will be desktop. What I'm going to do next is to jump towards tablets. So make sure that on tablets we're having everything checked. Okay so I'm going to go to the landscape mobile interface. I'm going to hit on the button over here and I'm going to change this color or the light. This is override for the color background so that it can take the blue that we defined on the desktop base interface. So everything that we use here on the base will be used or will be cascaded towards a smaller screen. So let's do the same here and I believe that we are done for the navigation itself or the the top part of the navigation itself. Now what we are yet to do is to work on whatever is opened here when we hit this on our tablets or mobile devices. I'll show you briefly what's going on there. Let me hit this toggle preview and hit this icon. There we are. This is what happens. This navigation opens. So what we have to do is to work on details for this navigation. Alright and then that's tricky because what we're going to do is to open an element that is hidden by default. Let me show you how. Okay perfect. So here is how it is done. Let's go to the left left left side area for workflow interface. Let's open navigation bar if it is not open already. Let's let's focus on those two elements. By the way if you're not having this as I'm having it right now hit this button over here that says collapse all. Okay and you then you can open this one and you will have those two. EMO - section is everything that we have here. It is visually it is available by default. Now
this this MYB section is the menu that is hidden by default and then that will be only open after you hit this icon over there. That is what we are going to be working with and for that we have to temporarily make it visible. So we'll select this MYB - section - menu -1 element on our left and then we're going to override and focus on the layout with a properties and change this from display known to display block. Let's hit that and boom over navigation bar appeared. What we are going to do next is to adjust a few things here and there. So let's start with the logo. We are double clicking that logo and
selecting selecting our logo. That will be the first one and by the way if you're having a different version of the logo just for mobile that is your opportunity to use that specific version of the logo. In this case I'm just having one logo. Now let's focus on the features section. If we open features which we can do by selecting this emo-dropdown-1 element and going to the gear icon on the right and then hitting show. If we did that we'll notice that we are having a very similar style for menu than that we have on desktop. But I'm not sure about this will be the best. So I'm selecting the emo-wrap-7 element hitting on the styles tab and then I'm going to go back with few styles that I previously created. So for instance I'm going to delete the negative margin that I once created on desktop. I'm hitting here and writing 0. Same for the left margin. I'm changing that to 0 and I believe that will do. So next I'm going to get rid of the radius. Next I'm going to get rid from the shadow in here on this hide button. And finally I'm going to create a left border with one pixel which and black will be okay I think. Finally, finally, finally I'm going to just add the margins, the up and down margins for this.
Section and finally finally finally I'm going to get rid from the fourth link and I'm going to replace those three I'm sorry those three with my actual links which I can copy and paste from my Figma. Let's go for the second one. Oh then let's go for the third one and there we are. All right. Okay I already have the tablet's breakpoint. Let's jump to the mobile landscape breakpoint and do the same just to be sure about we are having everything on control. Let's go to the mobile landscape breakpoint. Let's focus our attention on the left and hit the section m y b dash section dash menu dash one and again let's just hit option and hit on display or alt depending on your keyboard and hit on display and it will open immediately. So let's open features just to make sure that we're having all as it will should have should be and I believe we are okay we're pretty okay with this. Let's now jump towards the last breakpoint which will be the mobile board rate breakpoint again. Let's go for this section m y b dash section dash menu dash one. Let's go to the styles app. Let's go to display and hit or press on your keyboard option or alt depending on your keyboard and as you press that down hit on your string the display option and it will be appearing like this. Okay so here there's something that I might want to fix or there are a couple of things that I'm not all that convinced. So the first one will be distance between those two buttons. I want this demo button to be not that distant from the signing sign in button so I am going to reduce this row from two ems to one em. Next I'm going to hit login and I'm going to delete the margin that I once created on desktop the the right margin here 1.5 em I'm sorry 1.5 ems I'm going to change that to zero and I am actually adding a little bit of margin at the bottom. I'm going to add one bottom em of margin over there and finally finally finally I believe that I will make this I believe this will be better to be larger. So I'm not sure about this let me just experiment with this very quickly. I won't wait much. Okay what if I use two? Okay yeah this is all the sign this is all pretty subjective perhaps but I think I like more if this mobile navigation will be will have those links larger so what I will do is to hit this container emo-wrap-4 and I will change the size of the text under the typography group of properties from 1.3 to 2 so that I can have something like this.
Although Although I am not that sure about this to be visually better and then it proves it was. I'm having my reservations here let me check how it looks like here looks the same actually.
Yeah Yeah I believe I will do that okay so let's go back to how to do that. Focus your attention on the left on the emo-wrap-4 element next change the typography size over here from 1.3 to 2. Next open the features again so select this emo-dropdown-1 element go to the gear icon show it and this purely static aesthetic and reduce the internal top and bottom margins like this perfect next jump to the older one and check if it is okay for you I believe that that will be fine for me next jump to the last stage and it is way too small so I'm going to hit again on emo-wrap-4 I'm going to change this from 2vw here to maybe 3 yeah I believe maybe 3 will do maybe 3.5 I'm going to change this to 3.5 vw notice how all the text grew up that happens because we are using for all the sizes across the elements on the website we are using ems and they are anchored to a root element so this approach allows us to change to massively change things like this instead of entering inside every single viv and text and adjusting things on pixels that is an advantage now I changed this but I also want to make this over here larger so I'm going to have also 3.5 vw for the root element for those three elements so I'm selecting emo-wrap-5
and and going to change from 2.5 to 3.5 like this oh no that's way too big perhaps I'm not all that convinced about this looks like very big to me I don't know maybe three but if I use three here I make sure about using three in the proof of development as well so yeah I will use three on both because I want consistency as well I don't want things to be weirdly shaped and I'm not sure sure about this to be to have been the best option but anyways I believe that will do and that is technically correct let me just do some quality assurance okay and there's another thing for me to change here if you notice that when I when I go and hover over some elements it's changing to green so I'm going to change that so let's hit this link element over here and I believe I will
yeah yeah okay let's hit on the emo-link-12 element hit hover and just hit on option and light this green and I believe that will do because I don't want any green element to appear here I want to use that yeah that will be okay so perfect I believe that is enough for QA or that is not QA for now and what I will do is to revert this m y b-section-menu-1 element to be not visible so I select it I go to the layout group of properties on my right and I change from display block to display known that's it I have done that on my tablet breakpoints so that these tiles for the other two breakpoints are automatically updated that's it so let's do final final final QA
and and there we are so this will be my interface on my navigation bar for desktop for large desktop screen sizes this is almost 200 2000 pixels wide this is when I hover over and activate or trigger the drop-down menu then I'm having this one over here for smaller screens but still desktop then I'm jumping to my tablet's interface I believe I will just I will slightly adjust the size of this logo I want this logo to be just a little bigger for it to be the same size of those buttons are so I'll change I will change from 13 ems to probably 14 ems maybe 15
and and yeah 15.5 will do perfect so yes this this will be my interface for tablets I'm going to hit on toggle preview and open the menu I look that I'm happy with menu I like it it works
it it is technically correct same for the landscape on mobile interfaces I like that it works it is technically correct and same here does it get gets the job done it is technically correct okay this will be for an iPhone 11 so that will be the size for that phone and I believe that
text text are readable clickable and that it works so yes that's it so this is what we have done on this video we have created a navigation bar for our SaaS company website we have done that using this this resources from the Core Apple project specifically the thing great ify
um um we have copied all that we have created over figmat with the structure for our websites with few pages in there and we have worked on the design of figmat for over navigation bar then we have updated that on the webflow counterpart of the theme great ify and we have managed to
tweak tweak these tiles and to update the the the content for that navigation bar we have done QA and it just works now so what we're going to do next is to continue to work on the rest of the pages of this website using the elements from the record repo project both from figmat and from webflow and also perhaps on some of the videos on this series for this contently website we probably will take profit on using the Canva resources from the Core Apple project that belongs or that are related to this theme great ify because maybe some marketers and some CEOs
will will benefit in having very quickly made landing pages for advertising or for other purposes and so yes that's that's something that we will probably be toting on the following videos thank you for watching and please leave any comment if i'm missing something if you need help with
some some stuff that i just worked with very quickly i will be happy to help thank you.
.jpg)
