Hi,

Thanks for the password and sorry for the late reply. I think it will be a bit difficult to get that to work since your whole layout will break if you change the height and line height of the menu items. But you can try the following CSS and play around with the values to see if you can get it right:

#top #header_main > .container .main_menu ul:first-child > li > a {
    height: 50px !important;
    line-height: 50px !important;
}

#av-layout-grid-1 {
  margin-top: 100px !important;
}

Best regards,
Rikard

Hey Dee007,

Sorry for the late reply, could we try sticking to one issue at time please? Threads like these then to be very messy and hard to follow if not.

1. That is happening on my 13″ laptop as well, could you to use a smaller font size maybe?

2. I think you mean the right side of the image? The animated character? When using background images they cannot display the same on desktop as on mobile because of the large difference in screen size. You could try creating a new section to show only for mobile though and show/hide the correct one with CSS like this:

@media only screen and (min-width: 768px) {
#section-desktop {
  display:block !important;
}
#section-phone {
  display:none !important;
}
}

@media only screen and (max-width: 767px) {
#section-desktop {
  display:none !important;
}
#section-phone {
  display:block !important;
}
}

3. I’m not sure I understand what you mean by that, please post a screenshot highlighting what you would like to change.

4. Not sure I understand what you are looking to achieve there either, the image and the text looks to be added inside of a 4/5 element so the text will wrap under the image if it can’t fit on the right of it. Try using different layout elements if you want the text to stay withing a column.

5. I don’t understand what you mean, please try to explain a bit further.

6. Please try the following in Quick CSS under Enfold->General Styling:

.home .avia-button-center .avia_iconbox_title {
    font-size: 30px;
}

1. Please try the following in Quick CSS under Enfold->General Styling:

.page-id-1555 input[type='submit'] {
  background-color: #525454 !important;
}

1. Please try the following in Quick CSS under Enfold->General Styling:

.page-id-1206 #av_section_10 .container {
  max-width: 70% !important;
}

Best regards,
Rikard

Hi,

It’s being applied when I check it, if you need to target screens under 480 pixels then please use this:

@media only screen and (max-width: 479px) {
.responsive #top .slideshow_caption h2 {
    font-size: 50px !important;
}
.responsive #top .slideshow_caption .avia-caption-content {
    font-size: 30px !important;
}
}

Best regards,
Rikard

Hi,

Ok, I’m still seeing that top margin code being applied to the element. Please note that that code will apply to the first element on every page you create with the builder so I would highly recommend that you remove it.

You can try to make the font size a bit smaller using this CSS:

@media only screen and (min-width: 768px) and (max-width: 1024px) {
.home .slideshow_align_caption h2 {
  font-size: 40px !important;
}
}

Best regards,
Rikard

Hi,

Great, thanks for sharing :-)

Please let us know if you should need any further help on the topic.

Best regards,
Rikard

Hi,

We moved the css modifications at the very top of the Quick CSS field. However, I’m not sure why the “back” button modification is still not working. The initial and hover state background color is set to “#8b0b1e”.

Best regards,
Ismael

Hi,

Thank you for using Enfold.

Do you have an image for that cart icon? You can use this selector to modify the cart dropdown.

#menu-item-shop.cart_dropdown {
    right: 0;
    top: 0;
    width: 40px;
    height: 40px;
    line-height: 40px; 
}

#menu-item-shop .cart_dropdown_link span:before {
    content: '';
}

#menu-item-shop .cart_dropdown_link {
    padding: 0;
    left: 10px;
    top: -20px;
    background: url('CART IMAGE HERE') no-repeat center center;
}

Set the cart icon as background.

Best regards,
Ismael

Hi Hans-Gerd,

No problem, glad we could help. Please let us know if you should need any further help on the topic.

Best regards,
Rikard

Hi,

Great, glad you got it working :-)

Please let us know if you should need any further help on the topic.

Best regards,
Rikard

Hey ind-image,

Thank you for using Enfold.

Please follow this tread.

// https://kriesi.at/support/topic/sidebar-rechts-single-page/#post-580220

If you want to hide the sidebar on desktop, add this css code.

@media only screen and (min-width: 768px) {
  /* Add your Desktop Styles here */
  .single-product .sidebar {  display: none !important; }
}

Best regards,
Ismael

Hey Elena,

Thank you for using Enfold.

Please remove the modification then use the solution from these threads.

// https://kriesi.at/support/topic/override-the-global-avia_config-in-a-child-theme/#post-714683
// https://kriesi.at/support/topic/impossible-to-use-custom-image-sizes-in-slider-accordeon/#post-574335

Best regards,
Ismael

Hi,

1.) The font color is set to white which is the same as the background. Please use this css code to change the color.

@media only screen and (max-width: 767px) {
.responsive #header .sub_menu, .responsive #header_meta .sub_menu>ul {
float: none;
width: 100%;
text-align: center;
margin: 0 auto;
position: static;
color: #000000;
}

#top .av_header_transparency .phone-info h2 {
color: #000000;
}
}

2-4.) Edit the grid row element and then set a minimum height to it. Or add this in the Quick CSS field.

@media only screen and (max-width: 767px) {
.responsive #top #wrap_all .av-flex-cells .no_margin.av-zero-padding {
    min-height: 400px;
}
}

5.) I’m sorry but I don’t see any blog posts in the footer. Did you remove it?

Best regards,
Ismael

Hi,

Please add this css code in the Quick CSS field.

.avia_desktop.avia_transform3d .av-masonry-entry.av-masonry-item-loaded .av-inner-masonry {
    -webkit-animation: none !important;
    animation: none !important;
}

Best regards,
Ismael

Hi,

Great, glad you found a solution and thanks for sharing :-)

Please let us know if you should need any further help on the topic.

Best regards,
Rikard

Hi Barbara,

Great, glad you got it working :-)

Please let us know if you should need any further help on the topic.

Best regards,
Rikard

Hey agenceism,

Thank you for using Enfold.

Please add this in the Quick CSS field.

#top #header .av-main-nav > .current_page_item a .avia-menu-fx .avia-arrow-wrap {
    visibility: visible;
    width: 30px;
    height: 30px;
    margin-left: -10px;
    top: -15px;
}

#top #header .av-main-nav > .current_page_item a .avia-menu-fx .avia-arrow-wrap .avia-arrow {
    top: 20px;
    width: 30px;
    margin-left: -15px;
    border-width: 15px;
}

Best regards,
Ismael

Hi,

Great, glad you got it working and thanks for sharing your solution :-)

Please let us know if you should need any further help on the topic.

Best regards,
Rikard

Hi,

I don’t see any bordered menu item in the page but I can see a few styling modification.

.header_color .av-subnav-menu a:hover, .header_color .main_menu ul:first-child > li a:hover, .header_color .main_menu ul:first-child > li.current-menu-item > a, .header_color .main_menu ul:first-child > li.current_page_item > a, .header_color .main_menu ul:first-child > li.active-parent-item > a {
    color: #b7c84b;
    border: 2px solid;
    padding: 0px 10px;
    margin-top: 0px;
}

Please remove the modification, set the menu style to “bordered” then add the following css code.

.av-menu-button-bordered:hover a .avia-menu-text {
    background: red;
}

Best regards,
Ismael

Hi,

Thank you for the info.

Please add the following css codes.

/* subcat indentation */
#top .widget_nav_menu .sub-menu {
    left: 10px;
    position: relative;
}

/* hover color */
#top .widget_nav_menu ul ul li a:hover {
    color: #d45226;
}

/* line height */
#top .widget_nav_menu li {
    line-height: 18px;
}

Best regards,
Ismael