From the course: The Freelance Stack: Real Project with Next.js and Strapi
Unlock this course with a free trial
Join today to access over 25,200 courses taught by industry experts.
Styling: Adjust header colour per path - Next.js Tutorial
From the course: The Freelance Stack: Real Project with Next.js and Strapi
Styling: Adjust header colour per path
Only thing left for us to do, to finish our second page here, or the styling of our second page for now, is to make our header adapt by styles. We already wrote the JSX for it, we now just have to adjust the styling for it as well. So if we go into the header SCSS, what we can do here is, we first of all have to say, well we have a light version, in there the color will always be white. if we go back, that already fixes everything except the logo. And one thing that I forgot from before is that we also wanted to give this some z-index, so that now we can actually, when we hover, see that it's clickable. Now the last thing for us to do is to fix that logo, to make it go white. And I won't go into the filter page, you should have it saved up now. And we have done done this as well in the footer, so you can also just go if you want to into your footer and copy the filter right from here, because it's the same thing. We're just going to say that the logo within our light version of the…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
(Locked)
Header JSX structure17m 24s
-
(Locked)
Styling: Header8m 43s
-
(Locked)
Footer JSX structure10m 18s
-
(Locked)
Styling: Footer8m 11s
-
(Locked)
Hero section JSX structure16m 27s
-
(Locked)
Styling: Hero section15m 26s
-
(Locked)
InfoBlocks JSX structure9m 26s
-
(Locked)
Styling: InfoBlocks5m 53s
-
(Locked)
Experience page: Reuse created hero section and infoblocks8m 47s
-
(Locked)
Styling: Adjust header colour per path1m 26s
-
(Locked)
-
-
-
-
-
-