Simple coding prob. – Menu overlaps header.

  • monarchzeronyc

    (@monarchzeronyc)


    9 years, 11 months ago

    Hey everyone!

    So I have a hopefully simple problem. I used some custom CSS to make my header responsive for mobile in the 2013 theme, and now my menu is overlapping the header in mobile. See here:

    View post on imgur.com

    Here’s the custom CSS I’m using:

    @media (max-width: 360px) {
    .site-header .home-link {
        min-height: 50px;
    }
}

@media (min-width: 360px) and (max-width: 767px) {
    .site-header .home-link {
        min-height: 100px;
    }
}

.site-header { background-size: 100%; }

    Any ideas? I would ask at the 2013 forum but it’s completely dead (for months / years) and this is more of a general CSS problem anyway.

    Thanks for your time!

Viewing 8 replies - 16 through 23 (of 23 total)
1 2
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    9 years, 11 months ago

    I checked out their site on mobile and it looks like they’ve got the same issue, but they’ve designed their image so that the focal point is always in view.

    Thread Starter monarchzeronyc

    (@monarchzeronyc)

    9 years, 11 months ago

    I could deal with that, how can I get to that point? Like I said, on mine there is no header on mobile.

    Thanks for your help by the way!

    Thread Starter monarchzeronyc

    (@monarchzeronyc)

    9 years, 11 months ago

    I’m toying with stuff so right now there is a header on mobile, but it’s eclipsed by the menu, which his isn’t.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    9 years, 11 months ago

    He’s got this CSS too:

    .site-header .home-link {
    color: #141412;
    display: block;
    margin: 0 auto;
    max-width: 1080px;
    min-height: 230px;
    padding: 0 20px;
    text-decoration: none;
    width: 100%;
}

    Thread Starter monarchzeronyc

    (@monarchzeronyc)

    9 years, 11 months ago

    OMG ALMOST THERE… but now it shrinks the image to fit the small screen, unlike his… so I have to figure out how to tell my website to not scale the image down, but also not increase the borders of the page…

    Thread Starter monarchzeronyc

    (@monarchzeronyc)

    9 years, 11 months ago

    Hey also, where did you find that? I looked through his code and CSS but can’t find that specific block on code…

    If you check my site on mobile now the header shows up but it distorts it now..

    Thread Starter monarchzeronyc

    (@monarchzeronyc)

    9 years, 11 months ago

    Sorry to keep bugging you, but is there a way to have a different header for mobile? I feel like now that I’ve gotten to this point that might be the easiest solution…?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    9 years, 11 months ago

    Yes you can use media queries just like you did in your first post:

    @media (max-width: 360px) {
    .site-header {
        background-image: url('path-to-new-image');
    }
}

Viewing 8 replies - 16 through 23 (of 23 total)
1 2

The topic ‘Simple coding prob. – Menu overlaps header.’ is closed to new replies.