Header Navigation Options

Site URL: https://tetra-wisteria-snzf.squarespace.com/config/
Password: BangaBuilds

Hi all!

I was hoping for some help with modifying my header. As my home page is actually a portfolio main page rather than an individual page (meaning my main landing pages are not actually pages, rather they are projects), this means I am not able to put my projects into my header as pages to navigate to. Is there any way to hard-code navigation links into my header? And ideally control the position of them? I've attached a photo of what I'd like my header to look like (Boehm Construction), and what mine currently looks like.

Lastly, my services section has two available option. I was hoping that I could implement both options into my header with the hover feature (most common feature for options in a header).

Ex. Services -> New Construction

or                     -> Renovations

Thank you for your help and guidance!

@BangaBuilds yes, you can add each of the page URLs as a link in your main navigation.  So you could add a new dropdown in your linked navigation called Services, then add the following links within that dropdown:

/new-builds

/renovations

@CassAggett Thank you for the encouragement and plan, but how would I actually go about implementing this? It doesn't provide me the option as the pages I want to add aren't actually pages, instead they are projects in my portfolio. So I am not sure how to "hard-code" it into my header. Thanks!

Yes I was able to get it @Spark-Plugin, thank you! However, if you see my website, for some reason "Home" is always underlined in my header. Is there anyway to have the section I'm on be underlined? Or potentially remove the underline altogether if the first method isn't possible? Thanks for all your help!

Hi @BangaBuilds, The homepage is underlined because it's set as a page in your navigation, while the other links are likely added as custom links, not pages. To remove the underline from the homepage link, you can use this CSS code:

body:not(.header--menu-open) [data-header-style="solid"].header .header-nav-wrapper .header-nav-item--active a {
    color: var(--solidHeaderNavigationColor);
    background-image: none !important;
}

Let me know if it works:)

Thank you so much @Spark-Plugin! You and your team have helped so much in my website creation