[kopernik]

Hello.

I am working with the Koperink Observatory not-for-profit company to re-design their website. Right now it can be seen at http://www.kopernik.org/sandbox.

I have a couple of questions about the navigation bar. First, can it be moved to the top of the screen? Yes, I do intend to have it cover the tagline and the search bar. The staff at Kopernik wants the nav bar all the way at the top.

Second, can the navigation bar be fixed (stickied) to the top so that when a user scrolls down, he/she still always sees it regardless of where they are on the page?

For an example of exactly what we want with the navigation bar, go to our current site kopernik.org.

I along with other staff members are not insanely knowledgable when it comes to this stuff, so please keep that in mind.

Thanks!

[Sakin]

@kopernik:
1. To change the menu potion to top above your site title. You need to build child theme. For child theme, refer to http://catchthemes.com/blog/create-child-theme-wordpress/. Then add the following code in your child theme functions.php file.

// Unhook default Catch Responsive functions
function unhook_catchresponsive_functions() {
    remove_action( 'catchresponsive_after_header', 'catchresponsive_primary_menu', 20 );
}
add_action( 'init', 'unhook_catchresponsive_functions' );

//Adding menu at top in header
add_action( 'catchresponsive_header', 'catchresponsive_primary_menu', 15 );

2. Then you need to add following css in your child theme style.css file to make your menu fixed:

.nav-primary .wrapper { width: 1200px; }
@media screen and (max-width: 1280px) { 
	.nav-primary .wrapper { width: 1100px; }
}
@media screen and (max-width: 1152px) { 
	.nav-primary .wrapper { width: 1040px; }
}
@media screen and (max-width: 1100px) { 
	.nav-primary .wrapper { width: 960px; }
}
@media screen and (min-width: 991px) {
	.site { position: relative; }
	.site .nav-primary { position: fixed; top: 0; overflow: hidden; }
	#masthead { padding-top: 40px; }
}

[kopernik]

@sakin

Great! thank you.

As you see now on kopernik.org/sandbox, the navigation bar is at the top and fixed.

One other question:

How can I get rid of the search bar and social links at the top right? I want the nav bar to be at the top like it currently is, then I want the header picture directly below it. I don’t want that gray space in between.

Thanks.

[Sakin]

@kopernik: If you don’t want that whole header then you can hide it by adding in the following css
#masthead { display: none; }

[Author]

Posts