Hi,
Since you want different styles for each menu item even if they are in the same zones as other items

“Land Speak of the John Muir Trail” in the Green zone may need slightly different styling than “Giants in the Gulch” which is also in the Green zone. Also, “Land Speak of the JMT – Statement” in the Orange zone could use slightly different styling than any of the other lines in the Orange zone.

your best approach will be to add custom classes to each menu item to target them with specific css.
Go to your menu screen and click the drop down “screen options” and check the box “CSS classes”

then you will see this box in the menu items

For example, adding the custom class “green” and this css to your Quick CSS:

#av-burger-menu-ul .green a {
	color: green !important;
}

will make your burger menu item green.
You can add multiple custom classes, for example if you want some items bold, you can also add the class “bold”:

and this css:

#av-burger-menu-ul .bold a {
	font-weight: bolder !important;
}

then this item will be green and bold.

Best regards,
Mike

Hey williamslyd,
When you write “the blog widget” I assume that you mean the blog posts element, as don’t have a “blog widget”.
In the blog posts element you can choose categories or entries from a custom taxonomy, such as post tags, but not both at the same time.
Try creating a unique tag or category that will show the posts that you want to be shown, and choose that in the blog posts element.

Best regards,
Mike

Hi,
I see that you found this thread and wrote that it answered your questions
If you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hi,
Thank you for your patience, this is working on my site:

Try disabling all of your plugins and try again.

Best regards,
Mike

Hi,
Glad Ismael could help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hi,
please include an admin login in the Private Content area so we can examine.

Best regards,
Mike

Hey a_edemirci,
We don’t have an element with this function, I recommend looking for a plugin to do this. Perhaps Filter Everything or one of these others.
I have not tried any of these, but it should be a good start for you.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hey schweg33,
I have opened the original thread so you can ask Guenni007, please post there and we will close this one.

Best regards,
Mike

Hi,
Thanks, between each image in your text element, you have a line break “br” and you also have a paragraph tag “p” wrapping some of your images, if you remove these the images will line up.

It would be easier for you to see these in the text element using the “code” tab instead of the visual tab.

Best regards,
Mike

Hi,
Thanks, now the login is admin, I added the code above to your “My Custom Functions” plugin and now your magazine titles are “p”, please check.

Best regards,
Mike

Hi,
I see that you have this custom css:

#top .avia-smallarrow-slider:not(.av-slideshow-ui) .avia-slideshow-arrows a, #top .avia-smallarrow-slider.av-slideshow-ui .avia-slideshow-arrows.av-visible-prev a.prev-slide, #top .avia-smallarrow-slider.av-slideshow-ui .avia-slideshow-arrows.av-visible-next a.next-slide {
    width: 24px !important;
    opacity: 1;
}

this is forcing the width to 24px, you can change this css and then add the css above, or try this css instead:

#top .avia-smallarrow-slider:not(.av-slideshow-ui) .avia-slideshow-arrows a, #top .avia-smallarrow-slider.av-slideshow-ui .avia-slideshow-arrows.av-visible-prev a.prev-slide, #top .avia-smallarrow-slider.av-slideshow-ui .avia-slideshow-arrows.av-visible-next a.next-slide {
    width: 50px !important;
    height: 50px !important;
    line-height: 50px !important;
    font-size: 20px !important;
}
#top .avia-smallarrow-slider .avia-slideshow-arrows {
  position: relative;
  width: 120px;
  left: auto;
  height: 50px;
  right: 10px;
}
#top .avia-smallarrow-slider .avia-slideshow-arrows a.avia-svg-icon svg:first-child, #top .avia-smallarrow-slider .avia-slideshow-arrows a.avia-svg-icon img[is-svg-img="true"] {
    height: 20px;
    margin-top: 17px;
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
currently:

with this new css:

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hey Kat,
Thank you for your patience and the link to your site, I tested with my Android device and with Safari on Mac in Responsive Design Mode to emulate a iPhone, but the burger menu and header image worked correctly. Unfortunately, I don’t have a iPhone to test with.
Try disabling your plugins and clear your iPhone cache and check again.
Please note that iPhones can be hard to clear the cache, often you need to also clear the history to fully purge the cache, following these steps for Safari and note Step 4 where you will Clear the History.

Best regards,
Mike

Hi,
It looks like Guenni007 added a button element with the custom class “my-find-button”.

Best regards,
Mike

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

.dropdown_widget_cart:has(.woocommerce-mini-cart__empty-message) {
  display: none !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