Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • September 30, 2014 at 7:30 pm #327534
    heideo

    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

    October 1, 2014 at 11:45 am #327978
    Ismael

    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

    October 1, 2014 at 8:47 pm #328477
    heideo

    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?

    October 1, 2014 at 8:55 pm #328484
    Yigit

    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

    January 30, 2019 at 5:24 pm #1060556
    Chris

    Hi,

    I tried the CSS code from this thread, and from these two threads:

    Logo Size Too Big on Mobile Device

    Responsive logo size

    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?

    January 31, 2019 at 3:46 am #1060685
    Vinay

    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

    January 31, 2019 at 12:20 pm #1060920
    Chris

    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?

    February 2, 2019 at 9:37 am #1061932
    Vinay

    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

    February 11, 2019 at 11:49 am #1065388
    Chris

    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

    February 12, 2019 at 3:52 pm #1065975
    Ismael

    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

    February 12, 2019 at 5:18 pm #1066004
    Chris

    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.

    February 14, 2019 at 4:18 am #1066761
    Ismael

    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

    February 15, 2019 at 1:01 pm #1067443
    Chris

    Hi Ismael,

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

    You can close this thread now.

    February 15, 2019 at 7:32 pm #1067541
    Jordan Shannon

    Hi,

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

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Menu goes behind logo on tablet only’ is closed to new replies.