Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • September 21, 2017 at 4:55 pm #854945
    alex2545

    Hello,

    We are pretty much finished with out site. However there are a few things that are not behaving correctly:

    1. When viewing the site on mobile phone (regardless of Android or iPhone) The words for the menu are not showing up until you hover over them.
    2. There is too much space on the left. Why doesn’t it center on the mobile phone like it does when you look at the site on a desktop or laptop/iPad?
    3. On the mobile version, there is to “return to top” arrow at the bottom of the bio page.

    Thank you!

    September 23, 2017 at 4:30 pm #855820
    Mike

    Hey alex2545,
    1: Try this css for your mobile menu text color:

    #top #mobile-advanced .avia-menu-text {color: red !important;}

    2: I’m not sure what you mean, it looks like you are using the “Sidebar Flyout Menu (Classic)” setting, which floats the menu items to the left, not centered. The “Full Page Overlay Menu” centers the menu items.
    2017-09-23_101901
    Try this css to centered the items:

    #top #mobile-advanced li {text-align: center !important;}

    3: I assume that what you mean by mobile includes tablet, so try this code to remove that back to top arrow:

    @media only screen and (max-width: 1024px) { #scroll-top-link {display:none!important;}}

    Best regards,
    Mike

    September 25, 2017 at 3:05 am #856283
    alex2545

    Thank you for the reply!

    #1 – worked and fixed.
    #2 – on the mobile it is trimming the text on the right. Why does it leave so much space on the left (this is not pertaining to the menu, just regular text.) I have provided a screenshot.
    #3 – I mistyped. It should say that there is “no” return to top arrow. How can I get that to appear on the mobile version?

    Thank you!

    September 25, 2017 at 5:19 pm #856602
    Yigit

    Hi,

    1- Great! Glad Mike could help!
    2- Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    #top #main .avia-section .template-page {
    padding: 10px;
}

    3- Please refer to this post – http://kriesi.at/documentation/enfold/display-footer-menu-scroll-to-top-button-on-mobile/

    Best regards,
    Yigit

    September 26, 2017 at 5:38 am #856774
    alex2545

    Thanks Yigit! However, still a couple things missing:

    1. In the mobile version, when the text is on red background it should be white text (not red).
    2. This code worked for the mobile but then took all the padding away from the desktop version.
    3. Works great, thanks!

    September 26, 2017 at 10:52 am #856866
    Mike

    Hi,
    1. this will change the current menu item to white text

    #top #mobile-advanced .current-menu-item .avia-menu-text {
    color: #fff !important;
}

    2. Replace Yigit’s code with this, it makes Yigit’s code only work on mobile

    @media only screen and (max-width: 767px) { #top #main .avia-section .template-page {
    padding: 10px;
}}

    Best regards,
    Mike

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.