WordPress.org

Forums

Iconic One
[resolved] How to freeze the nav bar at the top while scrolling the page (9 posts)

  1. MayankJ7
    Member
    Posted 1 year ago #

    Hi guys.

    Absolutely loving your theme.

    I would be grateful if you could help me out with an issue. I want the navigation bar of my website to be frozen on top of the screen while users are scrolling below. What changes do I have to make in the style.css?

    Thanks :)

  2. Jesin A
    Member
    Posted 1 year ago #

    Plain CSS won't do this, jQuery is also required. Create and activate a child theme.

    Create and edit wp-content/themes/iconic-one-child/functions.php

    <?php
    add_action( 'wp_footer', 'fixed_menu_onscroll' );
    
    function fixed_menu_onscroll()
    {
    ?>
    <script type="text/javascript">
    $(window).bind('scroll', function() {
    if ($(window).scrollTop() > 145) {
    $('#site-navigation').addClass('fixed');
    }
    else {
    $('#site-navigation').removeClass('fixed');
    }
    });
    </script>
    <?php
    }

    Then edit wp-content/themes/iconic-one-child/style.css

    nav.fixed {
      max-width: 1040px;
      position: fixed;
      top: 0;
      z-index: 999;
    }
  3. MayankJ7
    Member
    Posted 1 year ago #

    Hi Jesin.. Thanks for the reply.

    I did exactly as you said but this still hasn't sorted out the issue. Here's my website - http://www.theiphoneinsight.com, have published a sample post for so that you can check the issue.

    I get this error when I try to open the newly created functions.php. - Call to undefined function add_action() in ( D:\INETPUB\VHOSTS\theiphoneinsight.com\httpdocs\wp-content\themes\IconicOneChild\functions.php on line 2 }

    BTW I am looking for the nav bar to freeze on all pages and not just the home page. Please have a look, thanks.

  4. Jesin A
    Member
    Posted 1 year ago #

    The jQuery framework is not being loaded by the theme. Here is the complete code for the child theme's functions.php

    <?php
    add_action( 'wp_enqueue_scripts', 'add_jquery' );
    add_action( 'wp_footer', 'fixed_menu_onscroll' );
    
    function add_jquery()
    {
    	wp_enqueue_script( 'jquery' );
    }
    
    function fixed_menu_onscroll()
    {
    ?>
    	<script type="text/javascript">
    	jQuery(document).ready(function($){
    		$(window).bind('scroll', function() {
    			if ($(window).scrollTop() > 145) {
    				$('#site-navigation').addClass('fixed');
    			}
    			else {
    				$('#site-navigation').removeClass('fixed');
    			}
    		});
    	});
    	</script>
    <?php
    }

    There is no need to access this file from the browser.

  5. MayankJ7
    Member
    Posted 1 year ago #

    Works like a charm! Thanks Jesin.

    Could you help me out with one last thing?

    I want the Nav Bar to be on top ( completely stretched to the width of the screen ) and the header below the nav bar. Like how its in http://www.thepeoplesperson.com . Would be grateful. :)

  6. Jesin A
    Member
    Posted 1 year ago #

    If that is your requirement you don't need jQuery or any other PHP code I posted. Remove that code from the functions.php file (if you don't have anything else in this file delete it). Also remove the CSS for "nav.fixed" and add the following

    #site-navigation {
        background-color: #F3F3F3;
        border-bottom: 5px solid #000000;
        left: 0;
        position: fixed;
        top: 0;
    }
    .nav-menu > ul {
        border-bottom: medium none !important;
        max-width: 1040px;
    }
  7. MayankJ7
    Member
    Posted 1 year ago #

    Done. Dude you are a saviour. Thanks for all the help. Have a great day :)

  8. manigarg21
    Member
    Posted 1 year ago #

    Hi Jesin A,

    I am also having the same issue. I want the same kind of fixed navigation menu on top of my site http://celebrateharmony.in
    I am using Academica theme by WpZoom. I have tried pasting the code you suggested above in my style.css
    But that is freezing the whole header area and not just the navigation bar on top.
    So I am using a plugin called Sticky Header temporarily, which pops out a new blue color menu when I scroll down for more than 150px without sub-menu links, but that is not solving the purpose. I want the original navigation menu from theme to be always on the top.

    Kindly suggest what changes I need to make to solve this problem. It's really urgent.

    Thanks

  9. Jesin A
    Member
    Posted 1 year ago #

    Try this

    #main-nav {
        position: fixed;
        top: 0;
        width: 960px;
    }
    #header {
        margin-top: 58px;
    }

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic