Support » Theme: Blue Planet » Mobile menu not visible

  • I have used your excellent “blue planet” theme for a number of sites – many thanks for it. However….

    On all but one the mobile menu replacement works well, but I have one site where the menu entries are not visible on a mobile (android 4.4).

    the one where it does not work is:

    HOME

    and the one where it does work is:

    http://changeofkey.org.uk

    I have overidden the colours for the peacepalace one which I guess means I’ve messed it up in some way, but can’t see where – it works fine on a desktop (firefox and chrome).

    Hope you can help..

    Here is the relevant CSS I’ve used in the jetpack CSS edit:

    .menu-top-menu-container {
    vertical-align: top;
    background: white;
    line-height: 20px;
    }

    .nav-menu {
    vertical-align: text-top;
    margin: auto;
    }

    .menu-item {
    vertical-align: text-top;
    background: white;
    margin: auto;
    }

    .blueplanet-nav li a {
    border: 0 none;
    color: #0083ca;
    font-size: 12px;
    font-weight: bold;
    line-height: 12px;
    padding: 0 9px;
    text-transform: uppercase;
    transition: all .3s ease 0;
    white-space: normal;
    max-width: 125px;
    display: block;
    text-decoration: none;
    vertical-align: text-bottom;
    text-align: center;
    }

    li.current-cat a, li.current_page_item a, li.current-menu-item a, li.current-cat a:link, li.current_page_item a:link, li.current-menu-item a:link, li.current-cat a:visited, li.current_page_item a:visited, li.current-menu-item a:visited {
    color: #0083ca;
    background: white;
    }

    .blueplanet-nav li a:hover {
    background-color: white;
    color: lightblue !important;
    }

    .blueplanet-nav ul.nav-menu,
    .blueplanet-nav div.nav-menu > ul {
    text-align: center;
    width: 90%;
    vertical-align: text-top;
    }

    Cheers Brian

  • The topic ‘Mobile menu not visible’ is closed to new replies.