How to Hide the Home Page (or 1st Menu Item) Using Custom CSS in PhotoBiz

How to Hide the Home Page or First Menu Item Using Custom CSS in PhotoBiz

Overview

This guide explains how to hide the Home page, or the first item in your website navigation menu, using Custom CSS in the PhotoBiz Website Builder. This is helpful when you want visitors to land on your Home page from your main website address, but you do not want Home to appear in your site menu.

After you add the CSS, the first navigation item will be hidden from your menu. The page itself is not deleted, and the page URL does not change. Visitors can still reach your Home page by typing your website address directly or by clicking your logo if your logo is linked to the homepage.

There are two CSS options in this guide. One is for regular navigation menus, and one is for split menus where the logo appears between two groups of menu items.

Prerequisites

Before you begin, make sure:

You have access to your PhotoBiz Website Builder
Your website has already been created
The page or menu item you want to hide is the first item in your navigation menu
You are comfortable copying and pasting a short CSS snippet

STEP ONE

STEP TWO

Open your global design settings. In the Website Builder, click DESIGN at the top center of the control panel.

Next, click EDIT DESIGN SETTINGS to open your global design settings.

In the right-side panel, click Global CSS/JS. This section lets you add custom code that applies across your entire website.

STEP THREE

Add the custom CSS to hide the first menu item. There are two versions of this CSS. Use the regular menu code if your website has a standard navigation menu. Use the split menu code if your logo appears between two groups of menu items.

It is important to use the correct code for your menu style. If you use the regular menu code on a split menu template, the first menu item on both sides of the logo will be disabled.

For regular menu templates, paste this code into the CSS field:

<style>
.main-nav__item.grid__cell:nth-child(1) {
    display: none;
}
</style>

For split menu templates, paste this code into the CSS field:

.main-nav:nth-child(1) .main-nav__content .main-nav__item:nth-child(1) {
    display: none;
}

This CSS targets the first item in your main navigation menu and hides it from view across your website. In most cases, this is the Home page if Home is listed first in your menu.

FINAL STEP

Click Save to store your changes.

Once saved, the first menu item will no longer appear in your website navigation. Your homepage will still exist, and visitors can still access it when they go to your main website address.

Additional Options or Helpful Notes

This method hides the first menu item visually, but it does not delete the page.
The page URL remains active.
This code applies site-wide because it is added to Global CSS/JS.
If a different page is listed first in your navigation menu, that page will be hidden instead.
To hide the Home page specifically, make sure Home is the first item in your navigation menu before using this CSS.
This code only affects the main navigation menu item. It does not remove buttons, links, or other areas of your website that may link to the page.
Visitors can still reach the hidden page by typing the page URL directly.
If your logo is linked to your homepage, visitors can still click your logo to return to the Home page after visiting another page on your site.
If your website uses a split menu, use the split menu CSS only. The regular menu CSS can hide the first item on both sides of the logo.

Troubleshooting or FAQs

The Home page still appears in the menu

Clear your browser cache and refresh the page. Then confirm the code is saved in the Global CSS/JS section and that there are no typos in the CSS.

The wrong menu item is hidden

This CSS hides the first item in your navigation menu. If the wrong item is hidden, review your navigation order and move the page you want to hide into the first position.

The first item on both sides of my logo disappeared

Your website is likely using a split menu template, and the regular menu CSS was added by mistake. Remove the regular menu code and use the split menu code instead.

Can visitors still access the Home page?

Yes. This CSS only hides the menu item. Your homepage is still active and will still load when visitors go to your main website address.

Does this delete the page?

No. The page remains in your Website Builder. The CSS only hides the first navigation item from view.

Previous Post Next Post

How to Hide the Logo Section Using Custom CSS in PhotoBiz

January 16, 2026

How to Hide View Previous & Next Post in Blog Posts Using CSS

March 5, 2026

How to Increase The Height of Story Panel Using CSS

March 5, 2026

How To Add Custom CSS To The Website

September 4, 2025