#header ul#nav {
    float: left; margin: 0 0 0 24px; background: url(images/navbar.png) top; padding: 2px 0 2px 0 0; width: 1000px;


<div id="container">
<div id="header">

<ul id="topcorner">
<li><a href="#">Career</a> | <a href="#">Mail</a></li>
<div id="search"><?php include('search.php'); ?></div>
<ul id="nav">
<li><?php wp_list_pages('sort_column=menu_order&title_li='); ?></li>

how to create a full length width navigation bar ?

I have already tried

background: url(images/navbar.png) top repeat-x;

but it still does not work. It still follow the width size. I would like a navigation bar that full length adjusting to the screen size.

Edited by davy_yg: n/a

5 Years
Discussion Span
Last Post by davy_yg

set the image background on the div containing the menu, then the image will create a bar the width of that div. Putting it as background to the <ul> means it stops where the <ul> stops.


Well, if I define the width then it will grow as long as the width size. My point is - is it possible to create nav bar as long as the harizontal screen size no what the size is. Therefore, I probably don't need to define the width size. How ?

If I erase the ul and li I wonder why the navigation turn to vertical instead of harizontal? and also the navigation turn as long as the menu not the harizontal screen size.

Edited by davy_yg: n/a

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.