Mobile Device Changes

  • Unknown's avatar
    loeppkydesigns · Member ·

    Hello,
    I have recently upgraded the the premium plan in hopes that I can make my website more user friendly.
    I would like to be able to make the menu the full menu that I can see on my desktop when I go onto a mobile device. Right now I can click not he word “menu” and it shows all my pages, but I would like it to show the full menu. How do I change that?

    Also I would like my header image to not change size when I go on a mobile device. Is there a way that it will not zoom in onto one section of the image when on a mobile device but rather resize the whole image so that I can see the whole picture?

    I am also new to CSS so if you could please be gentle and help me with the steps.

    Thank you

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

  • Unknown's avatar
    loeppkydesigns · Member ·

    I figured out how to make the mobile menu disappear, but how do I get the main navigation to appear now on mobile devices?
    The code I used was:

    .menu-toggle {
    display: none;
    }

    }

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, if we do this, this is, in general, what you are going to see on a phone: https://cldup.com/Guv_1DP0Cs.png . With the way the menu items are stacked, I don’t think this is going to be very user friendly for those on phones. The touch device menu, which hides behind the menu toggle is designed to work well with touch devices and small screens and is the reason we employ them on all of your responsive designed themes here.

    To try this out, add the following to the bottom of your custom CSS. 

    @media screen and (min-width: 300px) {
.menu-toggle {
    display: none;
}
.site-logo {
    max-height: 100px;
}
.has-site-logo .main-navigation {
    height: 100px;
}
.has-site-logo .main-navigation > div, .has-site-logo .main-navigation > ul {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
.main-navigation {
    clear: none;
    float: right;
    font-size: 0.8125em;
    line-height: 2.09231em;
    max-width: 100%;
    text-align: right;
}
.main-navigation ul:first-child {
    display: block;
}
.main-navigation ul li {
    display: inline-block;
}
.main-navigation ul li:hover > ul, .main-navigation ul li.focus > ul {
    display: block;
    opacity: 1;
    transition: all 0.3s ease-in-out 0s;
    visibility: visible;
}
.main-navigation ul a {
    border-bottom: 0 none;
    padding: 5px 0 5px 14px;
}
.main-navigation ul ul {
    background: white none repeat scroll 0 0;
    border: 1px solid #eee;
    display: none;
    float: left;
    left: 0;
    opacity: 0;
    padding: 0 7px;
    position: absolute;
    text-align: left;
    top: 27px;
    transition: all 0.3s ease-in-out 0s;
    visibility: hidden;
    z-index: 99999;
}
.main-navigation ul ul li {
    border-bottom: 1px solid #eee;
    padding: 5px 5px 4px;
}
.main-navigation ul ul li:last-of-type {
    border-bottom: 0 none;
}
.main-navigation ul ul li a {
    line-height: 1.5;
    padding: 5px;
    width: 180px;
}
.main-navigation ul ul ul {
    left: 100%;
    top: 0;
}
.main-navigation ul ul li a, .main-navigation ul ul ul li a, .main-navigation ul ul ul ul li a {
    padding-left: 5px;
}
}

    My suggestion is that you instead limit this change to screens that are 600px or wider so the touch device menu is there for the majority of small tablet and phone visitors. You would do that by changing the 300px in the first line of the CSS I gave above to 600px.

  • Unknown's avatar
    thesacredpath · Member ·

    One other thing I will mention is that I see you have used a submenu in your custom menu, and it opens when you hover your mouse over it. You can’t “hover” on a touch device such as a phone or tablet and that menu will not work properly on touch devices if you force the full menu on all screen sizes.

  • Unknown's avatar
    thesacredpath · Member ·

    We are not allowed to hide or edit the WordPress.com and theme footer credits per our Terms of Service (#1 Attribution). See the Frequently Asked Questions on the Custom Design support page for more information.

    You are allowed to restyle the footer credits to better fit with your design as long as they remain readable, and you are also allowed to add text to the footer, such as a copyright statement. If you need help restyling, or adding to, the existing footer credits, let us know and we would be happy to help.

    On your header image, I have viewed your site on my iPhone and iPad and do not see the image zoomed in. I see it in full. If you are not seeing that, which device are you seeing that one, which browser and which OS and version?

  • The topic ‘Mobile Device Changes’ is closed to new replies.