Someone was able to so quickly help me with a problem I'd spent hours and hours on, that I'm hoping I'll get lucky and someone can point me in the right direction on this one, too.
I didn't see anyone else with quite my issue here - and I'm new to working with WP templates instead of plain old HTML/CSS/JS stuff.
Basically - on a site we did (www.opted.org) with a purchased WP theme - I can't get the mobile version collapsible menu to stop defaulting on page load to the last item in the Main Menu.
So instead of something that makes sense - like About ASCO, or even being able to add "Select Page" - the drop down shows "-- past issues"
I don't care how I fix it really, but the client just doesn't want that page to be the default. I tried adding an extra menu item at the end called "Select Page" with an href='#' and using CSS to hide it on screens above 480px - but I couldn't get it to work no matter how I tried to refer to it.
I feel like this should be easy - but I don't know where to set the selected LI among the many WP files.
Thanks!!
I had a look at the plugin.js file on the site www.opted.org.
On line 22, there is 'header' : false // Boolean: Show header instead of the active item
and on line 41 there is jQuery('<option/>').text('Navigation')
Try setting line 22 to true, and text('Navigation') to your 'Select Page' if you prefer that over the text 'Navigation'
Or, according to the tinynav.js page (http://tinynav.viljamis.com/), you can customize that as an option like this:
$("#nav").tinyNav({
active: 'selected', // String: Set the "active" class
header: 'Navigation', // String: Specify text for "header" and show header instead of the active item
label: '' // String: Sets the <label> text for the <select> (if not set, no label will be added)
});
In your main.js file, your calling it on line 14. You should add that header: 'Navigation', option there.
It's hard to answer this question without knowing how the theme you are using works. However, you can certainly change the selected attribute using javascript.
Here's the code you would use to set it to 'About Asco' using jQuery:
jQuery('.tinynav').val('/about-asco/')
alternatively (a little clearer, but more verbose):
jQuery('.tinynav option:first').prop('selected', true);
Related
I'm not sure how I explain this... :)
I am using symfony, twig and bootstrap to make a basic registration form on my website.
I have a checkbox at the end which the user must tick to accept the terms and conditions. the label for this checkbox includes HTML (the tag) which Bootstrap (or Twig) escapes, so I have to use a custom label next to the checkbox:
<div class="row align-items-center"> <!-- this is a workaround, may not be best practise -->
{{ form_errors(form.acceptTerms) }}
{{ form_widget(form.acceptTerms, { 'attr': {'form.acceptTerms.errors': ' '} }) }}
<label class="form-check-label" for="acceptTerms">I have read and accepted the Terms and Conditions</label>
</div>
Bootstrap renders the label as part of the form_widget twig element rather than the form_label , and the form_error is also rendered within the form_widget when there is an error. So, before, my label would just be displayed in plaintext, i.e. the html <a> tags would be visible to the user. But of course, since I am showing a custom label as well as the widget which includes the label, I have to set the widget label to ' ' (empty string) so now only one label is shown.
This work perfectly, UNTIL there is an error (i.e. the user doesn't tick the box and thus cannot register).
Then the error displays within the form_widget which is next to my custom label (they are in a bootstrap row div) and it ends up pushing my label to the right, when I want the error to be above the label. I tried adding {{form_errors(form.acceptTerms) }} above it as you can see, but that just displays the error BOTH above and next to the label. This is what it looks like with the above code in place:
ERROR you must accept the terms and conditions!
[ ] ERROR you must accept the terms and conditions!I Accept the **Terms and Conditions**
then this is what I WANT it to look like:
ERROR you must accept the terms and conditions!
[ ] I accept the **Terms and Conditions**
This seems like it should be a really easy thing to do, I don't know why its this difficult.
I need to somehow stop bootstrap from rendering the form_error and form_label within the form_widget .
Thanks
In Symfony 4.1 the bootstrap form theme was updated to be compliant with the WCAG 2.0 standard. As a result, the error for a field is no longer displayed with form_errors but within your form_label. If you separate your widget and label you will notice.
More information about this change can be found here.
In order to fix your problem just get rid of form_error (you don't need it any more) and only use form_label and form_widget. If that doesn't satisfy your needs or if you do not like the new behaviour for bootstrap 4 forms in symfony 4.1, you can always use an older form theme, or create your own.
If you decide to create your own form theme make sure to update the file twig.yaml file to something like this:
twig:
form_themes:
- form/custom_form_theme.html.twig
In this case, your custom form theme is strored in templates/form/custom_form_theme.html.twig
In my rails app I have a bootstrap nav menu with five items, each with a welcome/_____.html.erb document to which the menu item is linked (e.g. welcome/personality, welcome/game, etc.).
I put this as the link to the new page for the first menu item:
Know Your<br>Personality
And it works fine, but trying to click on the next menu item using the same href="welcome/game" link gives me an error message indicating it is trying to access welcome/welcome/game.
This is in my application.html.erb file, so it's not something I can change from page to page. Can anyone see a way to fix this issue?
You need to change your href to /welcome/personality. Notice the / in the front which tells your router to use the root_url and add what you have, otherwise it will keep adding /welcome/welcome/welcome...
I have a nav.shtml file in which I am setting a class on the current menu item as follows:
Faculty'>http://root/level1/level2/page.shtml">Faculty & Staff
This is fine for the top-level pages, but a few have subpages and I would like to be able to set the class on the top-level menu item if the current page is a subpage as well. E.g. There is a "Faculty/Staff" menu item which goes to an overview page, faculty.shtml, then there are some links on that page to individual faculty/staff pages in a subdirectory. If I'm looking at one of the individual subpages, I still want the class to get set on the "Faculty/Staff" menu item.
So, I need something like:
"if $DOCUMENT_URI=/level1/level2/page.shtml *or* if $DOCUMENT_URI=/level1/level2/level3/*.shtml".
I can't seem to figure out the correct syntax... Can anyone help me out?
The following should work for you, based on the example provided:
<!--#if expr="$DOCUMENT_URI = /\/level1\/level2\/page\.shtml/ || $DOCUMENT_URI = /\/level1\/level2\/level3\/.*.shtml/" -->
If you go to www.lindysez.com and click on the top level navigation links, you'll notice that position presence is indicated by a slightly darker background (same as hover state). This works for each of the links EXCEPT "Tips & Techniques".
If I look under the hood, I noticed that the "current_page_item" class isn't being added to the parent of the "Tips & Techniques" menu item when you go to http://www.lindysez.com/tips
Also, curiously enough, when on the tips page, the parent of the "Blog" navigation item gets the class "current_page_parent", which is neither expected nor desired. This is harmless from a UI standpoint, but probably an indication what the underlying problem might be.
Anyone know why the "Tips & Techniques" menu item isn't getting the "current_page_item" class once selected?
Update: Directed #user2019515's comment below
Thanks for the nudge in this direction, it does seem like I could create a workaround that would fix this. Couple things however.
This treats the symptom of the problem rather than the root. I'd like to figure out how to get wp to just add the "current_page_item" class natively. Any idea what's causing this? I think it may also be related to another problem I'm having which involves "tips" not showing in the RSS feed. I posted another question about that, but haven't seen any answers...
https://stackoverflow.com/questions/15980846/custom-post-type-not-showing-up-in-wordpress-rss-feed
Even as a workaround, I'd rather try to avoid a solution that relies on hard coded "menu-item-##". My development and production servers both have different ID#'s. I know I can account for this, but I hope there's a better, scalable workaround.
The code you provided didn't work for me, not that I can find any fault in it, nor are there any errors. Seems like it should work, but just doesn't. I even tried creating a very simple version that would add a class to all the items, but this too isn't executing. Here's that code.
function add_class_to_wp_nav_menu($classes, $item)
{
$classes[] = 'classy-class';
return $classes;
}
add_filter('nav_menu_css_class', 'add_class_to_wp_nav_menu', 10, 2);
Thanks so much for your help!
The Tips page is a post archive page, it shows posts rather than a normal page that's why the blog was being highlighted. You can easily fix this issue by adding the following custom CSS to your style.css file.
.post-type-archive-tips .menu-item-23{
background:url(images/nav-hover.png) repeat-x;
}
You'll need to loop over your menu, by default the current page class is added to the blog page because in the end the custom posts.
//Change current_page_parent for custom post type
function remove_parent_classes($class)
{
// check for current page classes, return false if they exist.
return ($class == 'current_page_item' || $class == 'current_page_parent' || $class == 'current_page_ancestor' || $class == 'current-menu-item') ? FALSE : TRUE;
}
function add_class_to_wp_nav_menu($classes)
{
switch (get_post_type()) {
case 'portfolio':
// we're viewing a custom post type, so remove the 'current_page_xxx and current-menu-item' from all menu items.
$classes = array_filter($classes, "remove_parent_classes");
// add the current page class to a specific menu item (replace ###).
if (in_array('menu-item-14', $classes)) {
$classes[] = 'current_page_parent';
}
break;
case 'tips':
// we're viewing a custom post type, so remove the 'current_page_xxx and current-menu-item' from all menu items.
$classes = array_filter($classes, "remove_parent_classes");
// add the current page class to a specific menu item (replace ###).
if (in_array('menu-item-23', $classes)) {
$classes[] = 'current_page_parent';
}
break;
}
return $classes;
}
add_filter('nav_menu_css_class', 'add_class_to_wp_nav_menu');
There's just one custom post type in the function, but I'm sure you can figure out how to add more. Got any questions, feel free to leave a comment! :)
Is it possible to force the sitemap control to render the menu when the current action is not listed in the MVC.sitemap file?
I have a simple top nav. When the current action is in the sitemap, the call to .Menu() will render the correct <ul><li>.. data. However, if I got to a page that is not in the sitemap such as /Home/Login, then it will not render any html at all (not even a comment, just empty space). This isn't an [authorize] issue; the menu is fine when i'm in '/Home/Index'.
It seems like it should render what was requested, but just not set the IsCurrentNode and IsNodeInPath properties. Here is the call I am making
<div id="main-nav">
#Html.MvcSiteMap().Menu(0, true, true, 1)
</div>
The Mvc.sitemap file:
<mvcSiteMapNode title="Home" controller="Home" action="Index">
<mvcSiteMapNode title="Form New Human" controller="Person" action="Create"/>
<!-- there is no mvcSiteMapNode for "Home" "Login" -->
</mvcSiteMapNode>
Found the way around it. It apparently isn't a built in extension method, or at least I couldn't find one. You could call Html.MvcSitemap().Menu(Html.MvcSiteMap.Provider.RootNode,...) but I didn't want to instantiate the helper twice.
<div id="main-nav">
#{
var sm = Html.MvcSiteMap();
#sm.Menu(sm.Provider.RootNode, true, true, 2); // 2 levels (home, plus main nav)
}
</div>
Looking around in the disassembly seems to show that it works a little like this:
You really need a starting node
If you don't give it one, it tries to find one based on the current node
plus restrictions (forward searching, depth restrictions, etc)
if you want nodes from level 1, you have to know what level you are on
Since that returns null, starting node is null, which means the helper writes an empty string
There may be a combination of tricks, or an overload or two, which can be finagled into doing this, but I can't find it right now. This works for my needs (simple top menu). There has to be a simpler way to do this, something with wild cards, or route based, with a closest match thing going on. I figured menus were a fairly standard part of a web app, and this would be covered :)