Jump to content
loneil007

CSS: Responsive Navigation Menu

Recommended Posts

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

post-197364-0-53730500-1454928120_thumb.png

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

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 ?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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/

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 by loneil007

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 by loneil007

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...