Results 1 to 5 of 5
  1. #1
    Join Date
    May 2011
    Posts
    67
    Plugin Contributions
    5

    Default Fixed header MENU when scrolling

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

    Open the page and scrool down.

  2. #2
    Join Date
    May 2011
    Posts
    67
    Plugin Contributions
    5

    Default Re: Fixed header MENU when scrolling

    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.

  3. #3
    Join Date
    May 2011
    Posts
    67
    Plugin Contributions
    5

    Default Re: Fixed header MENU when scrolling

    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 -->

    Code:
    <!-- 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 -->

    Code:
    <div class="stuck-nav">
    <!-- Just above this line -->
    <div id="navCatTabsWrapper">


    <!-- and close the div just before the end of file -->
    Code:
    </div>
    <?php } ?>

    <!-- you will have something like this -->
    Code:
    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:
    Code:
    /* 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

  4. #4
    Join Date
    Jun 2018
    Posts
    1
    Plugin Contributions
    0

    Default Re: Fixed header MENU when scrolling

    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.

  5. #5
    Join Date
    May 2011
    Posts
    67
    Plugin Contributions
    5

    Default Re: Fixed header MENU when scrolling

    Quote Originally Posted by Papanco View Post
    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

    Code:
    <!-- 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

 

 

Similar Threads

  1. v155 Can I Stop The Header Scrolling? - 1.5.4 - Zenn Template
    By CSGODeimos in forum Templates, Stylesheets, Page Layout
    Replies: 23
    Last Post: 23 Dec 2016, 08:04 PM
  2. v138a Scrolling box in the header
    By Artch in forum Contribution-Writing Guidelines
    Replies: 0
    Last Post: 14 Feb 2015, 01:16 PM
  3. Easy way to edit header/top menu, footer menu, and sidebar menu?
    By templar2 in forum Templates, Stylesheets, Page Layout
    Replies: 8
    Last Post: 30 Jun 2009, 11:14 AM
  4. Page Keep dropping down when scrolling
    By heavenlynights in forum Templates, Stylesheets, Page Layout
    Replies: 5
    Last Post: 17 Nov 2006, 04:03 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR