I've used custom CSS to create a strike-through effect for active menu items on my wordpress site: http://www.sekoul.com/
This is the code that I use to do this:
/* active menu item color */
.et_color_scheme_orange #top-menu li.current-menu-item > a {
color: #4a4a4a !important;
text-decoration: line-through !important;
}
However, on certain pages (ones which are generated by WP plugins), this effect doesn't work: http://www.sekoul.com/reading-list/
When I inspect the code, I can see that the ID's are not the same on these pages, but I can't seem to figure out which ID/class to apply the effect to. Any idea why this is happening / what I can do to select the appropriate ID/class ?
It's missing the .current-menu-item class because you're using a custom link. I'm assuming that "BOOKS" is a custom post type archive page, right?
If you need to have an active state on a custom post type archive page, you could try this solution that worked great for me: https://stackoverflow.com/a/22602901/4303385
It'll add a metabox on the Appearance > menu with custom posts type archive page with active state support.
Related
I want to style the folder item of the secondary nav bar of this website I am designing with Jaunt template (still in progress. Password: edizioni_test):
https://tan-perch-9lhf.squarespace.com
I want the text ITA / FRA to be bold. I tried to style it with this css code:
span.Header-nav-item.Header-nav-item--folder a {
font-weight:900 !important;
color:#777777 !important;
}
span.Header-nav-item.Header-nav-item--folder a:hover {
color:#cccccc !important;
}
but I am ecountering this issue: when I click on the ITA / FRA link, this page opens:
issue: this folder does not contain any pages
How to fix it in order to click on the ITA / FRA and having it linked to the home page? Thanks
The generally-suggested method to disable / turn-off the click / link on navigation folders in Squarespace on various Squarespace template is to use pointer-events:none on the target element. On some templates, this requires then setting pointer-events:all on subsequent child elements, but not in your case.
In your case, we can simply target the specific element and leave it at that (sibling elements will remain clickable). Enter one of the following via the CSS editor:
a[href='/ita-fra'] {
pointer-events: none;
}
OR
.Header-nav-folder-title {
pointer-events: none;
}
The first method above targets the link via URL and specific to that link. The second is a more general rule that will apply to other such folders you may add to the header.
Note that this doesn't prevent "tabbing" onto the target link when using the keyboard or possibly assistive technologies, though it does typically prevent "executing" the link. To fully remove the link would require use of Javascript, but as I said, the CSS-only method is generally accepted in the Squarespace community.
I'm having a problem with WooCommerce. I'm developing a website with Divi and WooCommerce. The buttons on the website have a specific style and I want that in the page products the buttons have the same style but I can't do it.
I installed the WooCommerce Color plugin but it doesn't work.
I have a child theme and on the developer console I looked for the specific class of this button and I found this class: ".single_add_to_cart_button button alt"
So in the CSS of the child theme I added:
.single_add_to_cart_button button alt {
color: #00000 !important;
}
But it doesn't work either.
This is the website: http://centromindfulnessmadrid.com/ and I want to change the buttons on these pages: http://centromindfulnessmadrid.com/producto/mindfulness-retiro-de-1-dia-sabado-24/ The button: "Añadir al carrito".
Thanks a lot!
I appreciate this is an old post, and it looks like you have resolved it, but the alt class would require a period as it is not an HTML element.
You will also have an inheritance issue as WooCommerce is very strict.
This would be closer to what you need, but you can probably narrow down the classes to one or two:
.woocommerce .single_add_to_cart_button button .alt {
color: #00000;
}
I have a basic menu and some of the menu items have submenus.
I have very little experience with wordpress and don't have time to dive deeper into the details right now. So my question is, what is the simplest way to highlight the top menu item when the use navigates to one of the submenu pages. (I tried using both javascript and also pure css to set the color property by element id and by using the "current-cat-parent" class but neither worked).
Any help is greatly appreciated.
Note: I am using a theme called chameleon.
you can assign current-menu-item class to .current-menu-ancestor class like
.main_menu li.current-menu-item a, .main_menu li.current-menu-ancestor a{
color: #777777 !important; /* highlight color */
}
It will highlight parent page menu
Please refer this page
You can insert the following code in the theme’s footer.php file right before the closing body tag .
<!-- Highlight parent page link when on child page -->
<?php if (is_page()) { // displaying a child page ?>
<script type="text/javascript">
jQuery("li.current-page-ancestor").addClass('current-menu-item');
</script>
<?php } ?>
The beauty of this is its in PHP so the code's dynamic. What it does is simply add another native WordPress nav li class that makes the link of the current page active.
I wrote a short post here explaining how it works: How to keep parent page navigation link highlighted when viewing a child/sub page!
Feel free to let me know if you have questions about it.
I had a bit of a problem editing this but found an easy solution.
I am using the Wordpress Storefront theme, just paste this into your child theme's style.css file:
li.current-menu-parent >a {
color:red !important;
}
Interesting. Your solution highlighted the parent but not the current child. But it put me on the right path and in the end, this was what I needed.
li.current-menu-parent >a, .current-menu-item >a {
color: red !important;
}
WordPress 5.7
Tested and Working, 2021
Year 2021. If any of you still looking for the solution, then here it is.
This will highlight the parent and its child. If no child menu then the parent will get highlighted. Remember !important is required.
.current-menu-parent > a,
.current-menu-item a {
color: blue !important; /* Important is required */
}
.current-menu-ancestor did not work for me. .current-page-ancestor did.
This worked for me. The following CSS will allow you to style the active menu... down to three menus deep.
.current-menu-ancestor{ background:RED !important; }
.current_page_parent{background:GREEN !important;}
.active{background:YELLOW !important;}
The menu button that represents the currently active page will be
YELLOW,
If the button representing the currently active page is nested, its
parent will be GREEN... else the Top-Level button on your menu will be GREEN.
And most importantly (no matter how many levels of nesting appear in
your menu) Any element with a class of .current-menu-ancestor
will be styled with a RED background.
It is also possible to ONLY style the .current-menu-ancestor and any parent menu-item will be styled.
I am currently using wp_nav_menu to generate my nav menu. Although everything is working and menu highlighting is working, how do you get child pages to be highlighted as well?
For example, I have a menu item named "Page" and it has 3 child pages under that. So when I am in any of the child pages, I want the main Page to still be highlighted...how is that possible with using wp_nav_menu..?
The body_class function which WordPress has can help you out here.
http://codex.wordpress.org/Function_Reference/body_class
What you'll want is current-menu-parent which you can utilise in your CSS. Not particularly well documented as far as I can tell, but this article helps:
http://www.designisphilosophy.com/tutorials/highlight-current-page-or-category/
Wordpress will give the current page the class 'current-menu-item' so just add the css you want to that. e.g.
.current-menu-item {
background: #0077CC;
}
Edit:- You can target the child menu items with
.sub-menu .current-menu-item {
background: #0077CC;
}
Edit2:- Use this to hilight the parent menu item when on a sub page
.current-menu-parent {
background: #0077CC;
}
What is the easiest method of highlighting the current page from a nav menu in Wordpress?
If your top nav links are manually inserted in your theme, you can do something like this:
<a href="page-link" <?php if(is_page('page-name') : ?>class="highlight"<?php endif; ?> >Link text</a>
I do something similar to this in a theme where certain pages and categories have special headers. There are a few conditional functions that help with this:
is_page('page-name')
is_category('category-name')
is_home()
is_front_page()
Edit: Didn't see the comment about it being dynamic WP links. You might still be able to use these functions if the query data you get back contains the page slugs.
You might instead consider using the get_pages() function and loop through it manually, doing an is_page() check on each one to see if the current page ID matches the ID of the page you are at in the array.
Current page highlighting sometimes depends on if it happens to be implemented in the CSS of the theme you're using, but this should work in a basic theme.
<?php wp_list_pages('title_li=&depth=1&'.$page_sort.'&'.$pages_to_exclude)?>
CSS: Change the color in the CSS to whatever highlights well against the background of the menu bar or background image. Change the # to the container of the list pages call above.
#menu ul li a:active, #menu ul li.current_page_item a
{
color:#000;
}
You can use the dtabs plugin, which does just that, for both pages, categories, home, and other types of pages.