Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Can you make two div tags fixed to the top of the page

Featured Replies

Hello all,

 

I'm a server side develolper with some experience in client side development. I can make my nav bar stick to the top of the page without any problem using the position fixed style.

 

However when I insert a header tag above the nav tag the nav tag stays fixed but it drops down the page by the height of the 'header' tag. I've tried fixing both tags to the top of the page, (positioned underneath each other), but whenever I test my code the nav bar stays fixed but th header tag does not. To make things worse the 'nav' tag drops down the page leaving a gap the same size as the height of the 'header' tag.

 

I'll give you an example:

 

 

 
     <body>
          <div id='header'>Header information goes here</div>

 

            <div id='wrapper'>
  
                       <div class='navbar'></div>
 
 
                       rest of body here........

                       .......................
 
           </div>
 
</body>
 

 

 

As you can see the 'header' tag is divided from the 'nav' tag by the 'wrapper' tag. Does any one know how I can fix both 'header' and 'nav' tags to the top of the screen underneath each other so that when the user scrolls down the page both tags remain fixed to the top directly underneath each other whilst being divided by the 'wrapper' tag?

 

Thanks in advance.

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.