Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • July 5, 2017 at 2:19 pm #816738
    willemb2

    Site: http://www.loopgroepoegstgeest.nl
    With this setting: Menu and Logo Position: “Logo left, Menu right” our logo starts overlapping the menu already at about 1800 px browser width. We have activated Mobile menu for smartphones and tablets. I tried the options and custom CSS given at:
    http://kriesi.at/documentation/enfold/menu-overlaps-logo-on-tablets/ and

    Switching to mobile menu on higher resolutions

    but they do not work.
    On another site (no Enfold but a separate Sticky Header plugin) the menu wraps to avoid this before switching to mobile menu. I think I would prefer that behavior. But either way, the logo should never overlap with the menu. Is there a way to put some padding before the first menu item?

    July 5, 2017 at 2:46 pm #816751
    Yigit

    Hey,

    Please post us your login credentials (in the “private data” field), so we can take a look at your backend.

    Login credentials include:

    • The URL to the login screen.
    • A valid username (with full administration capabilities).
    • As well as a password for that username.
    • permission to deactivate plugins if necessary.

    Best regards,
    Yigit

    July 5, 2017 at 2:57 pm #816758
    willemb2

    Hello Yigit,
    Here’s the requested login.

    July 5, 2017 at 3:21 pm #816766
    Yigit

    Hi!

    I do not receive any error however login credentials do not seem to work. Can you please check them once again?

    Best regards,
    Yigit

    July 5, 2017 at 3:25 pm #816768
    willemb2

    Sorry about that. Here’s a new password. This time I verified it.

    July 5, 2017 at 3:49 pm #816776
    Yigit

    Hi,

    I added custom CSS code to the bottom of Quick CSS field however it is not working correctly. Can you please firstly update Enfold to the latest version 4.0.7 – kriesi.at/documentation/enfold/updating-your-theme-files/

    Best regards,
    Yigit

    July 5, 2017 at 4:44 pm #816811
    willemb2

    Hi Yigit. We’re now on 4.07. Update was easier than I thought.

    July 5, 2017 at 5:49 pm #816846
    Yigit

    Hi,

    I changed my code to following one

    @media only screen and (max-width: 1260px) {
#mobile-advanced, #advanced_menu_toggle, #advanced_menu_hide { display: block; }
nav.main_menu { display: none; }
.boxed #wrap_all { overflow: hidden; }}
#wrap_all {
position: relative !important;
}

    Please review your website :)

    Best regards,
    Yigit

    July 5, 2017 at 6:00 pm #816854
    willemb2

    Thank you!!! That looks much better. I will do some more testing on different computers and mobile devices later, but the first impression is good.
    There is a little more white space to the left of the logo than I would expect. Is there a way to reduce that?

    July 5, 2017 at 6:16 pm #816856
    Sarah

    Hi!

    We can nudge the logo to the left, but I think it’s better if you edited your logo image itself to have less white space on the left.

    I hope that helps!
    Best regards,
    Sarah

    July 5, 2017 at 6:21 pm #816858
    Yigit

    Hi!

    I totally agree with Sarah on this one. However if you would like to reduce left padding value of header container, please add following code to Quick CSS and adjust as needed

    .container.av-logo-container {
    padding-left: 20px;
}

    Regards,
    Yigit

    July 5, 2017 at 6:33 pm #816860
    willemb2

    On an iPad mini in horizontal/landscape mode the logo still floats over (or behind) the 2 leftmost menu items. I don’t have the knowledge to understand the code Yigit added, I only know a little HTML. If I may express a wish for a future version: make it behave as it was a table with 1 row, 2 columns, with the logo in column 1 and the menu in column 2. Or another meganism that keeps the logo apart like it keeps the menu items apart. As long as there is enough space.

    Anyway, thanks a lot for your help!

    July 5, 2017 at 6:39 pm #816862
    Sarah

    Hi!

    You can copy and paste Yigit’s code straight into the Quick CSS section under Enfold > General Styling, and see if you like the result. :) If you would like to adjust it, just let us know.

    Thank you for your feedback for the future version! It’s best if you add this request it in our feature request system here – https://kriesi.at/support/enfold-feature-requests/

    This system allows us to keep track of user suggestions and lets you vote on the feature you would like to see the most.

    Best regards,
    Sarah

    July 5, 2017 at 10:02 pm #816898
    willemb2

    With the extra code as Yigit suggested I moved the logo to the left a bit more and I also cut it down a bit. I do not fully understand the code, but I learned that I had to play a little with the value after “max-width: ” in the custom CSS to benefit from the extra space. I guess we’ll have to change that value again if we change the menu. This what we have now:

    @media only screen and (max-width: 1190px) {
#mobile-advanced, #advanced_menu_toggle, #advanced_menu_hide { display: block; }
nav.main_menu { display: none; }
.boxed #wrap_all { overflow: hidden; }}
#wrap_all {
position: relative !important;
}

.container.av-logo-container {
    padding-left: 20px;
}
    July 6, 2017 at 6:13 am #817048
    Sarah

    Thank you for sharing!

    Do you need further assistance with this topic, or can we close this thread? You can open a new one should you need help, and we’ll do our best to assist you!

    Best regards,
    Sarah

    July 6, 2017 at 12:12 pm #817171
    willemb2

    No need for further assistance, please close the thread. Thanks again!
    Kind regards,
    Willem

    July 6, 2017 at 1:20 pm #817226
    Yigit

    Hi,

    You are welcome! :)

    For your information, you can take a look at Enfold documentation here – http://kriesi.at/documentation/enfold/
    And if there are features that you wish Enfold had, you can request them and vote the requested ones here – https://kriesi.at/support/enfold-feature-requests/
    For any other questions or issues, feel free to post them here on the forum and we will gladly try to help you :)

    Best regards,
    Yigit

  • Author
    Posts
Viewing 17 posts - 1 through 17 (of 17 total)
  • The topic ‘logo overlapping menu items before switching to mobile menu’ is closed to new replies.