Jump to content

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

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 ?

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.

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/

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

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

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