Menu links shifts on iPad

  • jfuqua

    (@jfuqua)


    6 years ago

    I’m developing a site for a local nonprofit and have the main menu with all links centered. This works perfectly unless viewed on an iPad. Then, the menu link shift to be flush left.

    I can achieve the same thing when viewing on my laptop and closing down the window. It shifts left right before changing to the hamburger menu.

    Any suggestions as to how to fix? Thanks!

    The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)
  • jakelovelock

    (@jakelovelock)

    Hey! I just removed this and the menu now goes back into the center.

    Hope this helps.

    @media only screen and (max-width: 959px)
    .gdlr-header-style-2.gdlr-centered .gdlr-navigation .sf-menu {
    float: left;
    }

    Thread Starter jfuqua

    (@jfuqua)

    That’s fantastic!

    I’m looking in the style-responsive.css

    On line 7: @media only screen and (max-width: 959px) {
    Then on line 73: .gdlr-header-style-2.gdlr-centered .gdlr-navigation .sf-menu{ float: left; }

    Between the two are

    So I removed line 73 and it had no impact. I changed the max-width on line 7 and that also had no impact.

    Is there any way I can add something in the built-in CSS editor instead?

    Sorry for the newbie questions and thanks for your help.

    jakelovelock

    (@jakelovelock)

    You could add “float:none;” to get rid of the float rather than removing the code I suggested above.

    I hope that’s what you’re asking aha.

    Thread Starter jfuqua

    (@jfuqua)

    Thanks but removing the code is not working for some reason.

    So, I was thinking I could add new css in the additional css area (which allows you to modify the default css) on this template.

    I’ve tried this:
    @media only screen and (max-width: 959px)
    .gdlr-header-style-2.gdlr-centered .gdlr-navigation .sf-menu {
    float: none; !important
    }

    But that’s not worked.

    jakelovelock

    (@jakelovelock)

    The !important needs to be within the ;

    “float:none !important;”

    If that still doesn’t work I can try to suggest other methods!

    Thread Starter jfuqua

    (@jfuqua)

    Arrrrgh!

    Still didn’t work. I even tried float:right just to see and no change.

    It’s as if other code is overriding this somewhere.

    jakelovelock

    (@jakelovelock)

    I just tried this one.

    Maybe this will work?

    ul#menu-dchc-main-menu-1 {
    float: none !important;
    }

    Thread Starter jfuqua

    (@jfuqua)

    YES! That does it!

    Thanks so much for all your help. It’s very kind of you.

    jakelovelock

    (@jakelovelock)

    No worries! That’s what these forums are for! ??

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Menu links shifts on iPad’ is closed to new replies.