-
Posts
-
I tried to us this in the custom css for a sticky mobile submenu but it not working https://kriesi.at/support/topic/fullwidth-sub-menu-questions/ do you have another solution. Thx.
Hi Harris!
Exactly what did you do and what is not working, what result do you get? Please provide us with a link to the site in question so that we can have a closer look.
Regards,
RikardHey,
I added this code for the submenu to be sticky for mobile. Here is the page http://hfbadvertising.com/printing-services/
@media only screen and (max-width: 767px) {
.av-submenu-container { position: fixed !important; }
}Hey!
If you want the submenu to stick to the bottom of the page you can use this:
@media only screen and (max-width: 767px) { #top .av-submenu-container { position: fixed !important; bottom: 0 !important; z-index: 5000 !important; top: auto !important; } }Best regards,
RikardHey!
Enabling the sticky sub menu may not be exactly the same as the desktop version so it’s disabled by default. Unfortunately, you can’t enable it without modifying the shortcodes.css file directly. You have to delete this line:
.responsive #top .av-submenu-container{top: auto !important; position: relative !important; height:auto; }Regards,
IsmaelIsmael,
Where would I find that file to edit and what line is it on. I checked the style.css under the editor didn’t see anything like that. Thanks.
Hi!
Look for css > shortcodes.css file. You need to edit this file via ftp or your cpanel.
Best regards,
IsmaelHi,
Trying to achieve sticky submenu for this page: http://www.brickcitylive.com/lovenewarkcouples/
Modified shortcodes.css per Ismael, but my mobile menu still disappears upon scroll. Please help?
Much appreciated
Hi!
It seems like
.responsive #top .av-submenu-container { top: auto !important; position: relative !important; height: auto; }Ismael mentioned is still in active. Please make sure to flush cache after making the changes.
Best regards,
YigitHi,
i’ll like to make my menu sticky/floating on mobile, i’ve tried the quick css codes from other threads, but none seem to work. Specifically, i want the whole brown portion on top to move together while scrolling.
image link on responsive:
thanks for the help!
cheers!
Hi,
Sticky or fixed elements are not fully supported on mobile devices or it is inconsistent, that’s why it’s disabled. You can set the position property of the #header container to fixed but it may create other issues.
@media only screen and (max-width: 767px) { .responsive #top #wrap_all #header { position: fixed; } }Best regards,
IsmaelHi everyone,
I have see lots of codes for the sticky mobile menu…but, none of them are working ok in several mobile devices…Just to be sure, is this a feasible option for mobiles? If so, please, could you take a look at http://www.ilovealcazar.com in a mobile device and let me know the customization? In some devices it works fine, but, once I put the mobile phone at landscape, the social icons are shown and it appears actually a bit weird…So is it possible to include a code for sticky header (without losing content) and order the social icons? If not, how can i make to include the arrows for going to the top?I hope this makes sense…just try the page on a mobile device (portrait and landscape)
Thanks in advance,Hello there,
Any news about this?
By the way, I don´t know if comment this here as well or not…The page looks fine now, but, if I open it on Internet Explorer 11.0.9600.17843 i have problems with the footer (it seems much longer than expected, and the image on the second colum is not visible)…. I have tagged this now as Internet Explorer problem as well just in case,Thanks in advance,
Hello again,
Just to let you know that the problem with internet explorer mentioned above (one of the problems) is already solved…
The sticky menu is still pending
thanksHi davidmartinserrano,
Please remove line-height: 26!important; from here
It makes the burger go too high on mobile.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
@media only screen and (max-width: 767px) { .responsive #top #wrap_all #header { position: fixed; } #top .main_menu ul.menu li a { box-shadow: none !important; } #header_meta { display: none } #top #wrap_all .main_menu ul.#avia-menu.menu li.av-burger-menu-main.menu-item-avia-special a { line-height: 88px !important; } }If you need further assistance please let us know.
Best regards,
VictoriaHello Victoria,
Thanks for your answer… It does work fine in 2 mobile devices I have tested (portrait and landscape) Thanks! Only one point..I´m using css hero for styling the menu tabs…and if I choose the readymade style that I have chosen, I do need the line height 26 px for the text being situaded in the middle of the button…Otherwise, the text is positioned too far on the top…. Now I can see the social icons ok in mobile…but, I still have the burguer icon too high…. Is there any other way for changing this?Thanks in advance,
By the way: I have posted some responsiveness issues here: https://kriesi.at/support/topic/responsive-general-issues/ .. They are the last amendments needed to submit or web….just in case you want to take a look
Sorry I forgot to mention that another one post open is this: https://kriesi.at/support/topic/right-align-last-main-menu-item-while-other-main-menu-items-remain-left-align/#post-892897
I also mentioned this problem in the resposiveness issues thread just in case….
Thanks and great support!Sorry again, I forgot to mention one point…. I´m not sure if support prefers to post every different problem in one post or not….but, I have a little doubt…
I have a heart icon (red) inserted on the text footer,column….and in the socket (2 positions)…The point is that in some computers i see it red, in others not…in some mobiles yes, in others no….. Do you know why can be this happening? It was inserted directly with code…
Thanks and sorry again for so much hassle…
Hi davidmartinserrano,
Can you please be more specific on which computers and in which browsers the icon is of different color?
Best regards,
VictoriaHello Victoria,
It may seems a non-sense but, I do see the red color of the heart icon on mobiles…but, on my laptop, using chrome & internet explorer I don´t see them….
Please let me know if you can help in the following open points:
—Heart icon red color (abovementioned)
—Burguer icon on mobile (abovementioned the point of not being able of erasing the line height of the menu)
— Resposiveness issues (other thread posted above) : https://kriesi.at/support/topic/responsive-general-issues/
— Menu –> Submenu items open to the left instead of right (Floated button i on the right is causing problems)Thanks for your help,
Hi davidmartinserrano,
The button is black in Chrome on a Mac and on my iPhone.
This is the code for moving the burger@media only screen and (max-width: 767px) { ul#avia-menu.av-main-nav { margin-top: 40%; } }Do you mean the flyout to the left or the left-aligned text?
Best regards,
VictoriaHello Victoria,
Burguer icon is now ok! Regarding heart red icon, I see it red in my different android devices … If you think it´s gonna be quicker, let me know a html code for a simple red heart icon and I will include it on the footer and socketRegarding other problems, are all mentioned in this post, which I will be monitoring:
Thanks again!
Hi,
You can use the theme’s icon shortcode to create a heart icon.
[av_font_icon icon='ue806' font='entypo-fontello' style='' caption='' link='' linktarget='' size='80px' position='left' color='#f20040' admin_preview_bg=''][/av_font_icon]Just add the shortcode inside a text widget.
Best regards,
IsmaelThanks Ismael,
I have tried putting it on the socket, and it doesn´t work…I have also tried to include it on the text widget TITLE on the footer and it doesn´t work either…Actually I achieved it with html code directly, and it looks fine..the problem is that I don´t know why in some places (like my laptop) it appears grey..and in others, like my android devices, red…. I don´t even have the html code because it was copy/paste and it is now a heart icon, which I don´t know how to obtain back the html code….
Is there anyway of achieving it with a html direct code instead of fontello icons?
By the way, this was commented in this post (above)…I have achieved a sticky menu for mobile…but, I have a little problem…It occuppies too much space of the first slider…I have tried decreasing the size of the header, and changing logo for mobile like here: https://kriesi.at/support/topic/alternate-logo-for-mobile/ … It works, but it seems the header is still occupying the same space and cutting a bit of the main slider…I have also seen that in pageSpeed Insights, the speed for mobile have been decreased considerably…Does it has something to do?
Thanks in advance
Hi,
I have tried putting it on the socket, and it doesn´t work…I have also tried to include it on the text widget TITLE on the footer and it doesn´t work either…
You have to add it in the text widget editor directly. I checked the site but I can’t find the heart icon in the footer. What is the html code that you used?
Best regards,
IsmaelHi Ismael,
This is for the widget title:
<p>I<span style=”font-size:500%;color:red !important;”>♥</span>Alcazar</p>Then, it was automatically transformed into a heart…I copy the text and i pasted on the socket…
Now, I have change this and I have included on the socket the following html code:@ I<span style=”font-size:130%;color:red !important;”>♥</span>Alcazar[nolink] || Política de Privacidad
The point is that the color is working on the footer (laptop) but no on the widget title….However, as stated before, on android devices, I see the red color in both places: widget title (footer column 1) and socket
Could you please let me know why the color for the footer widget title is still being grey on laptops?
Thanks
- You must be logged in to reply to this topic.