Mobile Website menu errors on android & i phone

  • Unknown's avatar
    biomike1 · Member ·

    When I preview my website in an android (HTC 1) and I phone 4s I am having problems with the layout.

    I phone 4s –
    1. Menu is not appearing at all. On the android it appears to the left of the search box, which is where I assume it is meant to be
    2. There is just a blue outline box centre just below search box.
    3. There is a black box covering the text mid way down the screen. I think this is the navigator background.

    Android
    1.There is just a blue outline box centre just below search box.

    Following is my css code that was used for some work we did to reposition the navigation bar, which may be the cause of problem 3 on the iphone.

    Any help would be appreciated.

    Thanks

    Michael

    body.custom-colors #page, body.custom-background.custom-background-image-empty #page {
    background: #ffffff;
    }

    footer.entry-meta {
    display: none;
    }

    h3, h2, h1 {
    color: #5B0012;
    }

    .wf-active .main-navigation a {
    font-size: 13px;
    }

    img.alignleft, img.alignright, img.aligncenter {
    padding: 0;
    }

    .featured-content img, .site-header img, .entry-content img, img[class*=”align”], img[class*=”wp-image-“] {
    padding: 0;
    }

    #page {
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    }

    .site-header img {
    max-height: 95px;
    visibility: hidden;
    }

    .main-navigation {
    margin: 0;
    position: absolute;
    top: 178px;
    width: 100%;
    }

    .main-navigation ul {
    padding-left: 10%;
    padding-right: 10%;
    }

    .menu-main-container {
    background-color: #000000;
    height: 30px;
    width: 100%;
    padding-top: 5px;
    }

    .main-navigation a {
    color: #FFFFFF;
    }

    .main-navigation a:hover, .main-navigation li.current_page_item > a, .main-navigation li.current-menu-item > a, .main-navigation li.
    current_page_ancestor > a, .main-navigation li.current-menu-ancestor > a {
    color: #FF6600;
    }

    .main-navigation ul ul :hover > a, .main-navigation ul ul a:hover, .main-navigation ul ul li.current_page_item > a, .main-navigation ul ul li.current-menu-item > a, .main-navigation ul ul li.current_page_ancestor > a, .main-navigation ul ul li.current-menu-ancestor > a {
    background-color: #000000;
    color: #FF6600;
    }

    .main-navigation ul ul {
    background-color: #000000;
    }

    .main-navigation a:hover, .main-navigation li.current_page_item > a, .main-navigation li.current-menu-item > a, .main-navigation li.current_page_ancestor > a, .main-navigation li.current-menu-ancestor > a {
    color: #FF6600;
    }

    .site-header {
    background: url(‘http://wildforestgym.files.wordpress.com/2014/03/header_21-4.jpg’) no-repeat scroll center bottom rgba(0,0,0,0);
    height: 177px;
    }

    .site-header img {
    visibility: hidden;
    max-height: 148px;
    }

    .hentry {
    margin-left: 50px;
    }

    #content {
    margin-right: 30%;
    }

    .site-content {
    margin-right: -30%;
    }

    #secondary {
    margin-right: 3%;
    }

    .masthead-inner {
    position: relative;
    }

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    timethief · Member ·

    I don’t help with CSS editing so forgive me please if what I post is not helpful. Just saying … Sundance is a responsive layout theme. See here http://theme.wordpress.com/themes/features/responsive-layout/

    Know that responsive width means the layout adapts depending on the size of the device being used to view your site. When responsive width themes are viewed on mobiles sidebars appear below the posts in order to provide as much space as possible for reading.

    The mobile theme is a completely different theme and when we use a responsive layout theme we go to > Appearance > Mobile and disable the mobile theme

  • Unknown's avatar
    biomike1 · Member ·

    Hi timethief

    The reason why I switched the mobile theme on is because:

    I Phone

    1. My header looks really bad as most of it is cut out of the screen view.
    2. The Menu drops down over the rest of the text without a background. So is pretty illegible.
    3. The black navigator banner is now running across the images/text

    Android

    1. The header image is not appearing (out of interest same problem I am getting on the full IE version – other browsers are fine)

    I have just switched mobile them off for you to preview it.

  • Unknown's avatar
    hallluke · Member ·

    Here are the breakpoints that are used by your existing (responsive) theme:

    @media screen and (max-width: 1024px) {}
@media screen and (max-width: 768px) {}
@media screen and (max-width: 600px) {}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {}

    You could perhaps try wrapping the bits that are causing problems, like the menu and header repositioning and styling in a similar declaration so they only take effect for desktop screens, then let the default theme styles show for table and smartphone users.

    The other option is to set up some more specific rules for smaller screen sizes that fix the issues you’ve noticed. It depends how much of your customisation you want all your users to be able to see.

    I like the desktop design though, the nav menu particularly looks great, good work!

  • Unknown's avatar
    biomike1 · Member ·

    Hi Halluke

    I am not a techie or coder so not sure how or where these codes should be inserted. Any chance of asking for some assistance with it. ;’)

    In regard to customization ultimately I just want to have a viewable header, clear drop down menu and to remove the navigation bar that is covering text/images (but without affecting desktop version).

    Thanks

    Michael

  • Unknown's avatar
    biomike1 · Member ·

    Can anyone help please.

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, I took a look and see that you have deactivated the mobile theme. If you can reactivate that, I can take a look and see if we can get things to look the way you want them to.

  • Unknown's avatar
    biomike1 · Member ·

    As always your a saviour! Mobile activated.
    Thanks.

  • Unknown's avatar
    thesacredpath · Member ·

    Thanks for reactivating. This will get rid of the black bar behind the images. 

    .mobile-theme .menu-main-container {
    background: none;
}

    I’m assuming you want to add the existing header you have to the mobile, which is possible, but to keep the entire header visible, it ends up getting very tiny on phones. Add the following CSS and then view your site on a mobile. The second rule gets the menu back up where it should be in the blue area at the top. 

    .mobile-theme #branding {
    background: url("http://wildforestgym.files.wordpress.com/2014/03/header_21-4.jpg") no-repeat scroll top center transparent;
    background-size: contain;
    height: 177px;
}
.mobile-theme #access {
    top: 0;
}

    We can remove the background size declaration and change the background position to top left as in the below, but the “wild forest gym” section of the header is too wide to be completely viewable on phones. You can replace the first rule above with the following and then try that out also. 

    .mobile-theme #branding {
    background: url("http://wildforestgym.files.wordpress.com/2014/03/header_21-4.jpg") no-repeat scroll top left transparent;
    height: 177px;
}

    You can create a new more simple header image to use on mobile and replace the URL in the background declaration. I would suggest an image 600px in width with the logo area being about 320px max width and then use the latter .mobile-theme #branding rule above.

  • Unknown's avatar
    biomike1 · Member ·

    Thesacredpath thanks for that.

    Header – Just to say I managed to reduce the height to 110px so it removed the big background.

    Menu – There is a glitch with the main tabs not appearing most of the time. I am getting no text and just the white background however they are still clickable. The sub menus appear. Tested on android and iphone.

  • Unknown's avatar
    biomike1 · Member ·

    Also what is the central white framed box above the header. On android it has a ? in it.

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, which phone are you using and which browser so I can look at things?

    There seems to be a missing image: Here is the URL: http://wildforestgym.files.wordpress.com/2014/03/cropped-cropped-header_21-3.jpg . We can hide that lost image div with the following: 

    .mobile-theme header img {
	display: none;
}
  • Unknown's avatar
    biomike1 · Member ·

    Thanks.

    I am using the HTC one and I phone 4s. The menu problem has resolved itself on the HTC but continues on the I phone. Notice on the HTC that all menu items are black on white background. But on Iphone Main menu items when they appear are orange and sub menus are white on black background.

    Was able to hide the missing image on the Iphone but not the HTC.

  • Unknown's avatar
    thesacredpath · Member ·

    Sorry, this seemed to have gotten lost. :(

    On the menu on the mobile site, there is a non-mobile rule that is overriding some mobile stuff. Add this to your CSS. 

    .mobile-theme .main-navigation {
    position: initial;
}

    And remove this. 

    .mobile-theme #access {
    top: 0;
}

    The following will make the entire background on the mobile menu black. 

    .mobile-theme #access ul.nav-menu {
    background: #000;
}

    Can you refresh my memory, did you want the hover color on the text in the mobile menu to be orange?

  • The topic ‘Mobile Website menu errors on android & i phone’ is closed to new replies.