I'm using the WordPress Genesis Framework and I have created a separate mobile menu (as I had to split the desktop one in two) and I'm using the built-in responsive menu it has, but I cannot figure out how to get Genesis to open the new mobile menu I created rather than the primary one.
Is there some way you can provide a different selector/id so Genesis knows to target a different menu?
When you add a new menu, you give it a name. Let's say we name it 'footer menu 1'. When you add this menu to your page (either through php or through the Custom Menu Widget), it will get a ul with id = "menu-footer-menu-1". You can use that to target the menu.
The built-in responsive menu I've seen with genesis is to have the menu items flow to multiple lines if the screen gets too small. Many of the Genesis child themes, though, include some javascript to turn the menu into a hamburger icon at certain window widths. You'll have to check your child theme files to see.
I would put both the desktop menu and the mobile menu in your markup and use media queries (or javascript) to hide the respective menu depending on the width of the window.
Related
How can I get this menu in Divi theme?:
Take these steps
Log in to your WordPress dashboard and go to Appearances > Menus. I assume you have a menu set up
I am assuming you have a menu that has a Menu item that is NOT a submenu let say it's called Features and under that you have submenus called Feature 1, Feature 2 etc.
Now in order to make your Megamenu you have to add a special CSS class to the main top tier link called “Features”. You can do that by clicking the screen options link of the top your page and making sure the CSS class option is checked.
Finally, you need to add a css class to the “Features” link you just created. Click the arrow on the right of the “Features” menu item to toggle the additional configuration options. Find the text box labeled CSS Classes and enter the class mega-menu
That's it basically. There is official documentation on how to do this
I have a requirement to create a custom navigation bar to replace the existing on a WordPress site. I have decent at CSS but have never come across something like this.
I have found multiple ways to remove the existing navigation bar so that is not a problem but adding the svg with links that are relative to the svg is.
The navigation bar is supposed to look something like this
navigation bar
I think you can approach this from two different angles.
1 - You don't want to/can't use PHP
You can create a custom menu through Wordpress' admin panel.
Add specifics classes to buttons (by activating CSS class property field on menu's buttons using "screen options" panel : ont the right top corner of the page).
Then you sould need 2 classes :
one class for the links on the first row (who/what/how)
another class for the link on the second row (contact)
and adjust de CSS rules to display links as you want.
Finaly I would display the "cloud" svg as the background of the whole menu.
The real problem is that wordpress will output all menu items as li in a ul, so maybe you should create 2 differents menu (one per row), and display the two menus in a dedicated container.
2 - You want/can/prefer to use PHP
This alternative takes advantage of Wordpress' Menu Walker by creating a custom walker extending it
The idea is that by customizing this PHP class you can specify how you want wordpress to render you menu(s) by defining the HTML output.
Here is some links to help you do that :
https://gist.github.com/kosinix/5544535
https://code.tutsplus.com/tutorials/understanding-the-walker-class--wp-25401
http://jamescollings.co.uk/blog/wordpress-custom-walker-output-section-of-menu/
Once you custom menu output is OK, you just need to customize the generated HTML though CSS.
Note: the second approach can be an adventure if you're not comfortable enough with PHP
I would like to be able to create a navigation menu in WordPress in which the top-level nav items are not pages, but rather menu headings, which expand the sub menu when clicked.
The default WP menu behavior is that all menu items are links to content (pages, posts, etc), and that sub-items are viewed upon hover.
I'm looking for a way to make it work more like the menu behavior built into Twitter Bootstrap (and for the same usability reason).
I'm looking for a solution that either already exists as a plugin, or which I can build into a plugin, so that anyone can create a new menu like this in the WordPress menu editor.
checkout this tutorial :
https://digwp.com/2011/11/html-formatting-custom-menus/
If you dont want any custom html structure than you can simply add the classed to menu and for top level menu create a custom link with # as href.
I have following navigation structure, which i want to implement in wordpress:
(Home / About / news / Contact) are in top navigation, whereas all sub links are in sidebar.
How can i create this type of navigation in wordpress. i.e. How can i display first level navigation in header and second level navigation in sidebar.
Follow these steps:
First create a main Navigation to your site without child pages and
add it to the theme.
Then create a new menu with child menus only and save it.
Now goto widgets section and from there drag Custom Menu from left
side and add to your sidebar.
Then select your child menu and click save.
Thats all. :)
Check this WordPress Codex section for creating menu tutorial
Cheers!!!
I found these plugins helpful:
Simple Section Navigation
http://wordpress.org/extend/plugins/simple-section-navigation/
It allowed me to create the side nav based on the hierarchy of the pages and their children.
I wanted a bit more control though because I didn't want some of the parents to have their own page ... just a heading for their children. So instead, I'm using this plugin (for the Genesis Framework).
Genesis Simple Sidebars
http://wordpress.org/extend/plugins/genesis-simple-sidebars/
This allows me to create as many sidebars as I want and add custom menus to those. I'm new to this, so maybe I'm taking a long route, but so far it seems to be doing what I want it to.
Is it possible to build a drop down menu which content (the text inside the <li> tags) can be edited and modified by the user (within wp-admin)?
(or is there any plugin for that?)
For instance, like the text inside the drop down menu in this page: http://melbournecandy.com/day-tours-dates/
Wordpress has a built in feature called Menus which was developed by Woothemes. If you know HTML and CSS, you should be able to make such a dropdown menu yourself.
There's a JQuery plugin called Droppy I love that changes any HTML menu to a dropdown menu. Just remember to style it with CSS.
http://onehackoranother.com/projects/jquery/droppy/
http://plugins.jquery.com/project/droppy