Search code examples
htmlcsshovernavbarcenter

HTML/CSS navbar not working

I am fairly new to HTML and CSS. I am working on a side project to help me practice. In the gif you can see a few problems with my navbar.

  1. The navbar does not fill up the whole screen.

    (I think this is because I have it set to "float: left" but when I set it to "float: center" the navbar is no longer inline but displayed as a list.)

  2. The text in the navbar isn't in the center of their respective bubbles. I have a hover effect, the image that pops up is in the center, but the text isn't.

    (I have it set to "text-align: center" but I think it has something to do with the "float: left".

I have attached my html and css files.

Website Bugs

Test.html 

<html>
<head>
    <title>Test</title>
    <link rel="stylesheet" type="text/css" href="test.css">
</head>

<body>
    <header id="main-header">
        <div class="container">
            <h1>Test</h1>
        </div>
    </header>

    <nav id="navbar">
        <!--<div class="container">-->
            <ul>
                <li class="home-icon"><a href="#">Home</a></li>
                <li class="rout-icon"><a href="#">Routines</a></li>
                <li class="nutr-icon"><a href="#">Nutrition</a>
                    <ul>
                        <li><a href="#">Meals</a></li>
                        <li><a href="#">Diet Plans</a></li>
                        <li><a href="#">Calorie Tracking</a></li>
                    </ul>
                </li>
                <li class="abou-icon"><a href="#">About</a></li>
                <li class="cont-icon"><a href="#">Contact</a></li>
            </ul>
        <!--</div>-->
    </nav>

    <footer id="main-footer">
        <p>Copyright &copy; 2017 Test</p>
    </footer>

</body>
</html>

Test.css

body {
    line-height: 1.6em;
    margin: 0;
    background-color: #fefefe;
    font-family: 'Saturday Sans ICG Bold', Arial, sans-serif;
}

.container {
    width: 80%;
    margin: auto;
    overflow: hidden;
}

@font-face {
    font-family: "Saturday Sans ICG Bold";
    src: url("Fonts/Saturday Sans ICG Bold.tff");
    src: url("Fonts/saturday_sans_icg_bold-webfont.woff");
}

#main-header {
    color: #000;
    margin-top: 20px;
    text-align: center;
    font-family: 'Saturday Sans ICG Bold', Arial, sans-serif;
    font-size: 20px;
    text-transform: uppercase;
}

#navbar a {
    color: #A9A9A9;
    text-decoration: none;
    padding-right: 60px;
}

#navbar ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

#navbar ul li {
    float: left;
    width: 200px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: aliceblue;
    border-top: 2px #f4f4f4 solid;
    border-bottom: 2px #f4f4f4 solid;
    border-radius: 15px;
    margin-bottom: 1px;
}

#navbar ul li a {
    display: block;
}

#navbar ul li ul li {
    display: none;
}

#navbar ul li:hover ul li {
    display: block;
}

#navbar ul li ul li:hover {
    opacity: .3;
}

/* Hover Picture */
#navbar li.home-icon:hover {
    background-image: url("Images/home_icon2.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#navbar li.home-icon > a:hover {
    opacity: 0;
}

#navbar li.rout-icon:hover {
    background-image: url("Images/dumbbell.jpg");
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center;
}

#navbar li.rout-icon > a:hover {
    opacity: 0;
}

#navbar li.nutr-icon:hover {
    background-image: url("Images/fruit.png");
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center;
}

#navbar li.nutr-icon > a:hover {
    opacity: 0;
}

#navbar li.abou-icon:hover {
    background-image: url("Images/about_icon.png");
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center;
}

#navbar li.abou-icon > a:hover {
    opacity: 0;
}

#navbar li.cont-icon:hover {
    background-image: url("Images/contact_icon.png");
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center;
}

#navbar li.cont-icon > a:hover {
    opacity: 0;
}

#main-footer {
    text-align: center;
    font-family: 'Saturday Sans ICG Bold', Arial, sans-serif;
    font-size: 10px;
    padding: 20px;
    margin-top: 250px;
}
Solution

    1. The navbar does not fill up the whole screen.

    This is because you've set a fixed width for you navbar list items width: 200px;.

    So to make it fill the screen width (assuming you'll always have five items), you could do something like this: (100% / 5 = 20%)

    #navbar ul li {
    width: 20%;
    /* The rest of your styles */
}

    Though this will also affect the Nutrition list items width as well, so you could add style for them specifically:

    #navbar .nutr-icon li {
    width: 100%;
}

    This will make the Nutrition list items as wide as the Nutrition item itself.


    1. The text in the navbar isn't in the center of their respective bubbles.

    This is because you've set a padding-right: 60px; on the a tags in the navbar, which cause them to be shifted from the center. so just comment that out (or delete it)

    #navbar a {
    color: #A9A9A9;
    text-decoration: none;
    /*padding-right: 60px;*/
}

    Here's a codepen of my changes.