Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #327534

    I tried the fix you suggested below to someone else and it doesn’t work for the tablet size (between 768 and 990 pixels wide).
    How should the code below be changed to only reduce the padding of menu items for tablets?

    @media only screen and (max-width: 1140px) {
    .av-main-nav > li > a { padding: 0 4px; }}

    Thank you

    #327978

    Hi heideo!

    Thank you for using Enfold.

    Please go to Enfold > Header Layout > Mobile Menu panel. Choose the second option of the Header Mobile Menu activation setting.

    Regards,
    Ismael

    #328477

    Thank you for your reply and for this great WP theme.

    I was hoping there was another option rather than just removing the entire menu to a responsive drop down menu on tablets because that makes the website harder to use on a tablet. We have a lot of users of our site on tablets. I was hoping I could reduce the padding between the menu items for tablets (screens between 768 and 990 pixels wide) through a little code.

    Can you help with this?

    #328484

    Hi!

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

    @media only screen and (max-width: 989px) and (min-width: 768px) {
    .responsive .main_menu ul:first-child > li > a {
    padding: 0 7px;
    }}

    Best regards,
    Yigit

    #1060556

    Hi,

    I tried the CSS code from this thread, and from these two threads:
    https://kriesi.at/support/topic/ (Purchase code hidden if logged out) -mobile-device/

    But none of them worked.

    My problem is excatly the same as that of this thread: the logo overlaps the left-most menu item on the tablet (in portrait mode).
    Except that I would probably prefer to reduce the logo size in the tablet version only (instead of reducing the menu padding in the tablet version).

    Any further ideas?

    #1060685

    Hi,

    You can reduce the logo size by adding custom CSS. Please refer to the logo docs. Please change the media Query max-width to 990px from 767px.

    You may not see the changes until the cached files are cleared in your browser.

    Please perform the below steps to clear the browser cache:

    1. Disable “merging and compression” for CSS and JS files from Enfold > Performance.
    2. If a caching plugin is installed check the plugin settings and clear the cache and deactivate the plugins for testing purpose.
    3. Hard refresh by pressing Ctrl + Shift + F5 on your browser or press the F12 key to open chrome dev tools and right click on the refresh button and select “Empty Cache and Hard Reload”.

    Best regards,
    Vinay

    #1060920

    Hi Vinay,

    Thanks for your reponse.

    So I posted this code from the Enfold logo documentation into my Quick CSS field in General Styling:
    @media only screen and (max-width: 989px) and (min-width: 768px) {
    #top .logo ,
    #top .logo a {
    max-width: 60% !important;
    width: 60% !important;
    height: auto;
    }}

    (I only want the logo to be resized on the tablet version, so I tweaked the Media Query dimensions and left out the general logo resizing code for the desktop version.)

    I also disabled “merging and compression” for CSS and JS files.
    I also checked and I don’t have a caching plugin installed.
    And I cleared the cache on my tablet’s browser (and on my desktop version just in case).

    But still no luck. The logo is the same size.

    Any suggestions what to do now?

    Note: I also have this custom CSS earlier on i.e. higher up in the Quick CSS field:

    @media only screen and (max-width: 767px) {
    .logo, .logo a, .logo img {
    max-height: 50px!important; }
    .responsive .mobile_slide_out .logo img {
    margin-left: -30px!important; }}

    @media only screen and (max-width: 480px) {
    .logo {
    position: relative!important;
    top: 13px!important;
    }
    #header_main .inner-container {
    height: 120px;
    }}

    Could that be messing with things?

    #1061932

    Hi,

    Thank you for writing to us.

    I checked your site but I’m not sure why the CSS is not applying.

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

    1. Install and activate ” Temporary Login Without Password “.
    2. Go to ” Users > Temporary Logins ” on the left-side menu.
    3. Click ” Create New “.
    4. Add the email address for the account ( you can use (Email address hidden if logged out) ), as well as the ” Role ” making that the highest possible and the expiry about four days
      ( do be sure that we have enough time to debug ).
    5. Click ” Submit “.
    6. You’ll now have a temporary account. Please provide us here in the private section the URL, so we can login and help you out.

    When your issue is fixed, you can always remove the plugin!
    If you prefer to not use the plugin, you can manually create a admin user and post the login credentials in the “private data” field.

    Best regards,
    Vinay

    #1065388

    Hi Vinay,
    Sorry for the delayed reply.
    Thank you!
    I’ve created the temporary login and will give you the link in the private content area.
    Thanks again, appreciate your help!
    Chris

    #1065975

    Hi,

    Thank you for the update.

    I put this code in the Quick CSS field to adjust the size of the logo and menu padding.

    @media only screen and (max-width: 1024px) and (min-width: 768px) {
    .responsive .logo img {
        margin: 0;
        max-width: 80%;
    }
    
    .responsive .main_menu ul:first-child > li > a {
        padding: 0 7px;
        font-size: 12px;
    }
    }
    

    Best regards,
    Ismael

    #1066004

    Hi Ismael,

    Thanks so much for making that change!
    However, it doesn’t seemed to have helped :/
    I even edited your code to take the max width down to 50% and even 30%, but there was no change.
    I cleared the caches on both my tablet and mobile phone as well.

    #1066761

    Hi Sheila,

    Thanks for the update. Did you remove the browser history or purge the cache before checking the page? Here’s how it’s supposed to look like.

    Screenshot: https://imgur.com/a/sQJkunH

    Best regards,
    Ismael

    #1067443

    Hi Ismael,

    I checked again and it’s all been fixed now. Thank you so much!

    You can close this thread now.

    #1067541

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

Viewing 14 posts - 1 through 14 (of 14 total)

The topic ‘Menu goes behind logo on tablet only’ is closed to new replies.