Penguin emoticon where menu icon should be on Ipad

Post your website URL.
So that users here can see and help.

Hello,

Here is a screen shot of the issue. You can see it is in the menu bar right above our slider where the menu icon should be. It is the appropriate menu icon when I visit the site on my iPhone but not on the iPad.

[IMG]https://i67.tinypic.com/2q1gaqv.jpg[/IMG]

If that code doesn’t work here is the URL for the screenshot:

Thank you for your help,

Nicole.

I have the same issue as well. Only on iPad in portrait mode. A penguin emoticon instead of menu bar icon.

https://signalen1.se

Hi there,

Thanks for writing in!

In regard to replace the penguin emoticon with the stripes; you could try the following code under your Appearance > Customize > Custom CSS:

#wrapper .dd-container .dd-selected-text {
    background: #000000!important;
}

@media only screen and (max-device-width: 1024px) and (min-device-width: 768px) and (orientation: portrait) {
    #wrapper .dd-container .dd-selected-text span:before {
    content: "\e939";
    position: relative;
    top: 14px;
    padding: 0px;
    margin: 0px;
    }
}

Though, this solution would cause the stripes to be jumping sometimes. You can select either to keep penguin emoticon or the stripes.

Thanks!

Thanks for the quick tip! The solution works in part as you say, however it does not look so nice that everything jumps up. It looks like you can trigger the menu just by clicking on the grey space on each side of the button as well as clicking on he actual menu button. Clicking on the button makes the content of the button jump up as the menu appears. This can be restored by clicking on the grey space on with side of the button. Calling the menu by clicking on the grey space on the side of the button, does not make the text jump. Any ideas as to why and what can be done to fix this? I have changed the menu on https://signalen1.se to reflect this. Interesting that this error does not affect the button on the iPhone, so it must be possible to fix.

Is there a more stable solution? I think most people may not know to click the icon for the menu.

Thank you for providing a solution to get rid of the penguin! I agree, a solution to fix the content jumping would be great!

Hi there,

Thanks for writing in!

Here’s the fix for jumping or penguin error; please add the following code instead any other into your custom CSS field:

#wrapper .dd-container .dd-selected-text {
    background: #000000!important;
}

@media only screen and (max-device-width: 1024px) and (min-device-width: 768px) and (orientation: portrait) {
    #wrapper .dd-container .dd-selected-text span:before {
    content: "\e939";
    position: relative;
    padding: 0px;
    margin: 0px;
    }
}

@media only screen and (min-width: 768px) {
.link-effect a:hover span, .link-effect a:focus span {
    transform: none;
}
}

Hope this helps.

Thank you!

So if I have other code in the custom css I should not add this? Because I have other code there.

Great! The new solution worked perfect for me.

Hi there,

Glad that worked!

So if I have other code in the custom css I should not add this? Because I have other code there.

Please remove the previous code I provided and add the new code solution to your custom CSS field.

Thank you!

Thanks emranemranx

You’re welcome! ??

Hello,

Thank you for the code! When I put it into the custom css field, it worked perfectly on the iPad. However, it changed my website on the iPhone! The homepage displayed the page title “Main Page” under the slide show. So above my content and under the slide show was huge text “Main Page.” And when I removed the code, the text went away and the penguin came back on the iPad. Any advice on how to hide the page title when using the new code?

Thank you!

Hi Nikki,

Specifically in your scenario; please replace the previous provided code with the following:

#wrapper .dd-container .primary-menu .dd-selected-text {
    background: #000000!important;
}

@media only screen and (max-device-width: 1024px) and (min-device-width: 768px) and (orientation: portrait) {
    #wrapper .dd-container .dd-selected-text span:before {
    content: "\e939";
    position: relative;
    padding: 0px;
    margin: 0px;
    }
}

@media only screen and (min-width: 768px) {
    .link-effect a:hover span, .link-effect a:focus span {
    transform: none;
    }
}

Hope this helps.

Thank you!