Home/ Questions/Q 9132383
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T08:18:10+00:00

I have a top div that is 50px in height and the width has

  • 0

I have a top div that is 50px in height and the width has to be the width of the entire browser window.
I’m setting the `width: 100%; but the problem is that when I zoom in the other content that is placed inside will overlap onto other.
I know that width:100%; will always be only as much as the screen in currently zoomed and that is why the content overlaps.

The position of this div is fixed.
I tried to set up the width with jQuery and it works, but then when zooming out the top div will not keep max available screen width.

(document).ready(function(){
    var widthT = $(window).width();
    $('#top_status').css("width", widthT);
});

The jQuery above is fine on zooming in, but not zoom out since the width had already been set and not changing.

I’m trying to acquire something that works somehow as the facebook top blue bar. That one stays in place very well regardless of zoom.

thx

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you post a jsFiddle we could help with specific examples, but you should be able to take care of these issues with Media Queries. They’ll let you have control over break points when resizing the window and make sure it looks good no matter what resolution the site is being viewed.

    Here are some resources for media queries in navigation:

    A Responsive Design Approach for Navigation

    Progressive And Responsive Navigation

    Convert a Menu to a Dropdown for Small Screens

    Create A Pure CSS Responsive Menu

    Responsive drop down menu with CSS media queries & jQuery

    Even if you don’t want to change the structure or turn it into a dropdown, you can use the same media queries to adjust the menu elements to make them fit anywhere.

    • 0