Community Forums › Forums › Archived Forums › Design Tips and Tricks › How can I create a dropdown menu?
- This topic has 4 replies, 2 voices, and was last updated 11 years, 2 months ago by john scheine.
-
AuthorPosts
-
February 7, 2013 at 5:50 pm #18785Alex HougMember
Hello,
I was wondering how I could create a dropdown menu on this child theme I am creating. Here is the site: http://goo.gl/2Gbal
Here is the section of my functions.php file that holds the menu:
// Reposition primary navigation
remove_action( 'genesis_after_header', 'genesis_do_nav' );
add_action ( 'genesis_header', 'primary_navigation' );function primary_navigation() {
echo '<div id="prime-nav">';
wp_nav_menu( array('menu' => 'Primary' ));
echo '</div>';
}Here is the section of my style.css that holds the current menu:
#prime-nav {
float: right;
}#prime-nav a {
color: #000;
background-color: #fff;
font-family: 'Cuprum', sans-serif;
font-size: 16px;
text-decoration: none;
text-transform: uppercase;
padding: 10px 23px 10px 20px;
margin: 0px -5px 0px 0px;
}#prime-nav a:hover {
color: #fff;
background-color: #ff2a00;
padding: 10px 23px 10px 20px;
}#prime-nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}#prime-nav ul li {
display: inline;
}#prime-nav .last {
padding-right: 3px;
}Let me know what you guys think.
Thanks in advance.
February 8, 2013 at 2:13 pm #19041Alex HougMemberAnyone?
February 14, 2013 at 10:46 am #20329john scheineMemberWhich child theme are you using? Most if not all of them don't require you touch anything in css or php to create a dropdown. Make sure you have it enabled in theme setting. Genesis-theme settings click enable fancy dropdown. Then in dashboard go to appearance-menu add pages or custom links to your primary or secondary menu. Select the pages/links you want to add. Then you drag pages into the position you want them.
Hopefully this is helpful to you. In The CSS You can resize, change colors of dropdowns, hover colors etc. I've only been using studiopress a few months and have found sometimes the simplest answer is the one that works.
Is this what you had in mind for dropdowns? http://www.scheinedisabilitylaw.com/
February 18, 2013 at 10:46 am #21020Alex HougMemberHi John,
Thanks for the reply.
I was looking more for a specific CSS answer or some links to tutorials on creating navigations in CSS. I understand how to use/create menus in the WordPress interface, but I am not completely sure on creating CSS menus with dropdowns. I am actually creating a custom child theme, not using a specific one.
That site you reference is sort of what I am looking for in terms of a navigation.
February 18, 2013 at 3:05 pm #21095john scheineMemberNot entirely sure if I understand what you want to accomplish. Creating a Drop down menu like the example I used does not require any changes to the CSS. (unless you want to change colors/fonts) CSS you pasted controls the default color, hover color, spacing, fonts, etc. The dropdowns I created for the example I posted were done entirely in the appearance, menu. Literally drag and drop. Drag elements a little to the right for dropdowns. CSS was then used to customize default colors and hover colors.
Here are some pretty basic css tutorials:
http://wpsites.net/web-design/style-menu-items-css-classes/
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.