Highlighting Wordpress menu item when not a child page/category - wordpress

the site I am working on is http://archibaldbutler.com/projects/williamsmurrayhamm/
My client is requesting a function I have no idea how to integrate. Highlighting a menu item (active) in white even when in a completely different site page/post/category....
Example:
Go to this page: http://archibaldbutler.com/projects/williamsmurrayhamm/designvertising/
As you can see the menu Item "Designvertising" is highlighted in white.
Now please click on the first image on the right: The plastic drink bottles called Juice burst, My client wants the "Designvertising" menu item to remain highlighted when you click through to different sections from that page.
I have not integrated menu hierarchy (child category/page), because there have been many amendments changes throughout the project.
The way I would do it if I knew php is
"If main menu item was clicked or is highlighted in white, keep highlighted in white until a different main menu item is clicked".... I hope that makes sense.
Or perhaps it is possible by integrating css into custom fields?
There are 3 pages that need this functionality:
-Latest work page
-Designvertising page
-Extras category
I know basic Javascript and a tiny bit of php so please be explicit.

Make your life easier and make these sub-pages! It won't take 5 minutes and WP should add some helpful classes to the menu items, like current_page_parent etc. Then it's easily styled...
Unless I've misunderstood what you were after? Are the pages not related to the menu item?
The other way to do it is to add classes to the clicked menu item via javascript.
JQuery has some useful methods for this... addClass('highlight') etc. Is this the kind of thing you need?

Related

Create child page template based off book parent page in Drupal 7

I'm still learning Drupal, but I'm completely stuck at this point. I need to create a template for the child pages based off the navigation link clicked.
This grid is a Bootstrap thumbnail grid serving as a navigation menu. I want to know how to create a template page based off the parent navigation menu item. Each page will have the same format based off this menu.
It's unclear what you're trying to achieve, but as far as I can tell, you might need to start by trying to identify what those pages are and what parts they consist of (views, blocks/regions, nodes etc.) and then theme accordingly. Take a look at a diagram here https://www.drupal.org/docs/7/theming/overview-of-theme-files to get a better idea of how this all works together.
Once you know what you're dealing with, look for customization options. It can be anything from theme settings to views configuration, working with css, blocks, custom page/node templates (see here https://www.drupal.org/docs/7/theming/template-theme-hook-suggestions) etc.
If you need more info - please provide more detail, like links/screenshots of the pages that you need new templates for as well as explanation of how those 'templates' will need to look like
So basically once you choose The book menu item "Topics", you arrive to the topics page with the navigation menu (shown in the screen shot above).
When you choose one of the images in the thumbnail gallery (first screen shot), you are supposed to arrive to the child page for that menu item chosen (sub book page). All the sub book pages (are supposed to have the same format displayed in this basic sketch screen shot displayed below).
So for that, I am required to make a template for these sub book pages.
I just realized too that these sub pages would probably share the same parent of topic, so most likely, I have to create a template based off the action that "topics" = parent page ?
Screen shot of sub child page for topic chosen/ sub book page
thank you for your patience guys!
Okay, after working with my new partner, we discussed trying to create a view that will have headers:
<h1>**Topic Overview**</h1>
[user content input under title] <br><br>
<h1>**News and Initiatives**</h1>
[user content input under title] <br><br>
<h1>**Resources**</h1>
[displayed depending on tag chosen to display]
We just cant figure out how do we keep these headers constant, but allow the content to change, or be changed for every sub nav item (child page from nav menu above).

nav menu item is jumping on a different menu item in wordpress

I am maintaining a wordpress page which is using devdmbootstrap3, and has a navigation bar which has 5 different menu items on it. There is a page name "Our Team" and when inspect the element, it has "post-type-archive post-type-archive-team" and I guess this page is behaving as a post-page, on the other hand there is a main "New & Articles" page which is the main posts page( it was chosen as a Posts Page on static front page). When I click on "Our Team" on navigation bar, it jumps on News & Article first, I made a fix with Jquery with removing all those div classes that I mentioned above and fed regular page features but i don't think that is a good practice, and it seems like it is jumping on news & article menu item first then appears on our team menu item.
It is acting like a child menu of news&articles page,.
What i tried so far is:
1- I checked Admin>Pages>Our team page if it has a parent page or not
2- Made a Jquery removeClass and addClass to give a regular page behaviors
3-Disabled plugins and tried one by one if there is any conflict.
For your information, this is custom wordpress page.
Did anyone have the same issue that can lead me a good, long term solution? Thanks for your time and attention.

Blog posts not highlighting the active menu item

Ok, I know that there are several other questions on SO regarding this topic. By now, I have probably read all of them. I have been researching this for a little over two hours now and I am coming to the end of the road (about to give up!)... So, here I am on SO finally asking the question to involve other sharp minds.
I am helping build this Wordpress site: greatman.us. And, the Posts page is located on a page called "Blog." The "active" menu item is highlighting properly on PAGES, but when you go to a POST, the "Blog" menu item is not longer highlighted (i.e. NOTHING is highlighted in the header menu).
There is no way in Wordpress - as far as I'm aware - to create a "parent" for a blog post. This option is only available for Pages. I need to be able to have the "Blog" menu item stay highlighted when I am viewing a BLOG POST.
For a general example:
mywebsite.com/blog/ <--- menu item "Blog" is highlighted
mywebsite.com/blog/post223 <--- menu item "Blog" is no longer highlighted
I am proficient with CSS and HTML, but not with PHP. So, if this is a PHP fix, please dumb your answer down as much as possible.
I have read tons of other articles about this online and it seems to be a common issue, with most people not knowing how to code with PHP.
I am using a custom theme, called Divi. And it is missing some of the CSS elements that other forums and sites I have read said that the style.css should have. This is another reason I am coming to a dead end. Please help!
By the way, one WORKAROUND I discovered is to add POSTS as sub-menu items to the "Blog" page that you made in the Wordpress Menus area (in the admin back-end). Then, use "display:none" is CSS to remove the submenu from being displayed to the public. This causes two main problems, though: 1) You can never have any other sub-menu items, because they won't be displayed. 2) You have to manually add every single blog post to the menu as a sub-menu item. This will eventually make your menu super long assuming you are a regular blogger. It is also a hassle.
Within your CSS, you will also need to add .current-page-ancestor with the same attribtues as your current menu item.
Something similar to below:
.current_page_item, .current-page-ancestor {
// Some attributes
}
This is guessing that you have use wp_nav_menu() though. If not then I'll need to see what code you have used to generate the menus.

Wordpress link different color custom menu

I'm currently working on a Wordpress website with an custom jQuery menu. And everything is working fine except for one thing. I want to add a active class to an menu item that corosponds with the current page.
So basicly when the viewer is on the page "catering" I want the catering menu button the have an different style then the rest. But because it's wordpress I can't put in the html so I guess it has to be done with PHP but that's really not my thing.
So I was wondering if any of you could point me in the right direction. Here is the link to the website http://no-illusions.nl/projecten/kokaanhuis/wordpress/# no pages are currently working but when you hover over a button a brown layer appears, I want that layer to be static (when it's down) on the current home page but canĀ“t figure out the best way to do it.
Use wp_nav_menu (http://codex.wordpress.org/Function_Reference/wp_nav_menu). It attaches a current-menu-item class, as well as a few other useful classes (current-menu-ancestor, etc) for styling. Plus you'll also be able to easily edit the menu with the menu admin page.

How can I hide pages from menus in WordPress?

I only want to show the pages that do not have parents, and link the other pages from their parent pages.
I want to have a simple main menu: Home | Pages | About | Contact
About 8 pages are linked from the Pages page. At the moment, the menu has 12 items, which deforms the layout pretty badly.
I have tried making the pages private, unpublished, and other options, but that doesn't seem to be the way to do it. Is there a way I can just have only parent pages linked in the main menu?
You can edit the menu (under the appearance tab in the dashboard). (you may need to add a new menu and assign it to the main navigation menu. It sounds like you have the defaulted menu set-up.
Once you've added a menu and assigned it to the main navigation, you can uncheck "automatically add top-level elements" or its equivalent, and add/remove menu items. You can also change their hierarchy (independent of actual page hierarchy).
It's all so easy these days. Just Go to appearance>menus>click the little triangle next to the listed page name>click remove> don't forget to save ... all done!
Maybe you didn't set up a custom menu yet. Set up a custom menu first with the desired pages / links. If it doesn't show on your site, check custom memus are enabled in your theme.. this will help you setting up a custom menu: http://www.wpbeginner.com/wp-themes/how-to-add-custom-navigation-menus-in-wordpress-3-0-themes/

Resources