HTML - Horizotnal Menu Navigation

HTML-CSS
1

I am trying to practise building my own ecommerce web page but already having problems with the header. I would like the menu navigation to stretch across the entire page. When i just have the header title, it is fine but as soon as i add the horizontal menu, it doesn’t stretch across the page. My HTML and CSS is very basic so far. What have i done wrong or what do i need to add to make the header stretch across 100%?

09
091440×900 84.4 KB

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="Jaysee.css">
    <title>JAYSEE</title>
</head>
<body>
    <header class="header">
    <h1 class="header_title">JAYSEE</h1>
    <hr>
     <div class="nav">
        <ul>
            <li class="shop"><a href="#">SHOP</a></li>
            <li class="about"><a href="#">ABOUT</a></li>
            <li class="contact"><a href="#">CONTACT</a></li>
        </ul>
    </div>
        <hr>
    </header>
</body>
</html>

.header {
    position: fixed;
}

.header_title {
    text-align: center;
}

li {
    display: inline;
}

#nav {
    width: 100%;
}
2

Try giving your li

display: inline-block or block.

3

Thanks, just tried this but no luck!

4

try making more than one

5

or you can use javascript

6

Since you have made your .header as fixed, you should apply width of 100% to it, so that it’ll stretch the screen and there is no id as #nav in your html, check that, also remove the inline which you have given to li

1 Like
7

First issue is you used the wrong css selector for your nav class. Go ahead and change that. 2nd, take a look at where your nav tag is in relation to the header tag in your html.

Take a look at this link illustrating your container sizes. When in doubt, add some obvious style elements like background color, or borders to trouble shoot your problems. Always helps me!

Hopefully I explained this well and it helps. let me know if you have more questions about it!

Edit: I would honestly recommend using CSS like i did as you build the styling, regardless of if you have any issues. Using background-color and such as you go helps illustrate the changes you are making, container sizes, and so on. It helps build a grasp of how CSS affects you website.

1 Like