Remove the "Navigate to Admin" Bar Completely

Shopify Discussion
,
1

Hey, I’m trying to remove the “Navigate to Shopify” bar in its entirety.

Many other posts have been made about this and all I see are Shopify Partners or shopify Staff saying “Dont worry about it” or “Just Log out of the admin”.
However,

Im trying to do a screen record of our website but I also need to be logged in on my browser (although even when i log out of Shopify it still appears and just asks me to login).

Shopify Staff, the question is:

  • How do I REMOVE THIS BAR WITHOUT LOGGING OUT. I just want the stupid thing gone, I have a shortcut CMD+2 which opens my admin, I don’t need this stupid shortcut bar keep popping up when I’m trying to do a screen recording tutorial of my website.
2 Likes
2

Hi, I’m curious what your storyboard or recording flow looks like. Will closing the bar (x) help before hand? It’ll disappear in an instant.

Screenshot 2024-06-01 at 17.20.39.png
Screenshot 2024-06-01 at 17.20.39.png1734×296 19.6 KB

If you need to record the transition from the admin page to the storefront and click the x in the middle, it might take a little bit of video editing to remove that particular screen.

3

Hey, Thanks for the reply.
Clos it is okay but as soon as you navigate to another page it just pops back up. We often do these types of screen recordings and we do currently edit it out but it takes a lot longer than it should if we could just remove the bar (as we never actually use it anyway)

2 Likes
4

Ah, I see. My workaround is probably to hide it with CSS. If you’d like to try, add this one:

#admin-bar-iframe {
  visibility: hidden;
}

I’ve only tested it on the theme’s main CSS file and opened it with one browser.

2 Likes
5

This is the solution

6

How do I get to my theme’s main CSS? and then where do I put the code? Thanks for your help.

7

Hey, you can go to Online Store > Themes and then Edit code under the Sales Channel in your left navigation bar.

Street Rookie · Themes · Shopify 2024-12-20 10-53-51(1).png
Street Rookie · Themes · Shopify 2024-12-20 10-53-51(1).png2878×1586 311 KB

Look for base.css in the assets folder and add the code at the very bottom of the CSS file.

You can also add it to theme.liquid; just make sure to place this code before the closing tag.

{% style %}
   #admin-bar-iframe {visibility: hidden;}
{% endstyle %}

Keep in mind that this is merely a hack, and the code will be lost if you update your theme.

1 Like
8

Thank you, but I saw that. Sadly, in my asset folder, I have no base.css. (see screenshot below) Any other suggestions?

[cid:3d0d30b1-3a86-4861-be76-01be0f44e59a]

UPDATE: I just saw how to do this if base.css is nowhere to be found in the asset folder. Added the below code to theme.liquid; making sure to place the code before the closing tag.

{% style %}
#admin-bar-iframe {visibility: hidden;}
{% endstyle %}

9

Yeah, that is what I needed! theme.liquid; since base.css did not exist in the assets folder. Thank you!

10

no worries ? glad it worked!