Styling the Header Nav
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

[00:00:00] Hi. Welcome back to this wiggling in the sky. We are made to style the component we built in the last guy the now component. So I'm going to start off by closing all files and just opening half an hour Dunja. Yes. OK. So we're looking at a component you're we're dealing with right now. And then our standard here. That's about it. So attached to our styling create a new file. I'm going to call it now digests or not just that CSSA let's change that to us. See it's us and let's just call here at work wall. Now this isn't a component so we'll just see us case let's say heteros or whatever we call it an extremely close up close to the end that are now and you're less envious when you open a file. It's downsides like that. Once you hit command save it will go. And then when you open a new file it doesn't overwrite like this Mind's Eye Tulsidas friend click on another file and overwrite it. So yeah that's probably why haven't we. I didn't really catch that. We have called ourselves names now and then back in our JAST file as we're doing with wingspans. Let's just reference for Span's. So what's the status. And then here we are pretty much the same styles not the same styles. So it's good to our design here and see when they want Sony psychomotor you don't have access to this need to clarify that every time. Just in case you forget. So Lindsay let's just start with the grey. [00:01:44][104.2]
[00:01:45] So with copy I'm going to go back in here 900 now and is you say get get requests it's not when they get rid of what we don't want. So we don't want them with the right. We want the color of 40 40 40. We don't want the font family because we know we are using globally. We want the rest. Now we probably don't even need to explain. I'll leave that for now. And then let's import outmanoeuvring or be nice us some to say it didn't work. I am not sure yet. Now let's check out our app here and see if we are getting those dials. So yeah we're getting those styles right. It's gone. It's kind of hard to see it's just not blue anymore so you get the point. We're getting the styles and that's all. So let's go ahead and rest dangerous it sounds so. We don't want that Bonum thing appearing because we're going to the border to get that effect. So pretty simple to get rid of it or not. Now if you would just want a reference. Don't think. I believe that's what it is. And basically the idea here is to get rid of that bottom that bottom line. Why is there so all we have to do is say text decoration color transparency taxed decoration color transfer and then I should get to the highway right. Maybe not text decoration color transparent. Should the inspector code here. I mean come on. And it's as it should. So I guess the link is just a tie. [00:03:44][118.7]
[00:03:44] So we could just reference a thing here and it would do the same thing. So let's get of it. Yes. You got. Those are gone now. But we want you we want to have a in there so you can say it's going to click on this and copy the style that should border to solid then the red color. So just remember that this is pretty simple and apply it to our spam actually. So I'm going to say border bottom to pixels solid and not red color. We keep using we might we should put it into any whatever. Very well. So let's just do that with Koppio 00. Let's head to me Nicias US and Reinke us just say let's just say your same color red is equal to that it's a common color and is equal to that. Now we can just reference the color red. I would say that to back and we're not. And we have that sweet. Now we only want it to appear on hover when it's selected. So let's just say here with this and just say and using since SC is as you would say. Now you just put it in here and it should appear on me. CNN out of paying me however I'm just going to say let's just give it a transition year let's see transition. All 20 seconds is and it should just transition into that great world we live now. Now let's let's get them in this century using flux long let's say on one hand I should say display flags and it's all going to be the extra actions going on around the bureaus. [00:05:54][129.7]
[00:05:54] We don't you change that will change justify contract to space around the. It's not going to end up not going to keep that because I'll tell you why. So you'll notice it says it's not about the way the far apart. Really a lot easier method of getting these CenturyLink he seemed design is just to say just the fat content center and then putting a margin in between. So change it the center will be perfect the center together. But there's still way too close what we can is out in the margin to between requests and news. It looks like it's 46 pixels. So I'm just going to say I'm on each one of these stands. We can just say marginal range and then 46 divided by 2 which is 23. So when you see 20 pixels but it will give the get the margin right. So we actually want to do is same margin because then it will be 23 or eight year and read here for inspected. You'll notice it's on the right of requests which is obviously which is why we don't want to say just say let's just say margin 0 23 pixels and see where that gets us. GREG HOY gets us exactly where we are now without the color red on these items when we hover around the actual item. So I'm going to copy this color here and then you can apply color and police selector. Now I'm going to get to the page and see if it works. Austin Orix Craig not liking the animation. We can fix some complaints. First let me get one point one second. Not only can look better now let's let's give it before. [00:07:41][107.0]
[00:07:42] Right so it's 1999. You can easily the word to pixels and solid transparent. No way we're going to have the border so that the transparency can't see it. So we and it doesn't meet the height. Now you might be wondering OK this looks exactly like what we had before we get the tax decoration on the tag. And that's because we need space. We need a lot of panic here. So it looks like it's 13 pixels. So let's just say on each stat padding volume of 13 pixels. We'll see if that gets us great looking zombie like our design are prettying close. Now all you need to do is make it so whenever we select on one of these it displays the selected link. So let's go ahead and do that in the next guy. Well it's good work colonel and commitment people think it's status get harder keep coming. Let's just say style the. See you next guy we will finish up the styles on this component. [00:07:42][0.0]
[459.7]