I’m struggling with changing the fonts for my Nav bar and changing the radius to the top corners. I’ve tried adding a new font to the script but I’m not sure what to add it to. In the lessons we added that style to “h2”
The best way to figure things out is to know how to use your browser’s Developer tools.
Once you’e in the tool, highlight the component/html element you’re interested, right-click then Inspect, and on the right pane window you’ll see all the CSS rules that are in effect for that html element. Then from there, you can turn on/off the styles or add your own CSS rules and see how it affects/changes the element. Once you’re happy with the changes, cut and paste the resulting CSS style and paste it in your own .css file.
I’ve just scribbled some code on this fiddle. If I’ve understood the issue that you’re having correctly , this should help
Thanks but that’s not what I was talking about. I’ve already created my nav bar. I just want to change the fonts and add rounded corners to the top so that each page looks like a tab when it’s selected.
You can create a class “active” for example , which would contain something like this:
//this is just a rough example
.active{
background-color:silver;
border:1px solid silver;
border-radius:20%;
}
And use event listeners and some JS to add this class to the clicked element
Or you could just go with bootstrap and use nav-tabs , you can read more about it here
I only want to apply the radius to the top corners, not all four
I fixed it:
.active {
background-color: #4CAF50;
border: 1px solid;
border-top-left-radius: 2em;
}
Thanks!