I need help finishing my Nav Bar

I need help finishing my Nav Bar
0.0 0

#1

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”


#2

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.


#3

I’ve just scribbled some code on this fiddle. If I’ve understood the issue that you’re having correctly , this should help


#4

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.


#5

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


#6

I only want to apply the radius to the top corners, not all four


#7

I fixed it:

.active {
background-color: #4CAF50;
border: 1px solid;
border-top-left-radius: 2em;
}

Thanks!


#8

yea , i just made this fiddle resolving it also