loneil007 Posted February 8, 2016 Share Posted February 8, 2016 Hello, I recently added different menu navigations for specific pages on my site: millcityenergy.com using the wordpress plug-in page specific menu items while it works fine for desktop, the mobile version displays all the pages in the dropdown (select a page). I've tried different custom css codes and as a novice, I have been unsuccessful. Screenshot attached. Any idea of how to narrow down the pages and/or follow the same navigation as desktop? Any help will be greatly appreciated. Thank you, Lauren Link to comment Share on other sites More sharing options...
dsonesuk Posted February 8, 2016 Share Posted February 8, 2016 Your site is using the same id for main menu several times when it should ONLY be used once within each page, so it is probably causing the gathering these identical menu id ref into one and so duplicating links. <ul id="main-nav" class="sf-menu"> 1 Link to comment Share on other sites More sharing options...
chitrag Posted February 9, 2016 Share Posted February 9, 2016 Hello, I am also trying to make responsive menu and pages but still not worked. As I used instruction from my site builder to use foundation I applied their instructions after that I got result as in my site All drop down menu is white, side vertical menu background also white, footer also white. which .css file should correct foundation.css or custom.css ? Link to comment Share on other sites More sharing options...
dsonesuk Posted February 9, 2016 Share Posted February 9, 2016 Hello, I am also trying to make responsive menu and pages but still not worked. As I used instruction from my site builder to use foundation I applied their instructions after that I got result as in my site All drop down menu is white, side vertical menu background also white, footer also white. which .css file should correct foundation.css or custom.css ? As already mentioned, if you continually use tables for layout of your menu, and page content, IT WILL NEVER, EVER! BE A RESPONSIVE SITE. Also your menu link to its js/jquery file has attributes butted together, which will cause link to fail. Link to comment Share on other sites More sharing options...
loneil007 Posted February 10, 2016 Author Share Posted February 10, 2016 @dsonesuk Ahh, I see. So can I just change the id in the code? Link to comment Share on other sites More sharing options...
dsonesuk Posted February 10, 2016 Share Posted February 10, 2016 You have to look where the ref to add a new menu is placed, example page.php or footer.php, any menu otherthan the the top, using 'container_id' => 'main-nav' need to be changed to unique id ref for each menu found. See https://developer.wordpress.org/reference/functions/wp_nav_menu/ https://premium.wpmudev.org/blog/add-menus-to-wordpress/ Link to comment Share on other sites More sharing options...
loneil007 Posted February 14, 2016 Author Share Posted February 14, 2016 This is great @dsonesuk Thank you! I added primary, secondary and third menus. My next question is how I can apply only the primary menu on specific pages, the secondary menu on specific pages, and the third menu on specific pages. Link to comment Share on other sites More sharing options...
dsonesuk Posted February 14, 2016 Share Posted February 14, 2016 Use wordpress is_post or/and is_page in if condition around menu coding see https://codex.wordpress.org/Conditional_Tags Link to comment Share on other sites More sharing options...
loneil007 Posted February 14, 2016 Author Share Posted February 14, 2016 (edited) So this is what I added to my header.php file: <?php wp_nav_menu( array('theme_location' => 'primary-menu','menu_id' => 'main-nav','menu_class' => 'sf-menu')); ?> <?php wp_nav_menu( array('theme_location' => 'secondary-menu','menu_id' => 'main-nav','menu_class' => 'sf-menu')); ?> <?php wp_nav_menu( array('theme_location' => 'third-menu','menu_id' => 'main-nav','menu_class' => 'sf-menu')); ?> Could I just replace this entire code with the below? <?php wp_nav_menu( array('theme_location' => 'none','menu_id' => 'main-nav','menu_class' => 'sf-menu','menu'=> get_page_meta( $page->ID, 'MenuName', true))); ?> And update the menu in the custom field on the page level (custom field would be MenuName and in the field enter the name of the menu)? Edited February 14, 2016 by loneil007 Link to comment Share on other sites More sharing options...
dsonesuk Posted February 14, 2016 Share Posted February 14, 2016 You are still assigning multiple identical id's <?php wp_nav_menu( array('theme_location' => 'primary-menu','menu_id' => 'main-nav','menu_class' => 'sf-menu')); ?> Will have ref at backend of 'primary-menu' but frontend the id will be 'main-nav' with class 'sf-menu'. <?php wp_nav_menu( array('theme_location' => 'secondary-menu','menu_id' => 'main-nav','menu_class' => 'sf-menu')); ?> Will have ref at backend of 'secondary-menu' but frontend the id will be 'main-nav' with class 'sf-menu'. <?php wp_nav_menu( array('theme_location' => 'third-menu','menu_id' => 'main-nav','menu_class' => 'sf-menu')); ?> Will have ref at backend of 'third-menu' but frontend the id will be 'main-nav' with class 'sf-menu'. If you use exactly the same menu with same links, use a specific class only, classes can be used multiple times within a page unlike a id ref. If menus are different and not used multiple times within page use id instead. Link to comment Share on other sites More sharing options...
loneil007 Posted February 14, 2016 Author Share Posted February 14, 2016 Can I change the ID to whatever I want? Link to comment Share on other sites More sharing options...
dsonesuk Posted February 14, 2016 Share Posted February 14, 2016 Yes! As long as id is unique and not used anywhere else within a page. It is mainly used for a reference for css and maybe used to manipulate using js. Link to comment Share on other sites More sharing options...
loneil007 Posted February 14, 2016 Author Share Posted February 14, 2016 (edited) Okay great. So I updated the code to include different IDs <?php wp_nav_menu( array('theme_location' => 'primary-menu','menu_id' => 'main-nav','menu_class' => 'sf-menu')); ?> <?php wp_nav_menu( array('theme_location' => 'secondary-menu','menu_id' => 'nh-nav','menu_class' => 'sf-menu')); ?> <?php wp_nav_menu( array('theme_location' => 'third-menu','menu_id' => 'ma-nav','menu_class' => 'sf-menu')); ?> Now, how do I display only the secondary menu on this page millcityenergy.com/nh? Edited February 14, 2016 by loneil007 Link to comment Share on other sites More sharing options...
dsonesuk Posted February 14, 2016 Share Posted February 14, 2016 IF page post use is_single(), if page use is_page(), first get id ref of page or post (quick way is to go to backend and hover over edit link and look for id ref number, but you could use title as ref also). POST (id ref '14' is example of retrieved id) <?php if(is_single(14)) { wp_nav_menu( array('theme_location' => 'secondary-menu','menu_id' => 'nh-nav','menu_class' => 'sf-menu')); } ?> PAGE (id ref '14' is example of retrieved id) <?php if(is_page(14)) { wp_nav_menu( array('theme_location' => 'secondary-menu','menu_id' => 'nh-nav','menu_class' => 'sf-menu')); } ?> Link to comment Share on other sites More sharing options...
loneil007 Posted February 14, 2016 Author Share Posted February 14, 2016 okay, I'll give it a try. Would I replace the code entirely with this below and if I had more page ids to include, do I list via comment? (sorry, Im a newbie): <?phpif(is_page(14,16,18)){wp_nav_menu( array('theme_location' => 'secondary-menu','menu_id' => 'nh-nav','menu_class' => 'sf-menu')); }?> <?php if(is_page(13,20,30)){wp_nav_menu( array('theme_location' => 'third-menu','menu_id' => 'ma-nav','menu_class' => 'sf-menu')); }?> <?php if(is_page(15,30,31)){wp_nav_menu( array('theme_location' => 'secondary-menu','menu_id' => 'main-nav','menu_class' => 'sf-menu')); }?> Link to comment Share on other sites More sharing options...
dsonesuk Posted February 14, 2016 Share Posted February 14, 2016 You didn't look at link provided did you, tut tut, its all explained there! with multiple posts or pages you use array() with post/pages id references is_single(array(14, 17, 21)) or is_page(array(14, 17, 21)) Link to comment Share on other sites More sharing options...
loneil007 Posted February 14, 2016 Author Share Posted February 14, 2016 Just went back to the conditional tags link and it all makes sense now I will try this and let you know how it turns out. Thank you very much! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now