Creating fixed position for non scrolling is messing up div location on page

Question

Hello I am having a problem that when I make my top area non scroll able the area almost completely disappears.

html for header



    
                        
                
                    English
                    
                
                
                    
                                                        
                                العربية
                            
                                                        
                                Azerbaijani
                            
                                                        
                                Català
                            
                                                        
                                中文
                            
                                                        
                                Hrvatski
                            
                                                        
                                Čeština
                            
                                                        
                                Dansk
                            
                                                        
                                Nederlands
                            
                                                        
                                English
                            
                                                        
                                Estonian
                            
                                                        
                                Persian
                            
                                                        
                                Français
                            
                                                        
                                Deutsch
                            
                                                        
                                עברית
                            
                                                        
                                Magyar
                            
                                                        
                                Italiano
                            
                                                        
                                Macedonian
                            
                                                        
                                Norwegian
                            
                                                        
                                Português
                            
                                                        
                                Português
                            
                                                        
                                Română
                            
                                                        
                                Русский
                            
                                                        
                                Español
                            
                                                        
                                Svenska
                            
                                                        
                                Türkçe
                            
                                                        
                                Українська
                            
                                                
                
            
                                    
                Login
            
                                
                    Register
                
                            
                
                    View Cart

html for navbar Toggle navigation

        
        

            

                    
    
                    Home
                            
        

    
                    Store
                             
                
                        
                
                                            Browse All
                                        
            
                        
                
                                            -----
                                        
            
                        
                
                                            Select Your Perfect Plan
                                        
            
                        
                
                                            SSL Certificates
                                        
            
                        
                
                                            -----
                                        
            
                        
                
                                            Register a New Domain
                                        
            
                        
                
                                            Transfer Domains to Us
                                        
            
                    
        

    
                    Announcements
                            
        

    
                    Knowledgebase
                            
        

    
                    Network Status
                            
        

    
                    Contact Us
                            
        

            

            

                    
    
                    Account
                             
                
                        
                
                                            Login
                                        
            
                        
                
                                            Register
                                        
            
                        
                
                                            -----
                                        
            
                        
                
                                            Forgot Password?

Code:

section#header {
margin: 0;
padding: 10px 0;
background-color: #fff;
border-radius: 5px 5px 0 0;
}

Now when I add the position fixed and try to make it uncontrollable the white part and logo area no longer scroll however before i even begin to scroll my menu bar is pushed up and out of position.

Picture now fixed you can see the menu bar has changed its location. Here is the new code

section#header {
position: fixed;
width: 100%;
margin: 0;
padding: 10px 0;
background-color: #fff;
border-radius: 5px 5px 0 0;
}

This is not a z-index issue as this is happening before i even scroll down the page.

I have been stuck for days I would really be grateful for any help.

UPDATE: Okay I have the fixed menu where it is supposed to be but now I am having this issue with every page and I have no idea why every div and section has moved up as if the header doesnt exist. mind you this is before any scrolling begin. Please feel free to visit webking.com and navigate to any page to see what I mean.

As you can see a huge mess

Thanks

user_8319683 · Answer

So here is my last corrections :

1st step fix the header :

section#header {
    position: fixed; /* We want the header fixed at top */
    z-index: 1000; /* We want header over other elements when scrolling */
    /* margin: -5px 0 0 0; */ /* Remove seems not needed */
    height: 60px; /* We should fix the header height */
    width: 100%; /* header will take all available width */
    background-color: #fff;
    border-radius: 5px 5px 0 0;
}

2nd step fix the menu :

section#main-menu {
        /* margin: 60px auto 0; */ /* It is not the place for the marin-top. We don't need this */
        position: fixed; /* We want the menu fixed at top */
        width: 100%;
        background-color: #006687;
        top: 60px; /* We want menu above the header so we shift the menu of the height of the header */
        z-index: 1000; /* We want menu over other elements when scrolling */
}

3rd step correction of the content :

Here, I don't understand why (maybe need more investigations) but the browser take the margin-top of the section#main-body and apply it to the header. It's is not what we want and it's here we will fix it with this :

We will add and apply the margin-top trick to the .container inside the section#main-body like this :

section#main-body .container {
    margin-top: 100px; /* header : 60 + menu : 40 */
}

Creating fixed position for non scrolling is messing up div location on page

1 Answers