-
Posts
-
Hi guys,
I just finished all the key templates i needed for my site and would need some basics css fixes i don’t know yet but believe you are really familiar with ;-), to match the quality of your demo:
# Different css padding for desktop & mobile devices
To make sure full width content is readable, i added left and right padding in layout element (10% each)
It looks great on desktop but not on mobile. Any way to deactivate it for mobile view ?# Submenu navigation indicators
I created submenu navigation as i have very long destination pages.
Really like the functionality but would like to highlight the submenu navigation item when an user reaches the specific section id on the page, any solutions?# Icons animation
Any quick css to deactivate the icon loading animation? Visible at the end of destination page, the green ones# Jump to top button padding
Really important functionality. Any way i can reduce the right padding to match it with the social plugin i am using?Thanks!
Hi lionel!
1.) Use media queries. You need to include your code inside these brackets:
@media only screen and (max-width: 736px) { }2.) Try this code:
#top .av-subnav-menu li a:visited { color: red; }3.) Use this code:
.avia_transform .avia_start_delayed_animation.av_font_icon { animation: none; -webkit-animation: none; }4.) Are you talking about the position? more to the right? if yes use this code:
a#scroll-top-link { right: 4px; }Best regards,
AndyHi Andy
Thanks for the quick reply. My quick css is no longer working, so i am amending everything via the custom.css
# Submenu navigation indicators
I added:
#top .av-subnav-menu li a:visited {
color: red;
}but since I have visited all ids, the whole menu font is in red now.
What I meant was to simply indicate where you are on the page, using the submenu and highlighting the specific navigation item only at this time. What should I change?# Icons animation
With the code you gave me, icons are still loading when the user reaches the section on the page, creating a non-visible/visible animation when appearing. Any way to avoid any kind of post-loading?# Different css padding for desktop & mobile devices
Regarding the code you gave me, it should concern all the elements of all pages. Any way to generalise the action, removing left and right padding on mobile, doing that across all pages?
Thanks
Hi,
Why is your Quick CSS not working anymore? Please make sure you are using the latest version of the theme, 3.3.2. Send us and admin login and we’ll have a closer look.
Best regards,
RikardHey,
I see that you are running version 3.2.3, could you try to update to 3.3.2 please? http://kriesi.at/documentation/enfold/updating-your-theme-files/.
Best regards,
RikardHi,
I’m not sure if this is what you are asking for but you can control active menu items with the following CSS:
.current-menu-item { color: yellow !important; }You can control the size of the scroll to top button using the following:
#scroll-top-link { height: 50px !important; width: 50px !important; line-height: 50px !important; }Best regards,
RikardHi Rikard,
There are still 2 pending questions. and 1 comment
1# Icons animation
With the code you gave me, icons are still loading when the user reaches the section on the page, creating a non-visible/visible animation when appearing. Any way to avoid any kind of post-loading?2# Different css padding for desktop & mobile devices
Regarding the code you gave me, it should concern all the elements of all pages. Any way to generalise the action, removing left and right padding on mobile i used from desktop view, doing that across all pages?3# Submenu navigation indicators
.current-menu-item {
color: yellow !important;
}It doesnt work.
What I meant was to simply indicate where you are on the page, using the submenu and highlighting the specific navigation item only at this time. What should I change?Hi!
1.) Refer to this solution: https://kriesi.at/support/topic/removing-icon-animation-icon-styling/#post-209632
2.) Not sure what you mean with “Different css padding for desktop & mobile devices”, as I can’t see any code for any padding. However, it sounds to me as if you need to use media queries.
3.) Try this code:
.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 > li.current_page_item > a, .header_color .main_menu ul:first-child > li.active-parent-item > a { background-color: yellow !important; }Cheers!
AndyHi Andy
1/ Icons animations. Perfect, I edited the css in shortcodes.css and it works.
2/ CSS padding for desktop & mobile. I saw in some support posts some potential answers but don’t sure what/how to implement. Let’s use a simple example: On the page listed in private content, at the end of the page, I have this section with icons. For the icon blocks on the left, I added 10% padding left for the column. I added 10% padding right for the icons blocks on the right too. It looks clean on desktop device, but on mobile it makes the section not aligned anymore; See screenshot. Any generic solution I can implement, as this template is shared across 100 pages?
3/ Unfortunately, the code you gave me seems to work for the top menu, but not for where I needed help lol.
We need to have the effect on the submenu on the page. Scroll please, it is the one with different times of the day, listing with anchor links to specific sections of the page. The effect should be on font color please, not on the background.Thanks
Hey!
2.) Can you show us which code you have uses to implement the padding for your icons? you can wrap your code with media queries, something like this:
@media only screen and (max-device-width: 736px) { .your-code { padding: 0px; }}3.) Your screenshot is not loading for me. However, try this code:
.av-subnav-menu li.current-menu-item span.avia-menu-text { color: yellow !important; }Regards,
AndyHi Andy,
2/ I didn’t use any code, maybe it was a mistake.
I simply used avia builder, creating two 1/2 columns, editing for each the layout setting tab, and replacing 0px by 10% either on padding-left or padding-right when needed. Do you suggest another way or can we fix the mobile layout using this system?3/ The code you gave me for the submenu is almost working. it is now on the submenu but does only highlight the first tab in the submenu even when I am scrolling down/up. Each anchor link links to a specific id section on the page. Anything we should add to make this functional?
Thanks
EricHey!
2.) Ok, I see. Try this code:
@media only screen and (max-device-width: 736px) { .flex_column.av_one_half.flex_column_div { padding: 0 !important; }}3.) Won’t be easy, but try this solution: https://kriesi.at/support/topic/current-menu-item-in-full-width-sub-menu/#post-404157 and as CSS code use this afterwards:
#top .av-subnav-menu > li.current-menu-item { color: black !important; }Hope this helps.
Cheers!
AndyHi Andy,
2/ Mobile padding, the solution is implemented and fully operational, excellent!
3/Regarding the submenu navigation, it didn’t work.
I changed js/avia.js and added the new quick css but it still doesnt indicate on which section id we are.In the ticket you asked me to look at, Jose explained that this plugin is from scrollspy and when i went to see their code, the highlighting function is working. http://www.w3schools.com/bootstrap/bootstrap_scrollspy.asp
Any chance we can add Josue to the discussion?
Or do you have any other codes/alternatives you would like me to try?Hey!
I’m not seeing the mod in your js/avia.js applied, did you revert it?
ScrollSpy works fine with the Enfold main menu, the problem is that it is not suited to work with fullwidth submenus at the moment, hence the mod to avia.js.
Regards,
JosueHi Josue
Nope, didn’t revert it.
Just downloaded js/avia.js from my ftp and I have this, from line 76 to 86//scrollspy for main menu. must be located before smoothscrolling
if($.fn.avia_scrollspy)
{
if(container == ‘body’)
{
$(‘body’).avia_scrollspy({target:”});
}
else
{
$(‘body’).avia_scrollspy(‘refresh’);
}Did I change it in the right place? Do you see it on your side?
Btw on line 267, i have another reference to scrollspy and its effects on the header main menu, anything to change here?
Maybe there is a conflict because the page displays two menus?$.fn.avia_scrollspy.defaults = {
offset: (parseInt($(‘.html_header_sticky #main’).data(‘scroll-offset’), 10)) + ($(“.html_header_sticky #header_main_alternate”).outerHeight()) + ($(“.html_header_sticky.html_header_unstick_top_disabled #header_meta”).outerHeight()) + 1 + parseInt($(‘html’).css(‘margin-top’),10),
applyClass: ‘current-menu-item’
}Thanks
Yea you’re right, i was missing some things in that message, i’ve updated it and also changed it myself in your install, you can check the result live now.
Best regards,
JosueThanks a million and believe me, i really mean it.
You are doing an excellent job helping us here, keep rocking!
- You must be logged in to reply to this topic.