CSS: Responsive Navigation Menu

[loneil007]

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

[dsonesuk]

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">

[chitrag]

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 ?

[dsonesuk]

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.

[loneil007]

@dsonesuk Ahh, I see. So can I just change the id in the code?

[dsonesuk]

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/

[loneil007]

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.

[dsonesuk]

Use wordpress is_post or/and is_page in if condition around menu coding see

 

https://codex.wordpress.org/Conditional_Tags

[loneil007]

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

[dsonesuk]

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.

[loneil007]

Can I change the ID to whatever I want?

[dsonesuk]

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.

[loneil007]

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

[dsonesuk]

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')); 
}
?>

[loneil007]

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):

 

<?php
if(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'));
}
?>

[dsonesuk]

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))

[loneil007]

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!