• How To's

How to Fix Menu Bar Covering Websites on MacBook Pro 14in

February 02, 2025 • 2 min read

This issue is literally making browsers like Edge and Chrome unusable.

I recently purchased a new Macbook Pro 14in. While it has been a great machine for my work, I have encountered this very annoying issue where if I open a website on the Chrome or Edge browser, entering full screen mode causes the website's top portion to be covered. However, if you use Safari, websites should continue to display properly for you. First let me show you the problem and then I will go through the fix. You can also just skip to the fix portion of this post.

Chromium Browser and Mac Versions

At the time of this post I'm using the following versions.

  • Microsoft Edge Version 110.0.1587.57 (Official build) (arm64)

Edge Version

  • Google Chrome Version 110.0.5481.177 (Official Build) (arm64)

Chrome Version

  • macOS Ventura 13.2

The Problem

In a normal scenario, if you don't have a website in full screen mode, the page may look something like this.

Top of website non full screen mode

Then if you enter full screen mode, this is what happens.

Menu bar covers website

There are a few things we want to note here from the screen shot above.

  • Browser tab bar and search bar is pushed down over the top of the site.
  • There is extra space above the tab bar and search bar.
  • If you scroll up, the website is still covered (Not seen in screenshot above)

How to fix it

Luckily, there is an easy way to fix this issue. On your Mac, click on the Apple logo in the menu bar and then select "System Settings". In the search bar of System Settings, search for "Automatically hide and show the menu bar".

Click on the first option that shows up. In the drop down, either set the option to "Always", "In Full Screen Only", or "Never".

Setting menu bar to always hide

Now if you go back to your browser, notice the menu bar no longer shows up in full screen mode. Therefore, there is nothing pushing down the tab bar and search bar which were covering the site. To display the menu bar, simply move your mouse pointer to the top of the screen and it will automatically show up.

Proper Fix

Since this issue does not reproduce on Safari, this means that this is most likely a browser specific bug. Since both Edge and Chrome are built on Chromium, I have reported the issue on the chromium website. You can track the issue here. The proper fix might have to be on the browser side so that you can set whatever setting you want for the menu bar and not have it covering the websites you visit.