Home › Community Forums › Agile Theme Support › Adding Navigation to the Top of Site
- This topic has 9 replies, 2 voices, and was last updated 10 years, 6 months ago by
Wes.
-
AuthorPosts
-
September 4, 2012 at 11:43 pm #1311
seth17
CustomerWes, what’s the best way to add the nav bar to the top of a site using the Agile theme? Something similar to this image with the logo on the left, nav at the top, and Genesis Responsive slider below. Also with the nav staying at the top on the interior pages as well.
Thanks.
September 5, 2012 at 12:16 am #1313Wes
ModeratorRemove the “remove_action” in the functions file.
Then follow this tutorial to add it back – http://www.studiopress.com/tutorials/navigation#reposition-primary You can add it to wherever you need it to show by taking a look at the hooks – http://www.studiopress.com/tutorials/hook-reference …….then make your adjustments from there.
September 5, 2012 at 12:35 am #1314seth17
CustomerSo I removed that section and added in the following:
/** Reposition the primary navigation */
remove_action( 'genesis_after_header', 'genesis_do_nav' );
add_action( 'genesis_before_content_sidebar_wrap', 'genesis_do_nav' );
For some reason, there is a search bar showing up on the right side of the “header” area and I have no idea where it’s pulling from since I don’t have a search widget inserted anywhere. Check it out here.Obviously I still need to do some CSS work to get the nav to look right, but is there a theme whose code you would recommend copying any pasting over to get the nav to align horizontally across instead of vertically as it is now?
September 5, 2012 at 12:49 am #1315Wes
ModeratorThe search box is coming from your Genesis Theme settings. Go into your Genesis Theme settings and uncheck the box under the Primary Nav that says – “Enable Extras on Right Side?”
…The nav was designed/coded to be vertical for this theme, so I don’t have any extra “shortcuts” for it since that was the intention. However, you may be able to get away with removing the “clear: both” for the <li> – .menu-primary li, .menu-secondary li, #header .menu li on line 313
September 5, 2012 at 12:54 am #1316seth17
CustomerWow, I feel stupid! Of course that’s where it would be pulling from!
I tried removing the “clear: both”, but it didn’t have any effect on the nav layout. Where would you recommend starting to change it from vertical to horizontal?
September 5, 2012 at 12:58 am #1317Wes
ModeratorLooks like its still there……you may have removed it from somewhere else. It should be on line 313 (currently) –
.menu-primary li, .menu-secondary li, #header .menu li {
clear: both;
float: left;
list-style-type: none;
}When I remove it, this is what your site looks like – http://i.imgur.com/v1v3z.png
September 5, 2012 at 1:05 am #1318seth17
CustomerGot it! Sweet. One (hopefully) last question. Is there a way to make the header right (left) widget area show up at the bottom of the content when viewing on a mobile device? Currently when I shrink the browser the Facebook page (or any other widget) displays below the title but above the navigation and content. I think it would look much better if it shifted below. What should I change in the responsive code to make it do that?
September 5, 2012 at 1:13 am #1319Wes
ModeratorNot sure how that can be done just yet. The css will only control the display, but it doesn’t control the order/location of the html/code. There would need to be some type of PHP/Javascript needed to make something like that happen.
September 5, 2012 at 1:16 am #1320seth17
CustomerOk, thanks. If you run across a way to that, let me know. That would make the theme even better! Thanks again for your help.
September 5, 2012 at 2:01 am #1321Wes
ModeratorWill do.
You’re Welcome
-
AuthorPosts
- The topic ‘Adding Navigation to the Top of Site’ is closed to new replies.