Customizing Shortlist Story Map

[PaydenMcRoberts1]

I've been following the instructions in this 2014 blog post to customize some style elements of my Shortlist Story Map. All was fine as I added a header image and changed some style colors in the left pane and the list objects in the pane. However, even after searching through the DOM, I haven't been able to find the right div object to change the color of the tabs or the navigation bar under them. Does anyone know the names of these objects? They've changed since 2014 and I can't seem to find them.

[DarrenWiens2]

Can you find it using the Chrome dev tools element inspection tool?

Otherwise, can you post a screenshot of exactly what you're looking for, and what settings you use to make a right-hand navigation div?

[PaydenMcRoberts1]

This is what I'm talking about (the area I've outlined in red):

I'm just trying to figure out the name of that div and the name of the div for the tabs so that I can add css to style them. I've used Firefox Developer Version, but I haven't been able to find a name in the DOM that works.

[DarrenWiens2]

It's id="nav-bar" for me.

In Chrome Dev tools there's a button to inspect DOM elements: Inspect and Edit Pages and Styles  |  Web  |  Google Developers 

[PaydenMcRoberts1]

I've tried adding nav-bar to the style tag but it didn't work.

[MarkCooney · Accepted solution]

Try using the important css rule.

#nav-bar {

  background: 'red' !important;

}