Fixed position not working in header and navigation menu
Question
I am editing a Joomla template and I want to keep the menu and the header fixed when scrolling. The problem is when I set the position to fixed for both, the menu div moves up to the same position as the header div which is (0,0) and also the header div seems to have a different position than before as there is overlap between it and the slider underneath.
I am new to web development and I don't know why this is happening.
Screenshot 1 : Without setting the #yt_header and #yt_menuwrap to fixed positions.
Screenshot 2: #yt_menuwrap set to position fixed.
Screenshot 3: Both set to position fixed.
Screenshot 4 : #yt_menuwrap and #yt_header set to fixed with a z-index:-99999 for yt_header.Focus on the flag and the sky and compare them with the following screenshots.
#yt_menuwrap { background: #D3D3D3; margin: 0; position: fixed; z-index: 98; width: 100% } #yt_header { position: fixed; z-index: 100; padding: 0; background-color: #f9fafc; background-color: white; width:100%; left:0; top:0; }
<body id="bd" class="homepage home-layout1 res"> <div id="yt_wrapper" class="layout-wide"> <header id="yt_header" class="block"> <div class="container"> <div class="row"> <div id="search" class="col-md-12"> <form id="mod-finder-searchform" action="http://localhost:8888/home/index.php/en/2016-09-17-12-54-14" method="get" class="form-search"> <div class="finder"> <label for="mod-finder-searchword" class="element-invisible finder">Search</label> <input type="text" name="q" id="mod-finder-searchword" class="search-query input-medium" size="25" value="" placeholder="Search ..."> </div> </form> </div> <div id="yt_logo" class="col-md-5 hidden-sm hidden-xs"> <a class="logo" href="http://localhost:8888/home/" title="الجامعة التكنولوجيه"> <img data-placeholder="no" src="./UOT_files/uotlogo210new1.png" alt="الجامعة التكنولوجيه" style="width:61px;height:85px;"> </a> </div> <div id="title" class="col-md-2"> <!-- BEGIN: Custom advanced (www.pluginaria.com) --> <div class="namePART1"> <p id="uniNamePART1">UNIVERSITY OF</p> </div> <div class="namePART2"> <p id="uniNamePART2">TECHNOLOGY</p> </div> <!-- END: Custom advanced (www.pluginaria.com) --> </div> <div id="icons-top" class="col-md-4"> <ul class="menu "> <li class="item-1768"><a class="circle" href="http://localhost:8888/home/index.php/en/site-map">AR</a> </li> <li class="item-1770"><a class="circle fa-search" href="http://localhost:8888/home/index.php/en/2016-09-17-12-54-14"> </a> </li> <li class="item-1771"><a class="circle fa-graduation-cap" href="http://localhost:8888/home/index.php/en/2016-09-17-19-47-04"> </a> </li> </ul> </div> </div> </div> </header> <nav id="yt_menuwrap" class="block"> <div class="container"> <div class="row"> <div id="test" class="col-sm-12 hidden-sm hidden-xs"> <ul class="menu "> <li class="item-1763 active"><a href="http://localhost:8888/home/index.php/en/">STAFF</a> </li> <li class="item-1764"><a href="http://localhost:8888/home/index.php/en/faculty">FACULTY</a> </li> <li class="item-1765"><a href="http://localhost:8888/home/index.php/en/research">RESEARCH</a> </li> <li class="item-1766"><a href="http://localhost:8888/home/index.php/en/news">NEWS</a> </li> <li class="item-1767"><a href="http://localhost:8888/home/index.php/en/important-sites">IMPORTANT SITES</a> </li> </ul> </div> <div id="yt_mainmenu" class="col-md-12 co-sm-12 "> <ul id="meganavigator" class="clearfix navi "> <li class="active level1 first "> <a title="HOME" class="active level1 first item-link" href="http://localhost:8888/home/"><span class="menu-title">HOME</span></a> </li> <li class="level1 havechild "> <a title="UNIVERSITY" class="level1 havechild item-link" href="http://localhost:8888/home/en#"><span class="menu-title">UNIVERSITY</span></a> <!-- open mega-content div --> <div class="level2 menu mega-content" style="display: none;"> <div class="mega-content-inner clearfix"> <div class="mega-col first one"> <ul class="subnavi level2"> <li class="level2 first havechild "> <a title="About University" class="level2 first havechild item-link" href="http://localhost:8888/home/en#"><span class="menu-title">About University</span></a> <!-- open mega-content div --> <div class="level3 menu mega-content" style="display: none;"> <div class="mega-content-inner clearfix"> <div class="mega-col first one"> <ul class="subnavi level3"> <li class="level3 first "> <a title="Mission and objectives of the university" class="level3 first item-link" href="http://localhost:8888/home/index.php/en/2016-05-29-06-57-22/2016-05-29-08-15-31/mission-and-objectives-of-the-university"><span class="menu-title">Mission and objectives of the university</span></a> </li> <li class="level3 "> <a title="Members of the University Council" class="level3 item-link" href="http://localhost:8888/home/index.php/en/2016-05-29-06-57-22/2016-05-29-08-15-31/members-of-the-university-council"><span class="menu-title">Members of the University Council</span></a> </li> <li class="level3 "> <a title="Organizational Chart" class="level3 item-link" href="http://localhost:8888/home/index.php/en/2016-05-29-06-57-22/2016-05-29-08-15-31/organizational-chart"><span class="menu-title">Organizational Chart</span></a> </li> <li class="level3 "> <a title="Laws and regulations" class="level3 item-link" href="http://localhost:8888/home/index.php/en/2016-05-29-06-57-22/2016-05-29-08-15-31/laws-and-regulations"><span class="menu-title">Laws and regulations</span></a> </li> <li class="level3 "> <a title="Category university" class="level3 item-link" href="http://localhost:8888/home/index.php/en/2016-05-29-06-57-22/2016-05-29-08-15-31/category-university"><span class="menu-title">Category university</span></a> </li> <li class="level3 "> <a title="History of the university" class="level3 item-link" href="http://localhost:8888/home/index.php/en/2016-05-29-06-57-22/2016-05-29-08-15-31/history-of-the-university"><span class="menu-title">History of the university</span></a> </li> <li class="level3 "> <a title="University landmarks" class="level3 item-link" href="http://localhost:8888/home/index.php/en/2016-05-29-06-57-22/2016-05-29-08-15-31/university-landmarks"><span class="menu-title">University landmarks</span></a> </li> <li class="level3 last "> <a title="University logo" class="level3 last item-link" href="http://localhost:8888/home/index.php/en/2016-05-29-06-57-22/2016-05-29-08-15-31/university-logo"><span class="menu-title">University logo</span></a> </li> </ul> </div> </div> </div> </li>
2 answers
solution1
0 2016-09-19 16:53:17
Try this code:
#yt_menuwrap {
background: #D3D3D3;
margin: 0;
position: fixed;
z-index: 999;
width: 100%;
top: 0px;
}
solution2
0 2016-09-23 10:09:41
<script>
jQuery(document).ready(function(){
jQuery(window).scroll(function(){
if (jQuery(window).scrollTop() >= 300) {
jQuery('#yt_wrapper').addClass('fixed-header');
}
else {
jQuery('#yt_wrapper').removeClass('fixed-header');
}
});
});
</script>
<style>
.fixed-header { position: fixed; top:0; left:0; right: 0; width: 100%; background-color: #fff; z-index: 1010; margin: 0;
}
</style>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Sub navigation menu with a position:fixed
Fixed position not working for header
Dropdown menu not working properly in navigation bar when said navigation bar is set to position:fixed;
Menu bar with position fixed not working
position fixed not working on sticky menu
How to set a navigation header with fixed position at the top
make header menu a fixed position(theme tesseract)
Position of sliding navigation menu always below header
CSS Position Fixed Not Working - Sticky Navigation
Using position: fixed for navigation not working as expected
Related Tags