Hi,

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

Hi,

Great, glad you found a solution. Please let us know if you should need any further help on the topic.

Best regards,
Rikard

Hi,

Glad we could help :-)

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

Best regards,
Rikard

Hi,

Thank you for using Enfold.

Where do you want to put the search icon? It’s disabled because the default menu container is hidden on mobile view. If you want, you can add it inside the mobile menu container. Please add this filter in the functions.php file:

add_filter( 'wp_nav_menu_items', 'avf_add_search', 3, 2 );
function avf_add_search( $items, $args ) {
	if ($args->theme_location == 'avia')
	{
		$search = '<li id="menu-item-search-mobile" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-18 current_page_item menu-item-top-level menu-item-top-level-5" style="display: none;">'.get_search_form(false).'</li>';
		$items = $search . $items;
	}
	return $items;
}

And the following code in the Quick CSS field.

@media only screen and (max-width: 767px) {
	#menu-item-search-mobile {
    	display: block !important;
	}
}

Best regards,
Ismael

Hi,

Yes, this is definitely possible. We actually have it documented in the following link.

// http://kriesi.at/documentation/enfold/hide-menu-itemselements-on-mobile/

First, you need to turn on the custom css class field then edit the elements that you want to display or not display on mobile or desktop. Add the corresponding selector as instructed in the documentation.

Best regards,
Ismael

Hi,

I checked the settings and the Enfold > General Layout > Dimensions > Responsive Site option is disabled. Was that intentional? We enabled it back and I don’t see any issue except for the logo image, which is expected because of the following css code.

.icon_img img {
    max-width: 480px;
}

You can replace it with the following css code so that it will not affect the mobile view.

@media only screen and (min-width: 768px) {
  /* Add your Desktop Styles here */
  .icon_img img {
    max-width: 480px;
  }
}

Could you please provide a screenshot of the “phone” issue?

Best regards,
Ismael

Hi,

Thank you for using Enfold.

Please look for this css modification.

#top.rtl #header.header-scrolled .social_bookmarks li:last-child {
    border-right: 1px solid #e1e1e1 !important;
}

.. replace it with:

#top.rtl #header .social_bookmarks li:last-child {
    border-right: 1px solid #e1e1e1 !important;
}

And where can I find the page with the social share section? Please provide a url. It probably requires a simple css modification.

Best regards,
Ismael

Hi,

You can create a custom shortcode for the categories. Add the following code in the functions.php file.

function custom_categories_shortcode() {
	global $post;
	ob_start();
    	the_terms( $post->ID, 'category', '<strong>Categories: </strong>', ' , ' ); 

	$output = ob_get_clean();
    return $output;
}
add_shortcode('the_post_categories', 'custom_categories_shortcode');

Edit the post, insert a text or codeblock then use the following shortcode:

[the_post_categories]

More info here:

// https://kriesi.at/support/topic/question-about-transferring-set-up-to-our-actual-site/#post-643745

Best regards,
Ismael

Hey wbitsolutions,

I’m guessing this relates to your previous topic that I just replied to? I would recommend you to switch to the mobile menu at an earlier stage instead of making the menu items smaller.

Best regards,
Rikard

Hi,

I’m sorry for the late response.

Plus can I increase the padding above the logo as it looks a bit squashed at the top of the container?

Please use this css code to move the logo downwards a bit.

.logo img {
    top: 10px;
}

And you will actually get a faster response if you open a new ticket or topic for each of your inquiry. Other moderators will be able to check on it much faster.

p.s. can you think of any reason why the following code in quick css

What is the “advanced button styling”?

On this site, I would like each of the colour sections to fill the screen so that the arrow to jump to next section is always placed at the bottom and it looks/works really sleek. Is this possible as when I selected the “100% of browser height” in the row settings it works fine for the first section…

There’s quite a few css modifications added on the theme, specifically in the header so the “scrolldown” calculation is off. Please edit the js > avia.js file then look for the avia_smoothscroll function. Look for this code on line 756:

fixedMainPadding = parseInt($('html').css('margin-top'),10);

.. replace it with:

fixedMainPadding = parseInt($('html').css('margin-top'),10) + 100;

Let us know if it changes anything.

Best regards,
Ismael

Hi,

Glad we could help :-)

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

Best regards,
Rikard

Hey Kevin,

Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

.responsive .boxed#top, .responsive.html_boxed.html_header_sticky #header, .responsive.html_boxed.html_header_transparency #header {
    width: 100%!important;
    max-width: 100%!important;
}

Best regards,
Yigit