Joel Pritchard
Reputation: 27
Creating fixed position for non scrolling is messing up div location on page
Hello I am having a problem that when I make my top area non scroll able the area almost completely disappears.
html for header
<section id="header">
<div class="container">
<ul class="top-nav">
<li>
<a href="#" class="choose-language" data-toggle="popover" id="languageChooser" data-original-title="" title="">
English
<b class="caret"></b>
</a>
<div id="languageChooserContent" class="hidden">
<ul>
<li>
<a href="/index.php?language=arabic">العربية</a>
</li>
<li>
<a href="/index.php?language=azerbaijani">Azerbaijani</a>
</li>
<li>
<a href="/index.php?language=catalan">Català</a>
</li>
<li>
<a href="/index.php?language=chinese">中文</a>
</li>
<li>
<a href="/index.php?language=croatian">Hrvatski</a>
</li>
<li>
<a href="/index.php?language=czech">Čeština</a>
</li>
<li>
<a href="/index.php?language=danish">Dansk</a>
</li>
<li>
<a href="/index.php?language=dutch">Nederlands</a>
</li>
<li>
<a href="/index.php?language=english">English</a>
</li>
<li>
<a href="/index.php?language=estonian">Estonian</a>
</li>
<li>
<a href="/index.php?language=farsi">Persian</a>
</li>
<li>
<a href="/index.php?language=french">Français</a>
</li>
<li>
<a href="/index.php?language=german">Deutsch</a>
</li>
<li>
<a href="/index.php?language=hebrew">עברית</a>
</li>
<li>
<a href="/index.php?language=hungarian">Magyar</a>
</li>
<li>
<a href="/index.php?language=italian">Italiano</a>
</li>
<li>
<a href="/index.php?language=macedonian">Macedonian</a>
</li>
<li>
<a href="/index.php?language=norwegian">Norwegian</a>
</li>
<li>
<a href="/index.php?language=portuguese-br">Português</a>
</li>
<li>
<a href="/index.php?language=portuguese-pt">Português</a>
</li>
<li>
<a href="/index.php?language=romanian">Română</a>
</li>
<li>
<a href="/index.php?language=russian">Русский</a>
</li>
<li>
<a href="/index.php?language=spanish">Español</a>
</li>
<li>
<a href="/index.php?language=swedish">Svenska</a>
</li>
<li>
<a href="/index.php?language=turkish">Türkçe</a>
</li>
<li>
<a href="/index.php?language=ukranian">Українська</a>
</li>
</ul>
</div>
</li>
<li>
<a href="/clientarea.php">Login</a>
</li>
<li>
<a href="/register.php">Register</a>
</li>
<li class="primary-action">
<a href="/cart.php?a=view" class="btn">
View Cart
</a>
</li>
</ul>
<a href="/index.php" class="logo"><img src="/assets/img/logo.png" alt="WebKing Web Services"></a>
</div>
</section>
html for navbar Toggle navigation
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="primary-nav">
<ul class="nav navbar-nav">
<li menuitemname="Home" class="" id="Primary_Navbar-Home">
<a href="/index.php">
Home
</a>
</li>
<li menuitemname="Store" class="dropdown" id="Primary_Navbar-Store">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Store
<b class="caret"></b> </a>
<ul class="dropdown-menu">
<li menuitemname="Browse Products Services" id="Primary_Navbar-Store-Browse_Products_Services">
<a href="/cart.php">
Browse All
</a>
</li>
<li menuitemname="Shop Divider 1" class="nav-divider" id="Primary_Navbar-Store-Shop_Divider_1">
<a href="">
-----
</a>
</li>
<li menuitemname="Select Your Perfect Plan" id="Primary_Navbar-Store-Select_Your_Perfect_Plan">
<a href="/cart.php?gid=1">
Select Your Perfect Plan
</a>
</li>
<li menuitemname="symantec" id="Primary_Navbar-Store-symantec">
<a href="/index.php?rp=/store/ssl-certificates">
SSL Certificates
</a>
</li>
<li menuitemname="Shop Divider 2" class="nav-divider" id="Primary_Navbar-Store-Shop_Divider_2">
<a href="">
-----
</a>
</li>
<li menuitemname="Register a New Domain" id="Primary_Navbar-Store-Register_a_New_Domain">
<a href="/cart.php?a=add&domain=register">
Register a New Domain
</a>
</li>
<li menuitemname="Transfer a Domain to Us" id="Primary_Navbar-Store-Transfer_a_Domain_to_Us">
<a href="/cart.php?a=add&domain=transfer">
Transfer Domains to Us
</a>
</li>
</ul>
</li>
<li menuitemname="Announcements" class="" id="Primary_Navbar-Announcements">
<a href="/index.php?rp=/announcements">
Announcements
</a>
</li>
<li menuitemname="Knowledgebase" class="" id="Primary_Navbar-Knowledgebase">
<a href="/index.php?rp=/knowledgebase">
Knowledgebase
</a>
</li>
<li menuitemname="Network Status" class="" id="Primary_Navbar-Network_Status">
<a href="/serverstatus.php">
Network Status
</a>
</li>
<li menuitemname="Contact Us" class="" id="Primary_Navbar-Contact_Us">
<a href="/contact.php">
Contact Us
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li menuitemname="Account" class="dropdown" id="Secondary_Navbar-Account">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Account
<b class="caret"></b> </a>
<ul class="dropdown-menu">
<li menuitemname="Login" id="Secondary_Navbar-Account-Login">
<a href="/clientarea.php">
Login
</a>
</li>
<li menuitemname="Register" id="Secondary_Navbar-Account-Register">
<a href="/register.php">
Register
</a>
</li>
<li menuitemname="Divider" class="nav-divider" id="Secondary_Navbar-Account-Divider">
<a href="">
-----
</a>
</li>
<li menuitemname="Forgot Password?" id="Secondary_Navbar-Account-Forgot_Password?">
<a href="/pwreset.php">
Forgot Password?
</a>
</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
</section>
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.
Thanks
Upvotes: 3
Views: 88
Answers (1)
Shim-Sao
Reputation: 2126
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 */
}
Upvotes: 0
Related Questions
- Fixed position inside scrolling div
- CSS position element "fixed" inside scrolling container
- Position Fixed Element is Shifting on Scroll
- Fixed div according to page scroll
- fixed position on scrolling page
- Position fixed but still scrollable?
- Fixed Positioning With Scrolling
- Position fixed acting like position relative ( scrolling with page )
- Div is going behind fixed div when scrolling
- div with fixed position cannot be scroled