Forum Replies Created
-
Posts
-
The plugin developer has not replied to my question, so there is no reason to keep this ticket open. If I do get a reply, I will open another ticket. Thanks for your help.
Thanks for the reply. Let me first contact the WordPress base developers and see if they consider this behavior a bug. If so, maybe they will fix it. If not, I will get back to you and perhaps we can investigate ways of styling the top menu so the overwrite doesn’t occur.
Does the styling of the top menu come from Enfold or WordPress? This may be a bug in the WordPress software, since the items in the admin bar are dropping down and overwriting the items in the top menu. However, before I report a bug to WordPress, I need to make sure the misbehavoir is not something associated with the top menu. No plugins are involved in the problem.
OK. I have figured out a workaround. The article: https://themeisle.com/blog/why-and-how-to-customize-the-wordpress-toolbar/ gives instructions how to remove items from the admin bar. I have removed enough items so that the drop-down and overwrite problem does not occur. I used the Code Snippets plugin to add the following code to the theme:
function remove_toolbar_items($wp_adminbar) {
$wp_adminbar->remove_node(‘wpseo-menu’);
$wp_adminbar->remove_node(‘customize’);
<etc>
}add_action(‘admin_bar_menu’, ‘remove_toolbar_items’, 999);
However, the problem is a general problem for Enfold, since when the admin bar has many items, it drops down and overwrites the top menu items. This is obviously a bug and should be addressed, since other sites may want to keep items in the admin bar that I removed.
Our test site still illustrates the problem, as I only changed the live site. If you wish, I can give you a login to the test site and you can see the problem for yourself.I have now learned that what I have been calling the “top bar” is titled the “admin bar” or “WordPress toolbar”. I also have learned that there are ways of removing items in that bar. However, so far I have not figured out how to remove enough items so that the admin bar doesn’t drop down and overwrite the top menu when the browser window is reduced in width from the right hand side. This occurs not only when reducing the horizontal width of the browser window, but also when devices, such as tablets, display the pages of the site.
In the second screenshot, you can see that the “Howdy, Dan Nessett” item is overwriting the “Admin Only” Item in the Top Menu. Unfortunately, you need to login to see this. I can give you a login to our test site, if this would help analyze the problem.
Thanks. That worked perfectly (although I had to adjust the px number). You can close this ticket when you so choose.
I have included a link to a screenshot in the Private Content part of this message. The menu is at the top of the page under the menu item, “Member’s Only”, The sub-menu item is Member Information and the items we would like to move down vertically are “- Online Directory” and “- Update Contact Information”
I have created a temporary admin user for you to use on test.mountolive.com. Credentials are in the private content part of this message.
I am including an image to illustrate the current sub-sub-menu alignment (top example) and the desired alignment (bottom example). I am doing this since the markup used on this forum doesn’t allow items to be positioned in the horizontal direction. Therefore, the previous post shows examples that are aligned to the left. The image shows more exactly what we are seeking.
https://drive.google.com/file/d/1UaH9ASdTqj8BLVNshyYiUJJiavuJySzW/view?usp=sharing
The Equal Height option for the first row was set. Once I set it to individual height for that row (all other rows were set to individual height), the order of the rows on mobile devices were displayed in the correct order. Thank you.
Cheers,
Dan NessettI have created a temp admin account on test.mountolive.com. The credentials are in the private content part of this post. The issue shows up in the Church Information sub-menu item of the Members Only Menu at the top of the page. I couldn’t obtain a screen shot, since the menu only appears when the cursor sits on the “Church Information” item. So, I can’t use the cursor to make a screen shot. To reiterate. I would like the menu items to always display to the right at all menu levels. When viewed on a mobile phone, the “Church Information” menu items are not visible because they are to the left and off of the mobile phone display.
I assume this is what you are looking for (I X’d out the telephone numbers to retain privacy of member information):
[av_section min_height='' min_height_pc='25' min_height_px='500px' padding='default' custom_margin='0px' custom_margin_sync='true' color='main_color' background='bg_color' custom_bg='' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' attach='scroll' position='top left' repeat='no-repeat' video='' video_ratio='16:9' overlay_opacity='0.5' overlay_color='' overlay_pattern='' overlay_custom_pattern='' shadow='no-border-styling' bottom_border='no-border-styling' bottom_border_diagonal_color='#333333' bottom_border_diagonal_direction='' bottom_border_style='' custom_arrow_bg='' id='' custom_class='av-custom-column-order' template_class='' aria_label='' av_element_hidden_in_editor='0' av_uid='av-kqioerxg' sc_version='1.0']
[av_one_half first min_height='av-equal-height-column' vertical_alignment='av-align-top' space='' row_boxshadow_color='' row_boxshadow_width='10' margin='0px' margin_sync='true' mobile_breaking='' border='' border_color='' radius='0px' radius_sync='true' padding='0px' padding_sync='true' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' background_position='top left' background_repeat='no-repeat' highlight_size='1.1' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' id='' custom_class='' template_class='' aria_label='' av_uid='av-by9gfc' sc_version='1.0']
[av_image src='https://mountolive.com/wp-content/uploads/2021/06/Prayer-Request-Image-Scaled-300x240.jpg' attachment='6096' attachment_size='medium' copyright='' caption='' styling='' align='left' font_size='' overlay_opacity='0.4' overlay_color='#000000' overlay_text_color='#ffffff' animation='no-animation' hover='' appearance='' link='' target='' title_attr='' alt_attr='' lazy_loading='disabled' id='' custom_class='' template_class='' av_element_hidden_in_editor='0' av_uid='av-kpj8b6p6' sc_version='1.0' admin_preview_bg=''][/av_image]
[/av_one_half][av_one_half min_height='' vertical_alignment='av-align-top' space='' row_boxshadow='' row_boxshadow_color='' row_boxshadow_width='10' custom_margin='' margin='0px' mobile_breaking='' border='' border_color='' radius='0px' padding='0px' column_boxshadow='' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' background_position='top left' background_repeat='no-repeat' highlight='' highlight_size='' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' id='' custom_class='' template_class='' aria_label='' av_uid='av-b8sj60' sc_version='1.0']
[av_image src='https://mountolive.com/wp-content/uploads/2021/06/Christ-the-Lamb-300x240.jpg' attachment='6099' attachment_size='medium' copyright='' caption='' styling='' align='left' font_size='' overlay_opacity='0.4' overlay_color='#000000' overlay_text_color='#ffffff' animation='no-animation' hover='' appearance='' link='' target='' title_attr='' alt_attr='' lazy_loading='disabled' id='' custom_class='' template_class='' av_element_hidden_in_editor='0' av_uid='av-kpj90fig' sc_version='1.0' admin_preview_bg=''][/av_image]
[/av_one_half][av_one_half first min_height='' vertical_alignment='av-align-top' space='' row_boxshadow='' row_boxshadow_color='' row_boxshadow_width='10' custom_margin='' margin='0px' mobile_breaking='' border='' border_color='' radius='0px' padding='0px' column_boxshadow='' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' background_position='top left' background_repeat='no-repeat' highlight='' highlight_size='' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' id='' custom_class='' template_class='' aria_label='' av_uid='av-2do6x4' sc_version='1.0']
[av_hr class='default' icon_select='yes' icon='ue808' position='center' shadow='no-shadow' height='50' custom_border='av-border-thin' custom_width='50px' custom_margin_top='30px' custom_margin_bottom='30px' custom_border_color='' custom_icon_color='' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' id='' custom_class='' template_class='' av_uid='av-abb43s' sc_version='1.0']
[/av_one_half][av_one_half min_height='' vertical_alignment='av-align-top' space='' row_boxshadow='' row_boxshadow_color='' row_boxshadow_width='10' custom_margin='' margin='0px' mobile_breaking='' border='' border_color='' radius='0px' padding='0px' column_boxshadow='' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' background_position='top left' background_repeat='no-repeat' highlight='' highlight_size='' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' id='' custom_class='' template_class='' aria_label='' av_uid='av-4h3du0' sc_version='1.0']
[av_hr class='default' icon_select='yes' icon='ue808' position='center' shadow='no-shadow' height='50' custom_border='av-border-thin' custom_width='50px' custom_margin_top='30px' custom_margin_bottom='30px' custom_border_color='' custom_icon_color='' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' id='' custom_class='' template_class='' av_uid='av-8vzjrc' sc_version='1.0']
[/av_one_half][av_one_half first min_height='' vertical_alignment='av-align-top' space='' row_boxshadow='' row_boxshadow_color='' row_boxshadow_width='10' custom_margin='' margin='0px' mobile_breaking='' border='' border_color='' radius='0px' padding='0px' column_boxshadow='' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' background_position='top left' background_repeat='no-repeat' highlight='' highlight_size='' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' id='' custom_class='' template_class='' aria_label='' av_uid='av-3j0qvs' sc_version='1.0']
[av_textblock size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' font_color='' color='' id='' custom_class='' template_class='' av_uid='av-kpges3fg' sc_version='1.0' admin_preview_bg='']
<h2>Current Prayer Requests</h2>- <div>6/30/21 Please pray for Janet Iverson’s brother, Steven Van Dyke. He is at Mayo and will have open heart surgery tomorrow, Thursday July 1. He is in his 60’s Prayers for Steven and his mom, Janet.</div>
-
<div></div>
<div>7/5/21 Also, prayers for Elfrieda Kahler’s family. Elfrieda passed away Saturday morning. Prayers for her family and Pastor’s sermon at her funeral that every person will know and trust in Jesus as their Savior.</div> - 7/5/21 Please pray also for Ruth Terry’s family. Ruth’s mom passed away Sunday. Pastor will also have her funeral this week. Please pray for pastor and his family. Also that every person in Ruth’s family will be moved by the Holy Spirit and know Jesus as Savior and Lord.
- 7/7/21 Please pray for Adell Coombs’s son Isaac Webb. Isaac hurt his ankle at basketball camp Monday night and damaged his growth plate. Please pray for healing and that he can get something out of basketball camp even though he can’t do all the the activities.
[/av_textblock]
[/av_one_half][av_one_half min_height='' vertical_alignment='av-align-top' space='' row_boxshadow='' row_boxshadow_color='' row_boxshadow_width='10' custom_margin='' margin='0px' mobile_breaking='' border='' border_color='' radius='0px' padding='0px' column_boxshadow='' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' background_position='top left' background_repeat='no-repeat' highlight='' highlight_size='' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' id='' custom_class='' template_class='' aria_label='' av_uid='av-3wnsco' sc_version='1.0']
[av_textblock size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' font_color='' color='' id='' custom_class='' template_class='' av_uid='av-kpget2y8' sc_version='1.0' admin_preview_bg='']
<h2>Answered Prayers</h2>
[/av_textblock][/av_one_half][av_one_half first min_height='' vertical_alignment='av-align-top' space='' row_boxshadow='' row_boxshadow_color='' row_boxshadow_width='10' custom_margin='' margin='0px' mobile_breaking='' border='' border_color='' radius='0px' padding='0px' column_boxshadow='' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' background_position='top left' background_repeat='no-repeat' highlight='' highlight_size='' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' id='' custom_class='' template_class='' aria_label='' av_uid='av-7gec6w' sc_version='1.0']
[av_hr class='default' icon_select='yes' icon='ue808' position='center' shadow='no-shadow' height='50' custom_border='av-border-thin' custom_width='50px' custom_margin_top='30px' custom_margin_bottom='30px' custom_border_color='' custom_icon_color='' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' id='' custom_class='' template_class='' av_uid='av-2q6q20' sc_version='1.0']
[/av_one_half][av_one_half min_height='' vertical_alignment='av-align-top' space='' row_boxshadow='' row_boxshadow_color='' row_boxshadow_width='10' custom_margin='' margin='0px' mobile_breaking='' border='' border_color='' radius='0px' padding='0px' column_boxshadow='' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' background_position='top left' background_repeat='no-repeat' highlight='' highlight_size='' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' id='' custom_class='' template_class='' aria_label='' av_uid='av-47uy8o' sc_version='1.0']
[/av_one_half][av_one_half first min_height='' vertical_alignment='av-align-top' space='' row_boxshadow='' row_boxshadow_color='' row_boxshadow_width='10' custom_margin='' margin='0px' mobile_breaking='' border='' border_color='' radius='0px' padding='0px' column_boxshadow='' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' background_position='top left' background_repeat='no-repeat' highlight='' highlight_size='' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' id='' custom_class='' template_class='' aria_label='' av_uid='av-56odp4' sc_version='1.0']
[av_textblock size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' font_color='' color='' id='' custom_class='' template_class='' av_uid='av-4ka1x4' sc_version='1.0' admin_preview_bg='']
<h3 style=”text-align: left;”>If you have an issue you wish to submit to the Prayer Request page, please contact Arlene De Boer at XXX-XXX-XXXX or Sharon McDunn at XXX-XXX-XXXX</h3>
[/av_textblock][/av_one_half][av_one_half min_height='' vertical_alignment='av-align-top' space='' row_boxshadow='' row_boxshadow_color='' row_boxshadow_width='10' custom_margin='' margin='0px' mobile_breaking='' border='' border_color='' radius='0px' padding='0px' column_boxshadow='' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' background_position='top left' background_repeat='no-repeat' highlight='' highlight_size='' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' id='' custom_class='' template_class='' aria_label='' av_uid='av-9bs0o' sc_version='1.0']
[/av_one_half][/av_section]
I am including two HTML fragments in the Private Content section. The first is the HTML for the test site related to the flex column table feature. This is the HTML that works properly. The second is the HTML for the live site. This doesn’t work properly. The two are significantly different. The test site HTML has a section “<div class=”entry-content-wrapper clearfix”>” that heads the flex information, while the live site has a section “<div class=”flex_column_table av-equal-height-column-flextable -flextable”>” that does the same.
Yes, I applied “the av-custom-column-order class name to the color section containing the columns.” While I thank you for offering to fix the problem on our live web site, this would not teach me anything about how wordpress and Enfold use CSS to modify the display of posts/pages. I would prefer it if you would tell me how to analyze the problem myself.
For example, while I understand the class identifier “av-custom-column-order” should appear somewhere in the HTML on the displayed page, I don’t know what a color section turns into in the HTML. I can use the inspector features of my browser to see if “av-custom-column-order” is being used to tag a HTML element, but I need to understand where in the HTML it might appear. Additionally, I don’t know where the CSS from the Quick CSS field should appear. I can look to see if it’s there, but I need to know where to look.
Added Later: I found where in the HTML the “av-custom-column-order” tag appears. It is in a div section with id “av_section_1” This tag appears in both the test and live site HTML. So, setting the class id in the color element seems to work properly in both cases. However, I could not find where the CSS is transmitted to the browser.
I will open another thread.
However, I have run into a problem moving your solution to our live site. It works on our development site for the page that had the problem (not just the post you created). When I moved the CSS to the live site and associated the page with av-custom-column-order, the page ordering becomes chaotic. I had to enhance the CSS you provided to apply it to the page under question (on both the development and lives sites). In particular, I used:
@media only screen and (max-width: 767px) {
/* Add your Mobile Styles here */
.av-custom-column-order .entry-content-wrapper {
display: flex;
direction: ltr;
flex-direction: column;
}
.av-custom-column-order .av_one_half:nth-child(1) {
order: 1;
}
.av-custom-column-order .av_one_half:nth-child(2) {
order: 6;
}
.av-custom-column-order .av_one_half:nth-child(3) {
order: 2;
}
.av-custom-column-order .av_one_half:nth-child(4) {
order: 7;
}
.av-custom-column-order .av_one_half:nth-child(5) {
order: 3;
}
.av-custom-column-order .av_one_half:nth-child(6) {
order: 8;
}
.av-custom-column-order .av_one_half:nth-child(7) {
order: 4;
}
.av-custom-column-order .av_one_half:nth-child(8) {
order: 9;
}
.av-custom-column-order .av_one_half:nth-child(9) {
order: 5;
}
.av-custom-column-order .av_one_half:nth-child(10) {
order: 10;
}
}This worked fine on the development site. However, when I installed it on the live site, the order of nth-child elements displayed in a single column on a mobile device became: 1, 2, 3, 6, 4, 5, 7, 8, 9, 10; not 1, 3, 5, 7, 9, 2, 4, 6, 8, 10. The only difference I can think of between the live and development site is I did not create the example post on the live site that you provided on the development site.
Was there some other configuration you made on the development site besides installing the CSS and associating the page with av-custom-column-order?
I have another question about Mobile Styling. I have a submenu in the Top Menu. I want to put submenu items in it. When I do so, however, the sub-sub-menu items displayed to the left. This puts them off the mobile device boundary. What I want to do is force all menu items, no matter what their depth, to display to the right.
Should I make this a separate topic?
Thanks Ismael. In order to apply this CSS to the page in question, I need to associate it with “av-custom-column-order”. I don’t know how to do this. Would you elaborate?
Added Later: Actually, I figured it out. You have to go to the Color Section->Advanced->Developer Settings and put av-custom-column-order in the Custom CSS Class.
I have created a temporary admin without using the plugin. It will be valid for 7 days. I have tested logging into the account and it works. Credential information is included in the Private Content area of this message
I should have mentioned that the temporary login timed out and I deleted it. If you need to access the account, I need to get you a new temporary login.
It has been 10 days since I created a temporary login for you on our development site. So far, I have seen no work by you to fix the problem. The temporary login has now expired. Can you give me a status report on this issue?
OK. I will create a guest account with admin privileges on our development site. This will allow me to delete the sensitive content on the page you will examine. I ask that you restrict yourself to this page and not examine other content pages on the site.
I will need an email address for the account. This is necessary so you can get a password for the account without me putting one in a post that is publicly readable. If you do not want to put your email address in a post, you can send it to me at: dan.nessett@gmaildotcom (do the obvious translation of gmaildotcom). I will then send you the name of the account and you can use the “get new password” feature of login to set your password.
The page under scrutiny is in a members only area and access is controlled using the Content Control plugin. So, I have to create a temporary account for you in order for you to examine the page. What role privileges would you need?
Thanks for your reply. I am not a CSS expert, but have some limited knowledge of it. I am using the AVIA layout builder to create the page. How do I set the display property of the parent page container to flex in the AVIA editor? Also, are there some links you can provide that explain now to create and use the “css media query for mobile screens” in this situation.
