menu icon iphone not working?!

Oh I keep forgetting to look at the other pages!
Okay, try this:

@media screen and (max-width: 767px) {
    .navigation-top,
    #masthead .wrap {
        position: static;
    }

    .site-branding,
    .custom-header-media {
        z-index: 0;
    }

    .main-navigation {
        left: 10%;
        position: absolute;
        top: 0;
        width: 80%;
        z-index: 1;
    }

    .main-navigation ~ a {
        display: inline-block;
        margin-top: 10px;
    }

    html .colors-custom.navigation-top .menu-toggle,
    html .navigation-top .menu-toggle {
        background: white;
        color: red;
        float: right;
        z-index: 1;
    }

    html .colors-custom.twentyseventeen-front-page .navigation-top .menu-toggle,
    html .twentyseventeen-front-page .navigation-top .menu-toggle {
        float: none;
        margin-top: 20.5em;
    }

    .menu-menu-1-container {
        clear: both;
    }

    html .colors-custom .menu-toggle:focus,
    html .menu-toggle:focus {
        background: white;
        outline-color: black;
    }

}

Andrew

that’s fine for the non-front pages but could it be at the top of the front page too?

Cheers

Geoff

Oh that makes it easier, try:

/* For screens smaller than 767px */
@media screen and (max-width: 767px) {
    /* Remove the relative positioning on the containing elements so that it does not interfere with the new menu button position */
    .navigation-top,
    #masthead .wrap {
        position: static;
    }

    /* Ensure the other header elements do not overlap the menu button */
    .site-branding,
    .custom-header-media {
        z-index: 0;
    }

    /* Positioning the container for the main menu so the menu button and menu itself are moved together */
    .main-navigation {
        left: 10%;
        position: absolute;
        top: 0;
        width: 80%;
        z-index: 1;
    }

    /* Styling the share links to have a small gap above them */
    .main-navigation ~ a {
        display: inline-block;
        margin-top: 10px;
    }

    /* Making the menu button more visible and positioning it to the right */
    html .colors-custom.navigation-top .menu-toggle,
    html .navigation-top .menu-toggle {
        background: white;
        color: red;
        float: right;
        margin-top: 1em;
        z-index: 1;
    }

    /* Ensuring the menu itself sits clear of the menu button */
    .menu-menu-1-container {
        clear: both;
    }

    /* Making the focus state of the menu button visible */
    html .colors-custom .menu-toggle:focus,
    html .menu-toggle:focus {
        background: white;
        outline-color: black;
    }
}

• This reply was modified 7 years, 11 months ago by Andrew Nevins. Reason: Added comments to CSS

Andrew

the last version is fine. Many thanks!

Which line is it that I can play around with the move the Menu to the right a little more?

Cheers

Geoff

Here:

    .main-navigation {
        left: 10%;
        position: absolute;
        top: 0;
        width: 80%;
        z-index: 1;
    }

Specifically either the ‘left’ or ‘width’ values

just another thought…

I would have thought that the twentyseventeen code itself would not have placed the Menu at the bottom of the front page so that the list of page titles is off the screen on the iphone?

Geoff

OK – thanks again!

Cheers

Geoff

It shouldn’t place the menu beneath the ‘fold’ point, I didn’t realise this was the underlying issue.

sorry, what is the “fold” point?

Geoff

perhaps I caused the problem with

.panel-content {
display: none;
}

?

Geoff

I don’t think hiding the panel content would effect this. What I mean by the ‘fold’ is the bottom of the screen without scrolling. Typically search engines refer to the term “above the fold”. I just meant that Twenty Seventeen should not be showing the menu beneath the bottom of your screen, it should show it at the bottom but it should still be visible without you scrolling.

OK so is this a fault with the theme?

I’m not clear whether you work with the twentyseventeen code people?

Geoff

The TwentySeventeen people don’t get paid and I’m not part of their team (and I don’t get paid), so there’s not a relationship where they/we “work” for WordPress.

What I’m trying to understand is if the issue you’re describing is a bug or whether it’s a feature of the theme.

If the menu is showing beneath the ‘fold’, as in the bottom of the screen before you scroll down, then that’s a bug with the theme and we can help you fix that in another thread.

If the menu is showing at the bottom of the screen but above the ‘fold’ then that’s the theme design.

Andrew

have removed all the css in the child theme and this is the screen view.

bug or design?

Geoff

That’s the theme design.