Header language buttons displaced on smaller screens

  • Resolved Ailsa Craig

    (@ailsa-craig)


    11 years, 4 months ago

    The responsive theme is working perfectly except for the two language buttons on top. As soon as I go below 800px they go below the logo and throw the navigation down a bit. I reckon the logo is responsible..and my css! Anyone know how I can keep those buttons on top?
    This is the website:
    http://www.sciencehooks.scoilnet.ie/
    Any help much appreciated.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Emil Uzelac

    (@emiluzelac)

    11 years, 4 months ago

    Hi,

    Very nice looking site, I really like what you guys came up with 🙂

    All right, so the reason why the links are not in the same position is because .top-widget is set to -100px on desktop and that doesn’t apply while on mobile devices.

    This should fix that:

    /* =Responsive (Mobile) Design
-------------------------------------------------------------- */
@media screen and (max-width: 980px) {

    .top-widget,
    .home .top-widget {
        margin-top: -100px !important;
    }

}

    or just

    /* =Responsive (Mobile) Design
-------------------------------------------------------------- */
@media screen and (max-width: 980px) {

    .top-widget,
    .home .top-widget {
        margin-top: -100px;
    }

}

    Thanks,
    Emil

    Thread Starter Ailsa Craig

    (@ailsa-craig)

    11 years, 4 months ago

    Hi Emil,
    Thanks so much – that works a treat!

    Emil Uzelac

    (@emiluzelac)

    11 years, 4 months ago

    Fantastic!

    Thanks,
    Emil

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Header language buttons displaced on smaller screens’ is closed to new replies.