Menu bar 100% width

Question

I've got a menu bar here: --- Now when you resize the window (so there appears a horizontal scrollbar) and you scroll to the right, the background is vanished! How can I solve this problem?

white-space:nowrap; is preventing the background from being displayed properly when resized. — Jrod, Jun 14 '11 at 14:25

score 2 · Accepted Answer · edited May 23 '17 at 12:12

2

@kevin; may be you have to define min-width for your menu bar.

for example

.menu{
min-width:1200px;
width:1300px;
}

for more : Min width in window resizing

http://friendlybit.com/css/min-width-and-max-width-template/

edited May 23 '17 at 12:12

Community

1
1

answered Jun 14 '11 at 14:24

sandeep

85,904
23
131
151

score 2 · Answer 2 · answered Jun 14 '11 at 14:30

You should wrap everything in a new div, and apply min-width: 960px to that.

<div id="container" style="min-width:960px">
    <div id="ovoMenu"> 
        ..
    </div> 
    <div id="ovoSubmenu"> 
        ..
    </div>
</div>

You could just set the min-width on body, but I'm not sure what else will be going on that page.

Menu bar 100% width

2 Answers2