Hi I am trying to target the navigation CSS on all of my woocommerce pages to change it from (the parent css) white to black. I basically want all the menu items to be black on all shop pages.
.woocommerce #top-menu-nav #top-menu li a{ color: #000000 !important; }
.woocommerce #top-menu-nav #top-menu li a:hover { color: #cea54a !important; }
However, it only displays on the product category page but actually not on any of the shop pages. Is there something else i should add to the above to reflect this change?
Thanks
To target the elements of your menu on woocommerce pages, you should try something like this (assuming that #top-menu is the ID of your menu:
body.woocommerce #top-menu a,
body.woocommerce-page #top-menu a {
color: #000 !important;
}
Hope this helps
Related
I'm trying to change the color of the current page number on my woocommerce site. The site is using the Astra theme (free version) and elementor (free) but I cannot seem to figure out how to change the color using the additional CSS option.
I want to change the color of the page-number.current to white (#ffffff) AND change the hover color to white as well. I would also have to change the hover color of the prev.page-numbers AND next.page-numbers to white as well.
For some reason, these are the only buttons that do not adapt to the global colors of the website. I know which global color I would have to change, but this will affect all colors on my website - that's why I'm looking for some help.
You can use the body > Page ID in a CSS code.
Here is the example code.
body.page-id-15{background-color:#eee;}
Let me know if that helps!
Thanks for helping!
I ended up adding the following code to the extra CSS option:
/* Woocommerce current page number color to white*/
.woocommerce nav.woocommerce-pagination ul li span.current {
color: var(--ast-global-color-6);
}
/* Woocommerce page numbers hover color */
.woocommerce nav.woocommerce-pagination ul li a:focus, .woocommerce nav.woocommerce-pagination ul li a:hover {
background: var(--ast-global-color-0);
color: var(--ast-global-color-6);
}
I have created two extra tabs in woocommerce product pages, however the text now breaks if you move to a smaller screen, if there away to avoid this, i also need to change the text colour.
http://allabouthome.co.uk/product/butler-style-writing-desk-with-foldable-legs/
After a bit of research i managed to use this code to style the tabs, i also removed the reviews tab as not needed and seems to display the text fine now!
/* active tabs */
.woocommerce-tabs ul li.active a {
Background-color: #99f7ab;
}
/* inactive tabs */
.woocommerce-tabs ul li a {
Background-color: #70be51;
}
/* active tabs text */
.woocommerce-tabs ul li.active a {
Color: #60695c !important;
}
/* active tabs text */
.woocommerce-tabs ul li a {
Color: white !important;
}
I've almost successfully changed the default white text and gray background menu color in the TwentySeventeen theme for WordPress by adding the lines below to a childtheme style.css stylesheet.
Menu ScreenShot
However, the menu still very briefly displays the default menu color as I mouse off any given selection in the sub-menus. I'm a hack when it comes to CSS and have spent hours trying to find a solution on line. Any suggestions? Thank you very much.
/*Change Drop Down Menu and Sub-Menu Hover and Text Color */
.menu a:hover,
.menu li:hover>a {
background-color: rgb(220, 225, 200) !important;
/* light green */
color: #000000 !important;
}
Seems like that because that there are 2 backgrounds, one on the li
and second on the a
The grey background is on the li so you just need to "reset" it
.main-navigation li li:hover,
.main-navigation li li.focus {
background: none;
}
I'm working on this Wordpress theme and I'm adding highlighted menus for the current pages using a darker color.
The thing is, I figured out how to highlight the current link, but when I navigate to the "Sample Page" (which is the one who have sub-menus), all the submenus listed get highlited as well. And I don't want that.
The URL -> http://experiencias.freeserver.me/
The CSS I added:
.nav .current-menu-item a{
color: #fff;
background-color:#bc3031;
}
I also tried this to see if it works, but it was not successful
.nav .sub-menu {
display:none;
}
try this
.nav .current-menu-item > a{
color: #fff;
background-color:#bc3031;
}
this will only highlight direct child not nested elements.
I'm building a wordpress theme. my menus are getting classes from wordpress, like: .current-menu-item, .current_page_item & I'm using them to customize my active menu background color:
.current-menu-item a, .current_page_item a {
background-color: #ffef38;
}
but the problem is I've a secondary menu in footer, which is getting this style from css too. css for my footer is quite simple:
#footnav {
float: right;
}
#footnav li {
display: inline-block;
border-right: 1px solid #fff;
padding: 0 0.5em;
}
#footnav li:last-child {
border-right: none;;
}
so my question is, how can I remove the active menu styles from my footer menu only?
Either configure the styles to whatever you want on the footer:
#footnav .current-menu-item a, #footnave .current_page_item a { background-color:transparent; }
or make your initial selector more specific:
nav.myclass .current-menu-item a, nav.myclass .current_page_item a {
background-color: #ffef38;
}
Since you sound like you're just concerned about the styling, I wouldn't think about touching the PHP that actually generates those classes in the first place, since they may be relied upon for other things (e.g. javascript.)