Fixed header MENU when scrolling

[Mauari]

Fixed header MENU when scrolling
Waiting Aproval...
see it working iscarlyboop.com/ or complementosparati.com

Open the page and scrool down.

[Mauari]

Fixed Navigation Bars: Pros and Cons

A user can easily waste hours digging through the perpetually increasing lines of content, links, thoughts, rants, ideas, and gossip. Thankfully, they don’t have to scroll all the way back up the page to message, chat, or produce content themselves. The fixed navigation bar prevents such a problem from ever manifesting.

This is particularly significant when dealing with copious amounts of content. Famous examples of this concept come in the form of everyone’s favorite social media platforms: Facebook and Twitter. Both sites feature news feeds with nigh infinite information loading up at the bottom of the screen.

dvantages in usability
The advantages to fixed navigation bars should be obvious. They, quite simply, make browsing a website far easier. Having a main menu of options at your immediate disposal is a major feather in the impatient user’s cap, especially if the website has an exhaustive amount of content contained within.

This is important for several reasons, but chief among them is speed. Quick and easy flow through a website is extremely important. With an ever-present guidepost fixed at the top or side of the screen, a site owner never need worry about his or her user flows being dammed up by confusion or immobility.

[Mauari]

This is taking too much, how to make a fixed menu when scrolling VERY EASY

edit the file: includes/templates/YOUR_TEMPLATE/templates/tpl_modules_categories_tabs.php

<!-- Under this line around line 31-->
<?php if (CATEGORIES_TABS_STATUS == '1' && sizeof($links_list) >= 1) { ?>

<!-- ADD this script -->

<!-- TRYING  ADD STATIC MENU -->
<script>
$(function() {
    var header = $(".stuck-nav");
    $(window).scroll(function() {    
        var scroll = $(window).scrollTop();
        if (scroll >= 170) {
            header.addClass("fixedbar");
        } else {
            header.removeClass("fixedbar");
        }
    });
});
</script>

<!-- AND ADD THIS DIV TAG just after the script -->

<div class="stuck-nav">

<!-- Just above this line -->
<div id="navCatTabsWrapper">


<!-- and close the div just before the end of file -->

</div>

<?php } ?>

<!-- you will have something like this -->

include(DIR_WS_MODULES . zen_get_module_directory(FILENAME_CATEGORIES_TABS));
?>
<?php if (CATEGORIES_TABS_STATUS == '1' && sizeof($links_list) >= 1) { ?>
<!-- TRYING  ADD STATIC MENU -->
<script>
$(function() {
    var header = $(".stuck-nav");
    $(window).scroll(function() {    
        var scroll = $(window).scrollTop();
        if (scroll >= 170) {
            header.addClass("fixedbar");
        } else {
            header.removeClass("fixedbar");
        }
    });
});
</script>
<div class="stuck-nav">
	<div id="navCatTabsWrapper">
		<div id="navCatTabs">
			<ul><?php for ($i=0, $n=sizeof($links_list); $i<$n; $i++) { ?>
			<li><?php echo $links_list[$i];?></li>
<?php } ?>
			</ul>
		</div>
	</div>
</div>
<?php } ?>
<!-- EOF -->

After edit tpl_modules_categories_tabs.php EDIT or CREAT includes/templates/YOUR_TEMPLATE/css
stylesheet_custon.css

ADD this:

/* stuck */
@media (min-width: 1025px){.stuck-nav > div{position: relative;}}
.fixedbarCSs{top: -250px;opacity: 0;-webkit-transition: all 500ms ease-out 0s;-moz-transition: all 500ms ease-out 0s;-ms-transition: all 500ms ease-out 0s;-o-transition: all 500ms ease-out 0s;transition: all 500ms ease-out 0s;}
.fixedbar{position: fixed !important;top: 0;left: 0;width: 100%;opacity: 1;z-index: 7111111;background-color: #fff;box-shadow: 0 1px 3px rgba(0, 0, 0, 1.12), 0 1px 2px rgba(0, 0, 0, 0.24);-webkit-transition: opacity 500ms ease-out 0s;-moz-transition: opacity 500ms ease-out 0s;-ms-transition: opacity 500ms ease-out 0s;-o-transition: opacity 500ms ease-out 0s;transition: opacity 500ms ease-out 0s;}
.fixedbar .cart{top: 6px;position: relative;}
.fixedbar .badge--cart{right: 0;top: -33px;}
.fixedbar .dropdown.text-right{margin-right: 10px;padding: 0 30px 10px 0;}
.fixedbar1{position: absolute!important;top: 0;left: 0;}
@media (min-width: 1025px){.fixedbar{min-height: 50px;}
.fixedbar .search, .fixedbar .account{display: none !important;}
.fixedbar .offset-top-5{margin-top: 0 !important;}
.fixedbar .cart{top: 4px;}
.fixedbar .cart .icon{margin-right: 3px;}
.fixedbar .badge--cart{right: 0;top: -23px;}
.fixedbar #mainMenu{padding-top: 4px;}
.fixedbar #mainMenu .navbar-nav > li > a .act-underline{padding-bottom: 7px;}
.fixedbar .dropdown.text-right{margin-right: 0px;}}
@media (max-width: 1024px){.fixedbar .account, .fixedbar .search{display: none !important;}
.fixedbar .offset-top-5{margin-top: 0 !important;}
.fixedbar .cart{right: 17px !important;margin-top: -26px !important;}
.fixedbar .cart .dropdown > a .icon{color: #fff !important;font-size: 2em !important;}
.fixedbar .badge--cart{width: 28px;height: 28px;line-height: 1.6em;top: -20px;right: -30px !important;}
.fixedbar .dropdown.text-right{padding-right: 25px;}
#header .fixedbar .container:first-child .row{padding-top: 0;}}
/* /stuck */

VOILÁ - THATS ALL - See it in complementosparati.com scroll dow the page to see the FIXED MENU

[Papanco]

great contribution: is it possible to make it compatible with ZCA Bootstrap Template?
(https://www.zen-cart.com/downloads.php?do=file&id=2191)
Thank you.

[Mauari]

great contribution: is it possible to make it compatible with ZCA Bootstrap Template?
(https://www.zen-cart.com/downloads.php?do=file&id=2191)
Thank you.

SURE
just open the page with the MENU put this script

<!-- TRYING  ADD STATIC MENU -->
<script>
$(function() {
    var header = $(".stuck-nav");
    $(window).scroll(function() {    
        var scroll = $(window).scrollTop();
        if (scroll >= 170) {
            header.addClass("fixedbar");
        } else {
            header.removeClass("fixedbar");
        }
    });
});
</script>
<div class="stuck-nav">

CLOSE THE </DIV> tag

Open you stylesheet CUSTON and add the CSS above.
I have it in ADMIN too and work fine