WordPress-3.6.1: Stop the top menu bar from scrolling up.

Greetings,

WordPress-3.6.1 comes with the most amazing theme called ‘twentythirteen’.

However considering user preferences, one enhancement that needs to be done is that the top menu bar should always remain visible regardless of the vertical scroll. This will make navigation much easier.

Hence position of menu bar should be fixed on top of page.

To achieve this, some changes are to be done in file ‘/wp-content/themes/twentythirteen/style.css’.

Following code:

.navbar {
    background-color: #f7f5e7;
    margin: 0 auto;
    max-width: 1600px;
    width: 100%;
}

needs to be changed to:

.navbar {
    background-color: #f7f5e7;
    margin: 0 auto;
    max-width: 1600px;
    width: 100%;
    /*Changed here*/
    position: fixed;
    top: 0;
    z-index: 2;
}

Catch / Caveat:

  1. Tweaks / Modifications are for ‘twentythirteen’ theme. However similar tweaks could be applied to any other theme such as ‘Spine’.
  2. One of the theme file is directly edited (might be considered as bad advice), so need to take care about the future updates to the theme file.
    [To achieve the same task without modifying the core theme file refer http://www.knowledge-share.in/wordpress-change-a-theme-appearance-without-touching-core-theme-files/
  3. Some difficulties might be faced when trying to view the top menu bar during admin tasks. (i.e. When admin is logged in.)

 

Thanks!