Change width when top menu is fixed

Can you link to a screenshot of the issue you face below that resolution?

https://i43.tinypic.com/2u8yzqt.jpg

It is built to snap out of fixed position for tablets etc (1024px or below).

In style.css you will find:

@media only screen and (min-width: 1025px) {
	/* fixed nav */
	.topbar-enabled #header { padding-top: 50px; }
	#nav-topbar.nav-container { position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 999; }
	.admin-bar #nav-topbar.nav-container { top: 28px; }
}

Or in any version higher than v1.1.2:

@media only screen and (min-width: 1025px) {
	/* fixed nav */
	.full-width.topbar-enabled #header { padding-top: 50px; }
	.full-width #nav-topbar.nav-container { position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 999; }
	.full-width.admin-bar #nav-topbar.nav-container { top: 28px; }
}

Just modify that 1025px value either by editing or using custom css.

This will help you to apply css as per scroll event

<script>
       jQuery(document).ready( function() {
   var topOfOthDiv = jQuery("#nav-topbar").offset().top;
   jQuery(window).scroll(function() {
       if(jQuery(window).scrollTop() > topOfOthDiv) {
                        jQuery("#nav-topbar").css({
                          "position":"fixed",
                          "width":"50%"});
       }else{
                         jQuery("#nav-topbar").css({
                          "position":"static",
                           "width":"100%"});
      }
   });
});
       </script>

Alexander – nothing happens when I change it.

tsl143 – how to apply it?

@jack, did you empty all caches / force-refresh the page with F5?

Ok, it works now ??

Thank you for help and for your theme, it’s just awesome!

Glad to hear! Thanks ??