-
AuthorPosts
-
March 5, 2018 at 3:56 pm #921529
Hello,
I have been using UberMenu on my popular travel blog https://www.bigboytravel.com/ but am looking to get away from it to start using the functionality that is now built into Enfold. I plan on adding images to the menu later, but for now just want to get the base functionality similar to what my main site currently is. Link to my staging site using Enfold’s AVIA Menu in the private info.
Issue #1 – Logo Left Menu Below Align Right
I have my menu aligned right with UberMenu but when switching to Enfold’s AVIA I am finding it difficult.
Have tried a number of solutions from the Support Forum including this one and none seem to work.menu-main-menu-container { float: right; }
Issue #2 – Only Menu Sticky On Stroll, Hide Logo Container
I set the menu to sticky and shrinking then added the following CSS but it seems to only occasionally work.
On some pages it works, others after a second, and others not at all.
Overall seems to work on half the pages on Chrome but doesn’t work on most pages in Firefox or Edge..header-scrolled #header_main .av-logo-container { display: none !important; }
Issue #3 – Down Arrow Character On Main Menu Parent With Child
On my main site, Ubermeny puts a down arrow character ^ next to any parents with a child. Is this possible using Enfold’s Avia Menu on Desktop like the mobile menu does?Issue #4 – On Mobile Set Header Background Color And Sizing
to get the header looking how I want on mobile using I have the following code which is working great but wanted to see if any of it looked unnecessary as I’m trying to use as little CSS as possible. Google’s new guidelines are to use 50kb or less of CSS and the dynamic Enfold CSS doesn’t seem to get compressed with my Caching as the CSS elsewhere in my site.
Basically this code makes my header shorter on mobile, sticky when scrolled, filled with a black background, have a smaller logo, and overall tighter to the top, just didn’t know if my code was overkill.@media only screen and (max-width: 990px) { #header{position: fixed !important; } } @media only screen and (max-width: 990px) { .responsive #top #main { padding-top: 60px!important; }} @media only screen and (max-width:990px) { #top #header_main > .container { height:70px!important; line-height: 50px!important; max-height: 70px!important; } .html_header_top.html_header_sticky #top #wrap_all #main { padding-top:60px!important; } } @media only screen and (max-width: 990px) { .responsive .logo img { max-height: 60px; } } @media only screen and (max-width: 990px) { .responsive #top { margin-top: -5px; } } @media only screen and (max-width: 990px) { #header.header_color { background-image: none !important; background-color: #000000 !important; } }
March 6, 2018 at 11:38 am #922166Hey Jon,
Can you please disable caching and minification for now?
Best regards,
VictoriaMarch 6, 2018 at 10:03 pm #922521Victoria,
I just disabled Minify for CSS and JS as well as disabled Combine Files for CSS and JS
Issue #2 Update
Did notice that when I disabled Combine Files for JS that the logo area of the header did start to disappear on scroll with the menu sticking on both Edge and Firefox finally. Since my display none code was in the Enfold Dynamic CSS I assume maybe that the Shrinking Header is a JS function? I do have the ability to exclude JS files if needed. Am hoping there is a way to get this to work while also keeping the import Minifiy and Combine options enabled.
Looks like the AVIA Animated Numbers are affected in the same way as they stay stuck at zero (I’m not using them but did test).Added you as an admin to the staging site, see private info
Thanks again,
JonMarch 7, 2018 at 11:50 am #922873Hi Jon,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
.html_header_top.html_bottom_nav_header #header_main_alternate .main_menu ul:first-child { width: 68%; float: right; }
This can help you get the idea how to add arrows to the menu items
https://kriesi.at/support/topic/icons-for-megamenu-sub-menu/Here is more on the menu options
What do you mean hide the logo container on mobile? I see the logo and the burger sticky on mobile.
If you need further assistance please let us know.
Best regards,
VictoriaMarch 7, 2018 at 8:48 pm #923307WOW! thank you for the link to the new Enfold documentation on Graphitivity, great resource.
I’m excited to dig through it and am sure it will give me new ideas.The float right code kind of works but created a weird stack as the screen gets smaller.
Will look into the Enfold documentation on Graphitivity to see if I can figure it out and will let you know if I found something or if I have more questions.I’m still stuck on Issue #2 from my original post
I have the header set to Logo Above-Menu Below, the behavior set to Shrinking Header, and Sticky Header turned on.
Then the following code to make the Logo Above area hide on scroll so only the menu is sticky..header-scrolled #header_main .av-logo-container { display: none !important; }
It works okay until I enable “Combine JS Files” in WP Engine the Shrinking Header function stops working in both the Firefox and Edge browsers.
Is there a file I should be adding into the exclusion for “Combine JS Files”? Or is there a different way to accomplish this?Combining the sites JS Files is pretty important to reduce the number of requests and I’ve only had conflicts with Enfold’s Shrinking Header as well as the mobile toggle for Noo Menu submenus but was able to exclude /wp-content/plugins/noo-menu/(.*).js to fix that one.
Shrinking Headers looks to be the only function or element in Enfold that has an issue after “Combine JS Files”Thanks again,
JonMarch 8, 2018 at 7:54 am #923618Hi Jon,
The new documentation is still work in progress but yes it’s much better and much more detailed. Glad you like it :)
The new theme versions combine js and css so you might not need to use the built-in WP Engine.Best regards,
Victoria- This reply was modified 6 years, 9 months ago by Victoria.
March 8, 2018 at 8:16 am #923635That is great news, thank you.
The minify/combine options also cover my 3rd party plugins so I will still have to use it some.
Just updated to Enfold version 4.2.6 from 4.2.5 so I will troubleshoot and let you know if fixed the issue or have more questions.March 8, 2018 at 11:10 am #923735Hi millertimesites,
Sure, let us know how that worked for you. You can exclude all Enfold scripts in the plugins or you can disable the Enfold script optimization.
Best regards,
Victoria -
AuthorPosts
- You must be logged in to reply to this topic.