website I am talking about: http://www.formunddrang.de
When a menu item is active I am using the tag li.selected_page to set the color of the menu item to blue.
In order to link to a category instead of a wp-page I am using the plugin "Page Links To" which allows me add a link instead of a page to the menu. This menu item does not have the li.selected_page tag - it does not seem to know at all when it has been selected.
Does anyone see a way to access the status of the "Einblicke" menu item so i can make it blue when it is active?
Thanks a lot!
You might do it via jquery:
var url = window.location;
// Will only work if string in href matches with location
$('#cms-nav-top-menu a[href="'+ url +'"]').addClass('active');
// Will also work for relative and absolute hrefs
$('#cms-nav-top-menu a').filter(function() {
return this.href == url;
}).addClass('active');
Give it a try and tell me if it's working.
Related
I have a toolbar with 3 menu items and I want to achieve that if I click on one of them the text would change it's color. The closest I get to achieve this is I used focus in css but it's not the best because if I click somewhere else it's gone. Is there any possible way to achieve this?
The admin should be in green color as well till I click on another menu item e.g. time management.
If you follow a pattern for url then it's possible
For Example
Admin has link /admin
Users has link /admin/users
Logs has link /admin/logs
Then in your navbar use ng-class="getClass('/admin')". Then you can use function something like below
$scope.getClass = function (path) {
return ($location.path().substr(0, path.length) === path) ? 'active' : '';
}
Refernce: SO:how-to-highlight-a-current-menu-item
I have a 'Meet Our Team' section on my home page and I want to be able to click a menu button 'Meet Our Team' and be directed there, even if I click it from another page.
My problem is that if I use #meet_our_team as the URL, the link doesn't work from another page. However, if I use a relative or absolute path plus '#meet_our_team' (e.g. home/#meet_our_team), the functionality works but it becomes styled like the 'Home' button when on the home page (i.e. the button looks pressed).
This is because the CSS class 'current-menu-item' is applied to the list element.
Is there a way I can have a working button that also styles correctly? I assume if I can suppress aria-current, it would work but I don't know if that is possible.
It was a simple enough fix. Simply add the below to Additional CSS. On my first attempt, I didn't specify 'a' and so it didn't work
#menu-item-1745 a {
color: #5a5a5a;
}
Connected to this question: https://wordpress.stackexchange.com/questions/300387/default-menu-items-for-custom-theme-but-easily-delete-able-customize-able-by-u
So, using this bootstrap template as an example again: https://blackrockdigital.github.io/startbootstrap-creative/
the menu items would be connected to the sections so when clicked on they are scrolled to. However, how would I dynamically link in a ux/ui friendly way the menu items to each respective section so that when user goes to change an item or menu they would link back to that section?
In other words, I would have a default easily change-able menu and menu items come with the theme. However, how would I go about making it easy for the user to connect a different menu item to the same section? And how would I dynamically connect a menu item to said section?
Assuming your theme uses the native WordPress menu page for building custom menus for your respective website, this is relatively easy. In order for this to work properly, there will need to be some custom JS added to your page to handle scrolling down to a given section.
Sections themselves will need to also have a unique identifier, so the JS provided can actually scroll to the given section. Here is an example on how to accomplish this:
We will start by creating and editing a WordPress menu. Be sure to set up the links from the menu items so they will work with the upcoming anchor scroll-ability. These url's MUST match the ID of the section on the front-end you are wishing to scroll to.
We now can utilize jQuery to trigger a click function, which will scroll the user down to the respective section on the page. Here's an example of a function you can use. Remember, some formatting of the function will be required as you need to make sure the parent wrapper of your menu has the ID which the function is looking for. Here's the function:
$('#navigation a').on('click', function (e) {
//Stop page from doing default stuff
e.preventDefault();
//Get content panel ID from clicked element
var contentPanelId = $(this).attr("href");
//Animate to clicked element
$('html, body').stop().animate({
scrollTop: $(contentPanelId).offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
Now, to output the menu inside a template, we will go ahead and use the wp_nav_menu() function: https://developer.wordpress.org/reference/functions/wp_nav_menu/ . Be sure to wrap the use of this function around the a parent DIV with an ID matching what's being called inside your JS function (in this example, the ID is "navigation"). Here's an example of the expected markup (remember, I've named my menu menu-test in the back-end):
<header id="navigation" class="site-header" role="banner">
<?php wp_nav_menu( array('menu' => 'menu-test' ) ); ?>
</header><!-- #masthead -->
That should be it! Obviously additional styles are going to be required to lay out the menu however you'd like it to appear on your page. The most important to remember for this concept is that the markup elements' ID's MUST match the hash'ed out URL of the menu item. If there's no div on page with respective ID, the JavaScript will have no way of knowing what element to scroll to.
Here is a live example of the menu functioning the way you want it to on my personal portfolio.
I'm looking to have a image that when clicked loads up a node into a colorbox.
So far I'm using Colorbox and Colorbox_node modules, and have a block with this bit of code
< a class="colorbox-node" href="cast?width=500&height=500" >
Link to my node alised 'cast'
< /a >
The text link when clicked acts exactly as I want by poping up a colorbox. Though if I replace the text with an image link like:
< a class="colorbox-node" href="cast?width=500&height=500" >
< img src="/images/cast.png" / >
< /a >
The image displays, but is not a clickable link.
Have I screwed up somewhere or is there a different way all together of doing this?
Create new View:
Add following fields in Order:
Nid
Title
Image
Body
Title: Config
Formatter: Image
Image Style: thumbnail
Link image to: Nothing
Click on REWRITE RESULTS and Select Checkbox
Output this field as a link
Set Options As follow:
Link Path: node/[nid]/?width=600&height=600
Checked Checkbox "Use Absolute Path"
Link Class: colorbox-node
Alt Text: [title]
Save your view and run view.
Click on any of your image to load the whole node content in Colorbox.
Note: You must installed Colorbox, colorbox_node module.
The answer by AshwinP works, but remember to add a field of type Content: Nid without label and "exclude from display" checked, and put it before the image that you want to link, otherwise it will be impossible to link it to the node. Also the Image style and the alt text doesn't matter what you put in there, just go with your own settings.
This isn't working anymore, seems that now it's need to add data-options to the link :(
I have created a layout in Wordpress with a plug-in called builder. I then have a page that uses this layout. The layout contains a area with tabs.
When the user clicks on a link in my main menu he is taken to this page with the first tab open. Can I change the link to take him to the second tab instead?
Actually the menu looks like this
About us
-Overview
-History
-Contact
If the user clicks on about us or overview I want him to go to the first tab.
I guess you must create something with an HTML anchor OR
$(document).ready(function() {
$('#tabs #2nditemid').click();
});
OR
$(document).ready(function() {
$('#tabs li').hide();
$('#tabs li.2nditemid').show();
});
This may vary a bit but may lead you somewhere
this must be specific only to where you have the tabs... so best is to create a page theme only for this specific page to avoid extra jquery in all pages