Mobile Menu

  • Resolved Laurencecrew

    (@laurencecrew)


    11 years, 2 months ago

    Im using the free Virtue theme, with a top bar for navigation, which I use the following CSS gained from these pages to make sticky, adjust fonts and padding etc. However on mobile size screens, when the mobile menu is active and the top bar disappears, it leaves the space it once occupied behind. Any idea how to get rid of this?

    @media (max-width: 992px) {
    .topclass {
    display:none;
    }
    }

    #topbar {
    position:fixed;
    width:100%;
    top:0;
    z-index:9999;
    margin-bottom:5px;
    }

    .admin-bar #topbar {
    top:28px;
    }

    .headerclass {
    margin-top:35px;
    margin-bottom:20px;
    }

    .sliderclass {
    padding-bottom:0;
    }

    .sliderclass {
    padding-top:0;
    }

    .topbarmenu ul li a {
    font-size:16px;
    padding:10px;
    }

    #topbar-search {
    padding:5px;
    }

    .kad-nav-inner .kad-mnav, .kad-mobile-nav .kad-nav-inner li a, .nav-trigger-case {
    color:#fff;
    }

Viewing 6 replies - 1 through 6 (of 6 total)
  • Ben Ritner – Kadence WP

    (@britner)

    11 years, 1 month ago

    Hey,
    Can you post a link?

    Kadence Themes

    Thread Starter Laurencecrew

    (@laurencecrew)

    11 years, 1 month ago

    Sorry for the delay but I can’t send a link to a website page, as I only have it as a local installation, on my laptop. Here’s a screen grab link illustrating the gap. http://www.evernote.com/l/ABgVnMUB1StB4ILcMotd0HoP-OGeLrynN3k/

    hannah

    (@hannahritner)

    11 years, 1 month ago

    Hey Laurencecrew,
    Hard to tell, but I think this css may help:

    @media (max-width: 768px) {
.contentclass {
  padding-top: 0;
}
}

    Let me know if the space is still there after adding that to your custom css.

    Hannah

    Thread Starter Laurencecrew

    (@laurencecrew)

    11 years, 1 month ago

    Hi Hannah,
    Thanks for the prompt reply but unfortunately, that didn’t work?
    Laurence

    hannah

    (@hannahritner)

    11 years, 1 month ago

    Hmm sorry about that.
    Ok, you have this in your css:

    .headerclass {
margin-top:35px;
margin-bottom:20px;
}

    I think that’s the culprit. Try either removing or adding a media query. Let me know if that wasn’t it!

    Hannah

    Thread Starter Laurencecrew

    (@laurencecrew)

    11 years, 1 month ago

    Thanks Hannah,
    That did the trick. I used

    @media (max-width: 992px) {
    .headerclass {
    margin-top:0px;
    }
    }

    I also had to remember, to turn off Jet Pack WP Super Cache and clear it, before I could see it take effect.
    Once again excellent support
    Many thanks
    Laurence

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Mobile Menu’ is closed to new replies.