[Nancy]

On Android devices on a 10.1 Samsung Note or on a 7″ Nook HD.

1. Menus wrap w/ Chrome and Opera and Next Browser – any way to prevent this?

2. w/ stock browser and Dolphin, when using the social widget + Search, the search button is not next to the social icons. They are separated by what looks like the width of the search box.

[Sakin]

@Nancy: Can you post your site URI and screenshot of issue?

[Nancy]

Sorry about that.

URL: http://ipcrew.com/SHSTest

Chrome Issue: http://www.ipcrew.com/SHSTest/wp-content/uploads/2014/03/ScreenshotChrome.png

Dolphin Issue: http://www.ipcrew.com/SHSTest/wp-content/uploads/2014/03/ScreenshotDolphin.png

[Sakin]

@Nancy: This is really strange issue. I haven’t seen it. I checked in with chrome but don’t use Android devices. The menu item with should be flexible and shouldn’t be two line for items longer.
Can you try adding in the following CSS
#fixed-header-top ul li a, #header-menu ul.menu a, .widget_catchevolution_social_search_widget #social-search { width: auto; }

[Nancy]

No change with the code above. The wrapping in my fixed menu on top actually looks ok. Not sure why the other menu is wrapping below and with a big gap.

[Sakin]

@Nancy: So now you have menu on single line and now only issue with gap?

[Sakin]

@Nancy: Can you try adding important. Your browser is taking fixed width. It’s really strange.
#fixed-header-top ul li a, #header-menu ul.menu a, .widget_catchevolution_social_search_widget #social-search { width: auto !important; }

[Nancy]

@Sakin: No change. Still looks like the image I posted.

[Sakin]

Ok one more test. Can you click on admission page and check it. I want to check if this is issue when selecting current page.

[Nancy]

The “About SHS” looks correct when I select the admissions page. It’s only an issue on the home page.

The fixed menu bar wraps the same regardless of page.

[Nancy]

Adding “!important” messes up all the menus on all platforms. The menu boxes are all different sizes and not all the items appear on the correct lines.

(Website development definitely has gotten more complicated with all the different devices, different OS’s and screen sizes!)

[Sakin]

@Nancy: Can you try adding in the following.

#header-menu #access ul.menu li, #header-menu #access ul.menu li a {
    display: inline-block;
}

[Nancy]

No difference.

[Sakin]

@Nancy: Ok now let’s try to reduce the spaces by reducing the padding. The following css will change from 20 to 15. I hope this will fix it. Your browser is taking static width for the menu item and this is strange.
#header-menu ul.menu a { padding: 0 15px; }

[Nancy]

Googled chrome android menu issues and found a solution. Added the following:

#header-menu ul.menu a { white-space: nowrap; }
#fixed-header-top ul.menu a { white-space: nowrap; }

to solve the problem.

The last Android issue I am having is with Dolphin and the social media search box is not next to the FB, Twitter icons.

Dolphin Issue: http://www.ipcrew.com/SHSTest/wp-content/uploads/2014/03/ScreenshotDolphin.png

[Nancy]

Ended up removing the code above. My menus no longer wrapped in other cases when they needed too. Is there anyway to just apply it to the top level menus and not sub menus?

[Sakin]

@Nancy: If that is white-spaces issues then you can add the following CSS in “Appearance => Theme Options => Custom CSS” box.

#fixed-header-top ul li a, #header-menu ul.menu a { white-space: nowrap; }
#fixed-header-top ul.menu ul li a, #header-menu ul.menu ul li a { white-space: normal; }

[Nancy]

That works perfect. Thank you!

Any ideas on the social media icon/search issue on the dolphin browser?

[Sakin]

@Nancy: Don’t have that browser to test. You can try adding in the following CSS.

#sidebar-header-right .widget_catchevolution_social_search_widget .social-profile {
    display: block;
    width: 90px;
}

[Nancy]

Looks the same. It looks like blank space between the icons is the same width as the search box that pops out when you click the button. If I look really carefully, the “S” from the default search text is on right hand side of the search icon. When I click on the icon, the box does expand out and look correct though it is missing the default search text.

[Author]

Posts