Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • November 1, 2021 at 2:19 am #1327246
    goldengate415

    Hi all,
    I finally updated to 4.8.7 and am seeing some issues on my header in responsive mode, specifically in tablet size or in mobile size when in landscape.
    If you use Chrome developer tools and load http://www.thomashenthorne.com and then begin narrowing the screen, you will see odd responsive behavior beginning with when the menu converts to hamburger menu and then into tablet mode as the social icons, which never appeared before on mobile / tablet, now appear, with the hamburger menu over the logo.

    There has been a fair amount of customization over the years and I’ve included style.css in private contents below… where we added 2nd logo as well as social icons in the header. I am wondering if this is the source of the issue.

    Thank you for your help,
    Rob

    November 1, 2021 at 6:01 am #1327262
    Rikard

    Hi Rob,

    That looks a bit messy, I’m not sure exactly what you are looking to change though? If you could explain that a bit further, then we can help you out with some CSS. Also, does it work as expected if you remove all your custom CSS? If you need further help, then please include admin WordPress login details in private.

    Best regards,
    Rikard

    November 1, 2021 at 7:16 am #1327266
    goldengate415

    Hi Rikard,

    Thanks for the prompt action on this one! :)

    The custom css has come from you guys (and initially a developer) over the many years of Enfold for our site, so I’m afraid to remove it as we have added it to add things like the phone number on the top of the mobile view etc.

    When you go into Chrome developer tools and change the responsiveness (size) of the site, do you see the issues with the menu at the breakpoints, and the social icons that appear?

    Let me know if you want me to create a staging site for you to log into to take a closer look and I can do that, but I want to make sure that you see the problem we are trying to solve before we begin that process.

    Here’s a screenshot where the burger menu is in the middle of the header (instead of the right, where it is on mobile) and the social icons are appearing (they are not supposed to).

    View post on imgur.com

    I was hoping that the code posted above might reveal why this is happening?

    Thanks much!
    Rob

    November 1, 2021 at 1:12 pm #1327291
    Yigit

    Hi Rob,

    Could you please add following code to bottom of Quick CSS and check if that helps? 

    @media only screen and (max-width: 767px) {
.responsive #top #header .main_menu .social_bookmarks { display: none !important; }}

    Regards,
    Yigit

    November 1, 2021 at 4:16 pm #1327315
    goldengate415

    Hi Yigit, that worked, thank you so much!

    Best,
    Rob

    November 1, 2021 at 4:30 pm #1327318
    Yigit

    Hi,

    You are welcome, Rob!

    Let us know if you have any other questions and enjoy the rest of your day :)

    Best regards,
    Yigit

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Strange header responsive behavior after update to 4.8.7’ is closed to new replies.