Viewing 25 posts - 1 through 25 (of 25 total)
  • Author
    Posts
  • January 4, 2014 at 6:43 pm #205371
    progenki

    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

    January 4, 2014 at 6:44 pm #205372
    progenki

    http://www.progenki.com

    January 5, 2014 at 8:16 am #205513
    Ismael

    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

    March 28, 2014 at 9:54 pm #244585
    jrgrigg

    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

    March 30, 2014 at 4:02 pm #245132
    Yigit

    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

    April 2, 2014 at 12:19 am #246312
    jrgrigg

    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

    April 2, 2014 at 9:07 am #246407
    Ismael

    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

    April 2, 2014 at 5:23 pm #246624
    jrgrigg

    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

    April 2, 2014 at 6:30 pm #246658
    Yigit

    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

    April 2, 2014 at 7:27 pm #246702
    jrgrigg

    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.

    April 3, 2014 at 7:08 pm #247184
    Yigit

    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

    April 3, 2014 at 7:37 pm #247202
    jrgrigg

    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

    April 3, 2014 at 11:36 pm #247247
    Yigit

    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

    April 8, 2014 at 10:30 pm #248968
    jrgrigg

    Still doesn’t work…

    April 9, 2014 at 3:20 am #249026
    Ismael

    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

    April 9, 2014 at 3:47 am #249034
    jrgrigg

    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

    April 9, 2014 at 8:58 pm #249390
    Cheryl

    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 :)

    April 10, 2014 at 3:27 am #249563
    Ismael

    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

    April 10, 2014 at 3:45 am #249566
    jrgrigg

    http://www.orangeslicenetwork.com

    April 10, 2014 at 8:24 pm #249918
    Cheryl

    Yes, that worked.

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

    Cheryl :)

    April 11, 2014 at 1:47 am #250008
    Yigit

    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

    April 21, 2014 at 4:49 pm #253922
    jrgrigg

    Hi Yigit,

    This does not work either.

    -Jonny

    April 22, 2014 at 2:40 pm #254338
    Yigit

    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

    April 22, 2014 at 3:23 pm #254388
    jrgrigg

    Hi Yigit,

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

    The code you just sent doesn’t work either.

    April 22, 2014 at 3:26 pm #254390
    Yigit

    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

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