[CJComms]

Hi,

Wondering if there is away to keep the top ‘main’ header menu fixed so that the page only scrolls below the menu?

Site: http://www.mickspencer.com/

Thanks

[Mahesh]

@cjcomms: For this you’ll need to add some Custom CSS and Custom scripts. I recommend you to use Catch Web Tool’s Webmaster Tool for add Custom Scripts.
https://wordpress.org/plugins/catch-web-tools/.
1. Adding Script
-Download and install the plugin and activate it. Go to Dashboard=> Catch Web Tools=> Webmasters.
– Check Check to enable opion in Enable Webmaster Module
– Add the following script in Header and Footer Scripts on bottom text box and click save.

<script>
jQuery(document).ready(function($){
	$(function () {
		$(window).scroll(function () {
			if ($(this).scrollTop() > 280) {
				$('nav.nav-primary.search-enabled').addClass('sticky');
			} else {
				if( $('nav.nav-primary.search-enabled.sticky').length > 0 ){
					$('nav.nav-primary.search-enabled').removeClass('sticky');
				}
			}
		});
	});
});
</script>

2. Add Custom CSS:
– Go to Dashboard=> Appearance=> Customize=> Theme Options=> Custom CSS box and add the following CSS:

.admin-bar .nav-primary.search-enabled.sticky {
    position: fixed;
    top: 32px;
    width: 100%;
}

.nav-primary.search-enabled.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}

Regards,
Mahesh

[CJComms]

Perfect, thanks so much!

Would you mind also telling me the correct custom CSS to remove the white space above and below the logo in header? I’ve tried a few with no luck. I would also like the logo to fill the width – how many pixels wide should the artwork be?

I would also like to remove the white space above and below the side bar, if possible.

Sorry, that turned into a few queries! Thanks again, you really provide excellent support and I appreciate it.

[Mahesh]

@cjcomms: Go to Dashboard=> Appearance=> Customize=> Theme Options=> Custom CSS box and add the following CSS:
1. Remove the white space above and below the logo in header

/* Remove the white space above and below the logo in header */
#masthead {
    padding-top: 0;
    padding-bottom: 0;
}
#site-branding {
    padding: 0;
}

2. How many pixels wide should the artwork be
Since the wrapper div is 1200px wide, you’ll need logo of width 1200 pixels

3. Remove the white space above and below the side bar
I am afraid this is not possible.

Regards,
Mahesh

[CJComms]

Awesome, thanks again.

[Author]

Posts