Viewing 25 posts - 1 through 25 (of 25 total)
  • Author
    Posts
  • #205371

    Hey,

    I am not sure why my last inquiry was closed but I still need help in getting my logo to fit in the mobile view and have the menu appear. Please advise.

    Thank you

    #205372
    #205513

    Hey!

    Please add this on your custom.css or Quick CSS to fix the logo:

    @media only screen and (max-width: 767px) {
    .responsive .logo img {
    margin: 0 auto;
    max-width: 100%;
    width: 100% !important;
    position: relative;
    top: 15px;
    }
    }

    Did you modify anything on the theme files? The responsive menu is not showing. You have a lot of plugins installed, please try to deactivate them. See if it fixed the issue.

    Best regards,
    Ismael

    #244585

    Hi,

    I’m having a similar issue.

    When I place my logo in the center with menu buttons below, the logo’s left side is cut-off in mobile view. Also, I’m noticing that the menu button covers everyone’s logo (everyone who is using the Enfold theme).

    Is there going to be a fix soon?

    http://www.orangeslicenetwork.com

    #245132

    Hi!


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

    @media only screen and (max-width: 767px) { 
    .responsive .mobile_slide_out .logo {
    margin-left: 35%;
    }}

    P.S.: Your website looks great!

    Cheers!
    Yigit

    #246312

    Thanks Yigit!

    I tried the code, and it fits the logo in the screen, however, it stretched the image out of proportion. Is there a way to fit the logo without stretching the logo?

    Thanks,
    Jonny

    #246407

    Hi!

    Thank you for the explanation.

    Please try this one:

    @media only screen and (max-width: 767px) {
    .responsive .mobile_slide_out .logo, .logo a, .logo img {
    float: left;
    width: 92% !important;
    top: 18px;
    }
    }

    Adjust the width and the top position if necessary.

    Cheers!
    Ismael

    #246624

    Thanks Ismael, but that didn’t work either. It’s still cut off. The closest solution is Yigit’s, however, it would be nice if the logo downsized proportionally to mobile view.

    Is there another fix?

    Thanks,
    Jonny

    http://www.orangeslicenetwork.com

    #246658

    Hey!

    Please add following code to Quick CSS as well

    @media only screen and (max-width: 480px) {
    .responsive .mobile_slide_out .logo, .responsive .logo a, .responsive .logo img {
    max-width: 110%;
    height: auto !important; }}

    Best regards,
    Yigit

    #246702

    Hi Yigit,

    Thanks for trying. This didn’t do anything either. It just put the logo back in the original spot where the left side is getting cut off.

    #247184

    Hi!


    @jrgrigg
    do you mind creating a temporary admin login and posting it here privately so i can take a look it for you?

    Best regards,
    Yigit

    #247202

    Hi Yigit,

    Thanks for trying to help. I’d rather not give out a temporary admin login.

    This error shows up on every single enfold themed website when the logo is put in the center and menu buttons below (like http://www.inspiredtravel.com). Looks like they took your fix as well (Reply #245132). Their logo looks unproportional still.

    Does it show the logo cut off on Enfold’s demo? Maybe not since the logo has a smaller width…

    Thanks,
    Jonny

    #247247

    Hi!

    Please try the like following

    @media only screen and (max-width: 480px) {
    .responsive .mobile_slide_out .logo, .responsive .logo a, .responsive .logo img {
    height: auto !important; }}

    Issue was fixed and will be included in upcoming update

    Best regards,
    Yigit

    #248968

    Still doesn’t work…

    #249026

    Hi!

    The codes above should fix the issue on mobile. Please try this:

    @media all and (max-width: 767px) {
    .responsive .logo {
    height: 50px;
    }
    }
    

    This is the screenshot after the css modification.

    Regards,
    Ismael

    #249034

    Hi Ismael,

    Thanks for trying again. This does not work.

    Is your screenshot of the logo after the CSS modification the example with the logo centered with menu items below on desktop version?

    Please see below screenshots:

    https://orangeslicenetwork.com/wp-content/uploads/2014/04/Screen-Shot-2014-04-08-at-8.42.13-PM.png
    https://orangeslicenetwork.com/wp-content/uploads/2014/04/Screen-Shot-2014-04-08-at-8.42.26-PM.png

    Thanks,
    Jonny

    #249390

    I’m having the same issue with the logo and have tried all the codes above with no success.

    I too have the logo set for centered with menu items below on desktop version.
    http://www.blimpiesubs.menu

    Look forward to a final resolution.

    Thanks,
    Cheryl :)

    #249563

    Hi!


    @jrgrigg
    : The solution is for the OP. I’m sorry about that. Can you please post the link to the website? I visited the link that you posted but it is different from the screenshot and the logo is ok there.

    @Cheryl: Please add this on Quick CSS or custom.css:

    @media only screen and (max-width: 767px) {
    .responsive .mobile_slide_out .logo {
    float: left;
    left: 0;
    -webkit-transform: translate(0, 0);
    }
    
    .responsive .logo a, .responsive .logo img {
    margin: 0;
    max-width: 100%;
    height: 65px;
    max-height: 65px;
    top: 5px;
    }
    }

    Cheers!
    Ismael

    #249566
    #249918

    Yes, that worked.

    Thanks for your help and persistence, Ismael. You’re the best!

    Cheryl :)

    #250008

    Hi!


    @jrgrigg
    Please add folllowing code to Quick CSS

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

    Cheers!
    Yigit

    #253922

    Hi Yigit,

    This does not work either.

    -Jonny

    #254338

    Hi!

    Do you remove custom CSS code after trying? There may be a caching issue because i do not see that code is being applied.
    Please add following code to Quick CSS as well

    @media only screen and (max-width: 768px) {
    .html_header_top.html_logo_center .logo {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    }}

    Cheers!
    Yigit

    #254388

    Hi Yigit,

    I removed the last one because it didn’t work…

    The code you just sent doesn’t work either.

    #254390

    Hi!

    It does work on my end. Please flush browser cache and refresh your page a few times. Also add following code to Quick CSS

    @media only screen and (max-width: 480px) {
    .responsive .logo a, .responsive .logo img {
    max-width: 85%;
    height: auto !important; }}

    Regards,
    Yigit

Viewing 25 posts - 1 through 25 (of 25 total)
  • The topic ‘Logo cut off and mobile menu’ is closed to new replies.