Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Instagram web UI not displaying correctly

Hey all, anyone find a solution to this yet? Though a pain in the backside, at least I'm feeling happier now it's not just me!!!! I've tried on Chrome, Safari and Firefox - same on all 3, and I'm in Ireland, just in case it is a geographical issue. I fear it will be a matter of waiting for Instagram to get their finger out: I mean, I guess we could still use it on our phones, but why do that, when we have lovely Macs to look at Insta instead? Haha!
 
Hi.
Just registered to confirm I'm also having the same issue -barely visible top bar of Instagram in latest web Firefox- since last Friday 20/01/2023. It proves to be a CSS issue that when manually adding some padding-top & margin-top to the 'header bar' it shows up (despite of subtly unaligned icons).

I'd also appreciate a perm solution as it drives you nuts to operate Instagram as it is. My guesses about whose fault it is go to either Instagram itself or some Firefox plugin that may have updated recently. No clue so far, though.
 
  • Like
Reactions: sageit
Ditto, just registered to report. USA midwest, problem across all browsers, Windows 10. Give me an effing break, social media monsters.
 
I don't seem to have this particular issue but I have had issues with Safari on Instagram and Facebook for a while now on the last few OS's. Now I use Edge for social media and it just works better, specially displaying and playing videos..
 
Same i also registered to confirm that it isn't working properly since Friday 20/01/23
I'm on Chrome & Windows 10
Tried everything, nothing seems to work
Such a pain in the ass for a video creator because i do everything on my PC.
 
I've got the same issue now on an Android tablet. Admittedly it's a Tesco Hudl2 using Android 5 Lollipop, but it had been fine till yesterday.
 
wow, a lot of people. wondering if it is regional. maybe everyone could say where they are? and doesn't seem to be mac issue (for example, @Basemetal reports above, it's happening on his android tablet).

i'm upstate NY right now, and no problem on my M2 air in safari or chrome.
 
I found a temporary fix! Right click anywhere on the page, click "inspect element", then select "<main class=..." as shown in the picture attached. After that, scroll down in the "Styles" tab below and change "--desktop-nav-height" value from 0px to 100px. The top bar should be visible now.
 

Attachments

  • instagram fix.jpg
    instagram fix.jpg
    98.7 KB · Views: 117
Last edited:
  • Like
Reactions: Jbailey8, Basemetal and fisherking
flowaraisin said:
I found a temporary fix! Right click anywhere on the page, click "inspect element", then select "<main class=..." as shown in the picture attached. After that, scroll down in the "Styles" tab below and change "--desktop-nav-height" value from 0px to 100px. The top bar should be visible now.
Click to expand...
There we go - that confirms the style sheet has an error? That desktop-nav-height shouldn't be 0px.
 
  • Like
Reactions: sageit
Agree with above. Nothing works. Also with ventura. Can't pull down top of page to add image. Frustrating
 
flowaraisin said:
I found a temporary fix! Right click anywhere on the page, click "inspect element", then select "<main class=..." as shown in the picture attached. After that, scroll down in the "Styles" tab below and change "--desktop-nav-height" value from 0px to 100px. The top bar should be visible now.
Click to expand...
Thanks. I experienced the same issue as of this morning 1/22/2023. This "fix" actually worked for me; however, if you close out of Instagram and log back in, the problem persists so you have to perform the above action all over again.
 
Last edited:
flowaraisin said:
I found a temporary fix! Right click anywhere on the page, click "inspect element", then select "<main class=..." as shown in the picture attached. After that, scroll down in the "Styles" tab below and change "--desktop-nav-height" value from 0px to 100px. The top bar should be visible now.
Click to expand...
Thanks. I experienced the same issue as of this morning 1/22/2023. This "fix" actually worked for me; however, if you close out of Instagram and log back in, the problem persists so you have to perform the above action all over again.
flowaraisin said:
I found a temporary fix! Right click anywhere on the page, click "inspect element", then select "<main class=..." as shown in the picture attached. After that, scroll down in the "Styles" tab below and change "--desktop-nav-height" value from 0px to 100px. The top bar should be visible now.
Click to expand...
flowaraisin said:
I found a temporary fix! Right click anywhere on the page, click "inspect element", then select "<main class=..." as shown in the picture attached. After that, scroll down in the "Styles" tab below and change "--desktop-nav-height" value from 0px to 100px. The top bar should be visible now.
Click to expand...
Thanks. I experienced the same thing as of this morning 1/22/2023. This "fix" actually worked for me; however, if you close out of Instagram and log back in, the problem persists so you have to perform the above action all over again.
 
Last edited:
Aggedor said:
There we go - that confirms the style sheet has an error? That desktop-nav-height shouldn't be 0px.
Click to expand...
Thanks. I experienced the same issue as of this morning, 1/22/2023. This "fix" actually worked for me; however, if you close out of Instagram and log back in, the problem persists so you have to perform the above action all over again.
 
Last edited:
  • Like
Reactions: Basemetal
flowaraisin said:
I found a temporary fix! Right click anywhere on the page, click "inspect element", then select "<main class=..." as shown in the picture attached. After that, scroll down in the "Styles" tab below and change "--desktop-nav-height" value from 0px to 100px. The top bar should be visible now.
Click to expand...
Worked and enabled me to post! Thank you Flowaraisin! Now... how to get Insta to fix it permanently? I've reported it via their right click 'report a Problem' menu though I imagine it'll take a mega account holder to get their attention.
 
Same problem here.
The menu bar is on top in my business page, but on the left in my personal page.
Personal page works fine. Business is cut off on top.

Windows 10
Chrome
New Jersey USA
 
Aggedor said:
So this started happening when I visit Instagram in either Safari or Firefox. I'm using macOS 13.1. No browser extensions running. It kind makes it impossible to post from the web UI!

Anyone else experiencing this issue?

View attachment 2145763
Click to expand...
Same issue began on my PC yesterday. All the usual (reboot, etc.) NOTHING has fixed it and still finding no answers. Very frustrating.
 
funny, about a week ago i was having issues with instagram on both macs, in both safari and chrome. posted here, but no one else seemed to have the issue (posts not loading, ie showing a grey box..)

no lots of people posting about this new issue... and i am not experiencing it, on either mac (or browser).

anyway, seems the one common denominator here is instagram itself. report it on their twitter page, or with support! but am sure they'll fix it soon(ish)...
 
Firewallbill said:
I hate to say it, but so glad others see this - I thought I was going crazy. This is on 2 / 3 Instagram accounts!
This problem has been going on since 6AM CST today in Texas consistently for 2/3.
I tried: Chrome, Safari on Mac Ventura 13.1 (all patched up)
Windows Edge, Chrome - latest greatest patched
I deleted ALL cache, ran CCleaner on Windows (2x) and deleted all cache on Mac, rebooted, ran CleanMyMac 2x - no change
Used the DEV option in Windows & Mac to try various options - no change
This is amazingly persistent.
Interestingly, starting at 7PM CST I no longer get 2FA to my phone on 1/3 accounts. 2 others do.
The lone account that works just fine has the menu on the SIDE, not the top, of the screen.
If I could force the other 2 accounts to have the menu on the side, all would be good.
But, when did Instagram start putting a menu on the side? None of thee 3 had that until today.
This is MADDENING.
OH: iPhone, iPad Mini - all work fine. This is only in Windows & Macs.
Click to expand...
I updated to Ventura, as per my previous post, but still have the problem of a truncated page. From my research, I believe IG is gradually rolling out their new 'web interface' - which as you say has the menu on the side. (Strangely, I have the conventional (old?) menu at the top - albeit cut off, while my daughter, who lives in the same house in the UK - with the same IP has her menu on the side). My guess is that what is happening is that they have started the change but that the CSS and or code that controls the layout hasn't been fully implemented yet. Or there is a bug. I know this doesn't solve anything, but I am hopeful it will get sorted soon and that the issue is entirely at Instagram's end.
 
I'm having the same problem and tried to do the fix that flowaraisin suggested, but I expanded everything and can't find the string to change the nav height. Can anyone suggest a fast way to find it? I'm on Monterey 12.6, thanks.
 
flowaraisin said:
I found a temporary fix! Right click anywhere on the page, click "inspect element", then select "<main class=..." as shown in the picture attached. After that, scroll down in the "Styles" tab below and change "--desktop-nav-height" value from 0px to 100px. The top bar should be visible now.
Click to expand...
Thanks flowaraisin for posting this temporary fix. Pretty crazy though, that such a large organisation can't properly implement their CSS :confused:
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back