Need a full-width horizontal navigation bar

HTML & CSS
1

I have the following code to create a horizontal navigation bar however it’s not filling up the full width of the browser like I want it to. What is wrong with my code? There are no anchor tags because the html is created dynamically with javascript and it has a click event to go to the sections. This is for an assignment so it has to be done that way.

 <header class="page__header">
    <nav class="navbar__menu">
	
      <!-- Navigation starts as empty UL that will be populated with JS -->
      <ul id="navbar__list"></ul>
	  
    </nav>
  </header>

 
#navbar__list {
list-style-type: none;
color: #FFF;
margin: 0 auto 0 auto;
padding: 0;
position: fixed;
top: 0;
width: 100%;
min-width: 100%;
overflow: auto;
}

#navbar__list li {
cursor: pointer;
background-color: #dddddd;
color: #000;
padding: 8px;
display:block;
width: 31%;
float:left;
border:1px solid #000;
text-align: center;
}
2

Try changing min-width: to 50%, or leave it 100% and make width: 50%

3

How is that going to make it take up the full width?

1 Like
4

@Gandalf well then leave min-width: to 100%

5

@makamo661 you have specified that a list item should be 31%. That is not the full width.

Edit: You’ve specified a width of 100% on your navbar list, so there is no point in adding main-width as well.

1 Like
6

@Gandalf I see that too. So that may be his problem.

7

I would be tempted to temporarily forget the JavaScript insertion and hardcode a couple of <li> elements. Once it is doing what you want it to do then remove the hard coded elements and add the JavaScript.

Also try

display: inline-block; 
background-color: Aqua;
width: 31%;
/* float: left: */
1 Like
8

Is the code you’ve posted given as the assignment?

Unless you want a general discussion about possible ways to distribute a nav bar horizontally:
– Please tell what you are allowed to change in e.g. the CSS you’ve posted.
– Please also give an example of what could populate the nav list.

2 Likes
9

Using floats is a fairly “old” way of positioning your menu items. It will require you to size them proportionally to the total width.
It would be easier to use something like display table or flex, as these can allocate space evenly per item, or divide the space available proportionally to the size of each item, without having to work any of that out yourself.

3 Likes
10

I changed the width of the list items from 31% to 32% and now it’s the full width.

2 Likes
11

Do you perhaps have 3 items that you want to make equal 100%?

You make no mention of this anywhere so it’s hard to second guess your use case.

It indeed you do want three menu items to add up exactly to 100% then your method is a bit of a fudge. 3 x 32% does not equal 100%.

33.3333% x 3 is closer but then you would need to use the border box model to account for padding and borders.

As others have said above this is not really the way it’s done these days anyway.

You should use flexbox instead of floats as it will do what you want more robustly. Assuming I’ve understood the requirements :slight_smile:

4 Likes
12

Yes, I have 3 tabs that I want to make full width. I don’t know what the border box model is. I tried box-sizing: border-box; but it didn’t change the design. How do I implement flex box?

13

This may help you in understanding how flex boxes work

I go to this website a lot, as well as w3schools :slight_smile:

And here is a little something on the border box model

https://css-tricks.com/box-sizing/ . Hope this helps.

14

Like this:

The 33% doesn’t have to be that accurate as long s its less than a third of the space. Flex will flex to fill any gaps automatically. It could be flex:1 0 0% and still look much the same unless you had menu items with lots more text and then they would be wider etc. They will always fit though.

1 Like
15

Thank you, ladans37 and PaulOB and thanks to all the rest of you that I didn’t name.

3 Likes
16

Course. You should look into those articles I linked you to. They’re helpful. I personally like the one from CSS-Tricks, and generally love that website, cause it explains things with pictures :slight_smile:

17

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.