Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top .main_color .product[class*="product_cat-"] a .woocommerce-loop-product__title {
	color: #856c4d !important;
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,

Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi,

Great, I’m glad to hear that you got things working. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hey MikeTandySwag,

Thank you for the inquiry.

1.) Yes, it should be possible with a few css modifications. You can start with the following code.

#top #header  #header_main {
    width: 94%;
    margin: 0 auto;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 30px;
    margin-top: 30px;
}

2.) To assign different menus for each page, you have to install a separate plugin. Please try one of the plugins below.

// https://wordpress.org/plugins/if-menu/
// https://wordpress.org/plugins/user-menus/
// https://wordpress.org/plugins/different-menus-in-different-pages/

Best regards,
Ismael

Hi,

Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi,
For the cart page try this css:

#top.woocommerce-checkout #main.all_colors a {
    color: #856c4d !important;
}

for the homepage prodct image titles this css stil works when I test it:

#top .main_color .woocommerce-message a,
#top.home .all_colors .av-image-caption-overlay-center strong {
	color: #fff !important;
}

when I search your css file I don’t see that it has been added, please try adding it again and ensure that the closing bracket is included, or include a admin login so we can check.
Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.

Best regards,
Mike

Hi,
Thanks for the screenshots, this css addresses the three points above:

#top .main_color .woocommerce-message a,
#top.home .all_colors .av-image-caption-overlay-center strong {
	color: #fff !important;
}

#top.woocommerce-checkout .all_colors a {
color: #856c4d !important;
}

Best regards,
Mike

Hi,

I would like to eliminate the lines around the images and align the images to the header

You can remove the border and space around the gallery with this css code.

#top div .avia-gallery .avia-gallery-big {
    border: 0;
    padding: 0;
}

#top div .avia-gallery img {
    padding: 0;
    border-radius: 0;
    border: 0;
}

Thank you for your patience.

Best regards,
Ismael

Hey Silje,

Thank you for the inquiry.

The “soldout” container is being covered by the product image. You need to increase the z-index to adjust the stack order of the element.

.soldout {
    padding: 3px 8px;
    text-align: center;
    background: #222!important;
    color: #fff!important;
    font-weight: 700;
    position: absolute!important;
    top: 6px;
    right: 6px;
    font-size: 12px;
    opacity: 1!important;
    display: block!important;
    z-index: 100;
}

Best regards,
Ismael

Hi,
Strange, I would imagine that the other thread would have lead to the solution as it seemed to be the same situation.When I check your site with the inspector emulating a mobile device and view the scripts loaded and then click the burger menu 20 additional scripts are loaded:

most of which I don’t think apply, such as FB, YT, reputation badge, but a few WordPress core scrips load from /wp-includes/js/ like wp-polyfill.min.js which sometimes is used as a “bridge” between scripts, so perhaps this is part of the issue.
Try looking at these scripts and see if this helps.
I also note that if you look at the DOM in the inspector you can see all of the scripts that get the data-rocket-status=”executed” attribute when you click the burger menu, and one that stood out to me was the variables for the avia_framework_globals

I’m not sure how you could allow these variables in wprocket but perhaps this is related.
I tried to search for other threads with this issue for possible clues, but the only other one I found was the one I linked to and you have already followed those steps.
Your not using any other plugins like Autoptimize and you tried disabling Enfold Theme Options ▸ Performance ▸ JS & CSS file merging and compression right? It looks like you are using a CDN, perhaps try disabling it for now to ensure that there is on conflict.
The only other thing that I can think of is to disable all of the wprocket settings so the burger menu is working correctly and then enable one at a time, clearing the cache with the CDN disabled until it breaks again and reviewing it. Or perhaps try adding all of the known js files from WordPress and Enfold until the burger menu works correctly and try removing them one at a time until it breaks and you find the combination that you need.

Best regards,
Mike

Hi,
In the last screenshot you point to product titles and write that they should be white, which would be good for the one with a green background, but the other one has a white background so if the title was white you would not see it:

So assuming that this an error, please use Ismael’s css above:

.main_color a, .main_color strong a, .main_color strong, .alternate_color strong, .alternate_color strong a, .alternate_color a {
    color: #000000 !important;
}

and then add this css to change the titles with the green background to white:

#top .main_color a strong.woocommerce-loop-category__title {
	color:#fff !important;
}

If you find more things to change then please let us know and we will help with more css to build on this.

Best regards,
Mike

Hi,
Thank you for the link to your site, for your last five items with no excerpt this css will center the title:

#top #wrap_all .av-masonry-entry.av-masonry-item-with-image .av-inner-masonry-content .av-masonry-entry-title.entry-title {
    position: absolute;
    transform: translate(-1vw,-28vh);
    color: #fff;
    display: flex;
    justify-content: center;
    width: 100%;
}
#top #wrap_all .av-masonry-entry.av-masonry-item-with-image .av-masonry-outerimage-container:before {
  content:"";
  display: block;
  height: 100%;
  position: absolute;
  visibility: visible !important; 
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0,.5)!important; 
}

But I know the you plan to have a excerpt, so based on the excerpt length of the first item, which is about half of the item’s height, this css would be what I recommend.

#top #wrap_all .av-masonry-entry.av-masonry-item-with-image .av-inner-masonry-content .av-masonry-entry-title.entry-title {
    position: absolute;
    transform: translate(-1vw,-16vh);
    color: #fff;
    display: flex;
    justify-content: center;
    width: 100%;
}
#top #wrap_all .av-masonry-entry.av-masonry-item-with-image .av-masonry-outerimage-container:before {
  content:"";
  display: block;
  height: 100%;
  position: absolute;
  visibility: visible !important; 
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0,.5)!important; 
}

as you add more excerpts to the other items try adjusting the negative sixteen of this code: transform: translate(-1vw,-16vh); to find the placement that you want. It would be better if your excerpts were all about the same length, because we need to use absolute position for the title.

Best regards,
Mike