Tagged: navigation, Navigation Bar, Sticky, tagline
- This topic has 3 replies, 2 voices, and was last updated 9 years, 4 months ago by
Sakin.
-
AuthorPosts
-
May 5, 2015 at 8:49 pm #57193
kopernik
MemberHello.
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!
May 6, 2015 at 12:06 am #57210Sakin
Keymaster@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; } }
May 6, 2015 at 3:25 am #57226kopernik
Member@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.
May 8, 2015 at 11:49 am #57378 -
AuthorPosts
- The topic ‘Navigation Bar Inquiries’ is closed to new replies.