Community Forums › Forums › Archived Forums › Design Tips and Tricks › Custom Menu Widget Displayed Horizontally
Tagged: align, custom menu, horizontal, menu, widget
- This topic has 8 replies, 2 voices, and was last updated 11 years, 8 months ago by Robby Payne.
-
AuthorPosts
-
January 15, 2013 at 8:40 pm #12186Robby PayneMember
I'm trying to get a Custom Menu widget to display horizontally instead of vertically. I'm attempting to mimic a site for a client, or else I would simply move on. I'm going to just put some plain, linked text in for now. But below it, I will leave the vertical menu for your inspection if you choose to give me a hand. Thanks in advance!
January 15, 2013 at 10:51 pm #12212buddy_boy8403ParticipantYou can try the below in your child theme's functions.php file. This will unregister the primary navigation and move it within the primary sidebar inside of a widget area. From there, you can style it in you child theme's style.css file to make it look like you need to.
You may also need to change the default genesis layout to sidebar/content or content/sidebar in order for the new menu location to show up. You should be able to do this by logging into wp-admin and clicking on the genesis tab on the left.
/** Reposition the primary navigation menu */
remove_action( 'genesis_after_header', 'genesis_do_nav' );
add_action( 'genesis_sidebar', 'genesis_do_nav' );January 16, 2013 at 12:05 am #12225Robby PayneMemberThanks for the response. I tried this with the secondary nav. Same code and the secondary nav now shows up in the primary sidebar, but there is no way to remove it now. I need it in the Featured Bottom Left area on the home page. Any ideas how to get it there? This is what I tried to do earlier (registering it other places), but I could not figure out how to get it to show up anywhere but after or before the footer. That is close, but not quite where I need it.
Thanks again for your assistance!
January 16, 2013 at 12:10 am #12227Robby PayneMemberAlso, if you click on the "Agents" menu item, it will take you to the sample inner page and you can see what the change in code produced. It's the right track...just not sure if I can get it put right where I want with the functions.php or not.
January 16, 2013 at 12:24 am #12233buddy_boy8403ParticipantWell in that case, just remove the code I told you to add and go into wp-admin > appearance > widgets and move the custom menu widget to the Featured Bottom Left sidebar.
January 16, 2013 at 1:00 am #12241Robby PayneMemberThat's what is already there. That green text is actually a custom menu widget, aligned vertically. The code you suggested added the secondary nav and all it's CSS styling to the sidebar (look at the Agents page), but there is no widget actually placed in the sidebar at this time. It's there because the function.php is telling it to be there.
Putting a custom menu widget in the Featured Bottom Left sidebar was my first move and it never occurred to me that it would be so difficult to get it to lay out horizontally. Adjusting the placement of the primary or secondary nav was the suggestion of others as well, but I can't get it to where I need it via PHP. Not sure what else to do.
January 16, 2013 at 1:14 am #12244buddy_boy8403ParticipantI'm a little confused about what you actually want. If you just want the items in green to show horizontally, then on line 119 in your child theme's style.css file, do this:
li, ol, ul {
display: inline;
list-style-type: none;
margin: 0 0 0 10px;
padding: 0 10px 0 0;
}If you want the buttons like what is in the primary sidebar on your pages, then in your child theme's functions.php file, locate the code for the Featured Bottom Left sidebar and add in the code I pasted earlier within it.
January 16, 2013 at 1:39 am #12249buddy_boy8403ParticipantOne other thing if you do the css styling I gave in the post above, you may also want to edit line 293 in your style.css to this so that your top menu fits on one line:
#header ul.menu li a {
color: #FFFFFF;
display: block;
font-family: "Times New Roman",Times,serif;
font-size: 20px;
margin: 0 8px 0 -12px;
padding: 7px 2px 5px;
position: relative;
text-decoration: none;
}January 16, 2013 at 12:36 pm #12359Robby PayneMemberI think I'm just going to style the green menu that is there already. I tried adding the
add_action( 'genesis_sidebar', 'genesis_do_subnav' );
to the Featured Bottom Left in the function.php, but it didn't work. Is that the code you were talking about? I tried it in the home.php as well, but nothing happened.
Thanks again for your patience and help!
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.