How do I fix up my navigation bar?

Question

0.00/5 (No votes)

See more:

I want to fix up my navigation bar but do not know how to do it.

Improvement I want to make are:

1. How do I change the font colour to white (I have tried font: #ffffff as you can see in the coding)?
2. How do I make the link spaced out?
3. How do I move the links to the very right (float does not seem to be working as you can see in the coding)?
4. How do I make the font bigger for the navigation bar (font: 20px does not seem to be working as you can see in the coding)?
5. How do I make the title "Grass World Sport News" bigger?

What I have tried:

Here is the html:

HTML

<DOCTYPE html>
    <head>
        <title> GWS News</title>
        <link rel="stylesheet" type="text/css" href="stylesheet.css"/>    
    </head>
    
    <body>
        <header>
            <div class="container">
                <h1> Grass World Sport News</h1>
                <ul class="nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="file:///Users/rarichenjoseph/Desktop/GWS%202/Website.html#">World Cup</a></li>
                    <li><a href="#">Sports</a></li>
                    <li><a href="#">Schedule</a></li>
                    <li><a href="#">About</a></li>
                </ul>
            </div>
            <div class="banner">
                <img class="banner-image" src=img/banner1.jpeg>
            </div>
        </header>
    </body>

Here is the css:

CSS

html,body{
    background-color: #5f5f5f;
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

div.container{
    max-width: 1200px;
    margin: 0;
    padding: 0 30px;
}

header{
    background-color: #000000;
    float: left;
    width: 100%;
}

header h1{
    color: #ffffff;
    text-transform: uppercase;
    float: left;
}

.nav {
    float: right;
    list-style-type: none;
    list-style: none;
    padding: 10px 100px;
}

.nav li {
    display: inline-block;
}

.nav ul li a{
    color: #ffffff;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 15px;
    font-family: "Roboto", sans-serif;
}

.nav li a:hover{
    color: #D3D3D3;
    border: 1px solid white;
}

.nav li.active a{
    border: 1px solid white;
}

.banner-image {
    width: 100%;
    
}

Posted 6-Jul-18 14:31pm

Jack the Christian

Updated 8-Jul-18 4:20am

User 7429338

v2

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

User 7429338 · Accepted Answer · 2018-07-08T04:20:00

Quote:
1. How do I change the font colour to white (I have tried font: #ffffff as you can see in the coding)?

You have the right idea, but ".nav ul li a" means the ul inside .nav, while .nav is the ul. So remove the ul.

Quote:
2. How do I make the link spaced out?

You could add margins around ".nav li a", e.g. "margin:0px 10px".

Quote:
3. How do I move the links to the very right (float does not seem to be working as you can see in the coding)?

It is floating to the right, but you have set a padding of "10p 100px". The 100px might be a typo? Note that you have set a max page width of 1200, which affects this, but I will assume that you intended that.

Quote:
4. How do I make the font bigger for the navigation bar (font: 20px does not seem to be working as you can see in the coding)?

This has the same root cause as the first question. With that solved, this is automatically fixed too.

Quote:
5. How do I make the title "Grass World Sport News" bigger?

Set a font-size on "header h1", e.g. "font-size: 50px".

Putting everything together would be like this: jsfiddle[^].