Tagged: 

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • July 7, 2014 at 3:22 pm #288004
    Ralph12

    Hi,

    I’ve got several questions re the small screen views of Enfold’s mobile main menu and top bar menu. First the mobile main menu questions:

    • Is Enfold’s drop-down mobile menu, I’m seeing on several user sites, removed in newer Enfold versions? Because I’m using the latest version and I’m getting the square menu button as seen on the demo site;
    • Just as the mobile drop-down menu, I’d like the square menu button & logo to center and stack. As my site’s logo is currently overlapped by the button on small screens. Can this be done using nothing but CSS? As I prefer not to edit any of Enfold’s non-CSS code;
    • In case stacking the logo and mobile menu button, involves non-CSS coding… would it also be possible to use nothing but CSS to shrink & vertical align the logo, when viewing the site on smaller screens?

    And now the top bar menu question:

    I’m using only a few links and social icons in the top bar menu, which means that the links and social buttons don’t need to stack to fit smaller screens. Is there an easy CSS method, which keeps the links and social icons in-line / prevents them from stacking when viewing on smaller screens? As the stacking means that the top bar is currently taking up vertical space for no reason actually.

    Also, does Enfold actually have a minimum screen width? In that its width doesn’t go, for example, below 320px (iPhone portrait view)?

    Thanks!

    Ralph

    July 7, 2014 at 8:56 pm #288175
    Josue

    Hi Ralph,

    Can you post the link to your website please?

    Answering the first question, yes the dropdown menu was removed because of compatibility issues.

    Regards,
    Josue

    July 8, 2014 at 9:38 am #288364
    Ralph12
    This reply has been marked as private.
    July 9, 2014 at 10:29 am #288904
    Ralph12

    Hi,

    Could someone please help with the issues mentioned in my first post?

    Thanks in advance.

    Kind regards,

    Ralph

    July 9, 2014 at 4:45 pm #289086
    Yigit

    Hi!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    @media only screen and (max-width: 767px) {
.responsive .logo a, .responsive .logo img { max-width: 80%; height: auto !important; }
.responsive #header .social_bookmarks { width: auto; }}

    Best regards,
    Yigit

    July 10, 2014 at 2:52 am #289283
    Ralph12

    Thank you, Yigit!

    Do you, or anyone else, perhaps know of a pure CSS method to vertical align the logo in the middle of the menu bar? As the smaller logo is now aligned towards the top of the menu bar.

    Thanks again,

    Ralph

    July 10, 2014 at 3:29 am #289290
    Josue

    Hey Ralph!

    Try adding this code to the Quick CSS:

    @media only screen and (max-width: 480px) {
.logo a {
    top: 15px;
}
}

    Cheers! 
    Josue

    July 10, 2014 at 10:47 am #289404
    Ralph12

    Thank you very much for your time & effort, guys! Your input makes the main menu & top bar look awesome! I’ve to say that your support definitely matches the awesomeness of the Enfold theme itself!

    Thanks again & regards,

    Ralph

    July 10, 2014 at 1:53 pm #289471
    Yigit

    Hey!

    You are welcome Ralph, glad we could help! Thanks for your kind words :) Let us know if you have any other questions or issues

    Best regards,
    Yigit

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Mobile main menu & top bar questions’ is closed to new replies.