Dropdown menu-not working on iphone

  • Resolved annatora

    (@annatora)


    10 years, 7 months ago

    Hi.

    I have created a website, using child theme, based on the twenty twelwe theme, installed locally. The only thing I cant seem to figure out now is that my dropdown menu shows as a messy list when using forexample an iphone.

    https://byannatora.com/

    I am using the default theme menu, I am not using a plug in.
    Does anyone know what could be causing this problem?

Viewing 4 replies - 1 through 4 (of 4 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    It’s still going to display in a messy list, but first get rid of the “display: inline-block !important” line from your Child Theme style.css file:

    .main-navigation div.nav-menu > ul {
	margin: 0px;
    border-bottom: none;
    border-top: none;
    display: inline-block !important;
    text-align: center;
    width: 100%;
    letter-spacing: 0.1em;
    padding-left: 20px;
    z-index: 300;
	}

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Then remove this:

    .main-navigation li a, .main-navigation li {
    display: inline-block;
    text-decoration: none;
    z-index: 303;
    text-align: left;
	}

    And replace it with this:

    .main-navigation li a, .main-navigation li {
    text-decoration: none;
    z-index: 303;
    text-align: left;
}

.main-navigation div.nav-menu > ul {
    text-align: center;
}

@media screen and (min-width: 600px) {

    .main-navigation li a, .main-navigation li {
        display: inline-block;
    }

    .main-navigation div.nav-menu > ul {
        text-align: left;
    }

}

    `

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Actually get rid of this “width: 100%” here too:

    .main-navigation div.nav-menu > ul {
	margin: 0px;
    border-bottom: none;
    border-top: none;
    display: inline-block !important;
    text-align: center;
    width: 100%;
    letter-spacing: 0.1em;
    padding-left: 20px;
    z-index: 300;
	}

    Thread Starter annatora

    (@annatora)

    Thank you so much!! That fixed it. Only now the menu is not centered aligned anymore, I cant seem to fix it.
    Do you by any chance know this as well?

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Dropdown menu-not working on iphone’ is closed to new replies.