Jump to content

Custom CSS to Remove Secondary Button Underline (Outline) on Certain Pages / Add Underline to Main Navigation Section Even If It is Not Actually Sitting on that Page

Recommended Posts

I have the goal of removing and adding certain "underlines" to specific parts of the main navigation of my site and a few buttons that I have created that are acting as a "sub-navigation." The idea is to have the specific underlines only show the current page you are on (acting like how the normal main navigation bar does). I have the "WORK" section of my website that I have divided into three sections (separate pages) that you can access by buttons. I didn't use a folder page for this purpose in the main navigation because I didn't want a clunky drop down menu, rather a stationary horizontal list that lives on all three "WORK" pages.

Right now I have the first section "E-COMMERCE" acting as the actual "WORK" page that lives in the main navigation, thus is creating the line underneath "WORK" on the main navigation. While you are on each of the three "sub-navigation pages" ("E-COMMERCE", "BRAND FILMS," and "MUSIC VIDEOS") I want an underline to only show up underneath the button of the page you are on. When you are on "BRAND FILMS" or "MUSIC VIDEOS," there is no underline underneath "WORK" because you actually aren't on the page, BUT I want that underline to still be there when you are on "BRAND FILMS" and "MUSIC VIDEOS." 

Let me know if there is a code that can help achieve this. Attached are two photos, one is living on the "WORK (E-COMMERCE)" page that shows the underlines, the other on the "BRAND FILMS" page, that doesn't currently have the underlines where I would like to remove on the buttons and add on the main navigation. 

Screenshot 2023-04-07 at 1.27.26 PM.png

Screenshot 2023-04-07 at 1.29.02 PM.png

Link to comment
  • Replies 3
  • Views 218
  • Created
  • Last Reply

Top Posters In This Topic

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.